mirror of
https://github.com/Rezmason/matrix.git
synced 2026-04-18 14:19:30 -07:00
Adding bloomSize customization option, which reduces the resolution of the bloom shader pass.
This commit is contained in:
@@ -60,6 +60,7 @@ Now you know link fu. Here's a list of customization options:
|
|||||||
- "operator" is more reminiscent of the matrix code as it appears in the first movie's opening titles, and on operators' screens: flatter, crowded, without a gradient, and with occasional effects (such as a square ripple).
|
- "operator" is more reminiscent of the matrix code as it appears in the first movie's opening titles, and on operators' screens: flatter, crowded, without a gradient, and with occasional effects (such as a square ripple).
|
||||||
- **width** - the number of columns (and rows) to draw. Default is 80.
|
- **width** - the number of columns (and rows) to draw. Default is 80.
|
||||||
- **slant** - which angle is up, in degrees. Default is 0.
|
- **slant** - which angle is up, in degrees. Default is 0.
|
||||||
|
- **bloomSize** - The glow quality, from 0 to 1. Default is 0.5. Lowering this value may help the digital rain run smoother on your device.
|
||||||
- **raindropLength** - the vertical scale of "raindrops" in the columns. Can be any number, even negative! Default is 1.0.
|
- **raindropLength** - the vertical scale of "raindrops" in the columns. Can be any number, even negative! Default is 1.0.
|
||||||
- **animationSpeed** - the overall speed of the animation. Can be any number, even negative! Default is 1.0.
|
- **animationSpeed** - the overall speed of the animation. Can be any number, even negative! Default is 1.0.
|
||||||
- **fallSpeed** - the speed of the rain. Can be any number, even negative! Default is 1.0.
|
- **fallSpeed** - the speed of the rain. Can be any number, even negative! Default is 1.0.
|
||||||
@@ -69,6 +70,7 @@ Now you know link fu. Here's a list of customization options:
|
|||||||
- **colors** - if you set the effect to "customStripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values, like so: [https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0)
|
- **colors** - if you set the effect to "customStripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values, like so: [https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0](https://rezmason.github.io/matrix/?effect=customStripes&colors=1,0,0,1,1,0,0,1,0)
|
||||||
- **url** - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
|
- **url** - if you set the effect to "image", this is how you specify which image to load. It doesn't work with any URL; I suggest grabbing them from Wikipedia: [https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg](https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg)
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
### other details
|
### other details
|
||||||
|
|
||||||
|
|||||||
@@ -214,6 +214,7 @@
|
|||||||
const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop));
|
const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop));
|
||||||
const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth));
|
const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth));
|
||||||
const cursorEffectThreshold = getParam("cursorEffectThreshold", version.cursorEffectThreshold);
|
const cursorEffectThreshold = getParam("cursorEffectThreshold", version.cursorEffectThreshold);
|
||||||
|
const bloomSize = Math.max(0.01, Math.min(1, parseFloat(getParam("bloomSize", 0.5))));
|
||||||
|
|
||||||
const effect = getParam("effect", "plain");
|
const effect = getParam("effect", "plain");
|
||||||
|
|
||||||
@@ -300,7 +301,7 @@
|
|||||||
matrixRenderer.resize(width, height);
|
matrixRenderer.resize(width, height);
|
||||||
renderer.setSize(width, height);
|
renderer.setSize(width, height);
|
||||||
composer.setSize(width * pixelRatio, height * pixelRatio);
|
composer.setSize(width * pixelRatio, height * pixelRatio);
|
||||||
bloomPass.setSize( window.innerWidth * pixelRatio, window.innerHeight * pixelRatio );
|
bloomPass.setSize( window.innerWidth * pixelRatio * bloomSize, window.innerHeight * pixelRatio * bloomSize );
|
||||||
}
|
}
|
||||||
window.addEventListener("resize", windowResize, false);
|
window.addEventListener("resize", windowResize, false);
|
||||||
window.addEventListener("orientationchange", windowResize, false);
|
window.addEventListener("orientationchange", windowResize, false);
|
||||||
|
|||||||
Reference in New Issue
Block a user