From 5cea203bec3dd1ab798f42fc34c3d2ec9e2a949f Mon Sep 17 00:00:00 2001 From: Rezmason Date: Wed, 20 Nov 2019 21:47:04 -0800 Subject: [PATCH] Adding bloomSize customization option, which reduces the resolution of the bloom shader pass. --- README.md | 2 ++ index.html | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 67efd92..954c324 100644 --- a/README.md +++ b/README.md @@ -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). - **width** - the number of columns (and rows) to draw. Default is 80. - **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. - **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. @@ -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) - **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 diff --git a/index.html b/index.html index b7a70f3..800945f 100644 --- a/index.html +++ b/index.html @@ -214,6 +214,7 @@ const glyphEdgeCrop = parseFloat(getParam("encroach", version.glyphEdgeCrop)); const glyphHeightToWidth = parseFloat(getParam("stretch", version.glyphHeightToWidth)); 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"); @@ -300,7 +301,7 @@ matrixRenderer.resize(width, height); renderer.setSize(width, height); 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("orientationchange", windowResize, false);