Expose dither magnitude and bloom strength through URL parameters.

README.md

@@ -84,6 +84,8 @@ Now you know link fu. Here's a list of customization options:
 - **forwardSpeed** - the rate that the 3D raindrops approach. Default is 1.0.
 - **slant** - the angle that the 2D raindrops fall, 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.
+- **bloomStrength** - the glow intensity, from 0 to 1. Default is 1.
+- **ditherMagnitude** - the amount to randomly darken pixels, to conceal [banding](https://en.wikipedia.org/wiki/Colour_banding). Default is 0.05.
 - **resolution** - the image size, relative to the window size. Default is 1. Lowering this value may improve your performance, especially on high pixel density displays.
 - **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.

js/config.js

@@ -52,6 +52,7 @@ const defaults = {
 	brightnessOverride: 0.0, // A global override to the brightness of displayed glyphs. Only used if it is > 0.
 	brightnessThreshold: 0, // The minimum brightness for a glyph to still be considered visible
 	brightnessDecay: 1.0, // The rate at which glyphs light up and dim
+	ditherMagnitude: 0.05, // The magnitude of the random per-pixel dimming
 	fallSpeed: 0.75, // The speed the raindrops progress downwards
 	glyphEdgeCrop: 0.0, // The border around a glyph in a font texture that should be cropped out
 	glyphHeightToWidth: 1, // The aspect ratio of glyphs
@@ -260,6 +261,14 @@ const paramMapping = {
 		key: "bloomSize",
 		parser: (s) => nullNaN(range(parseFloat(s), 0, 1)),
 	},
+	bloomStrength: {
+		key: "bloomStrength",
+		parser: (s) => nullNaN(range(parseFloat(s), 0, 1)),
+	},
+	ditherMagnitude: {
+		key: "ditherMagnitude",
+		parser: (s) => nullNaN(range(parseFloat(s), 0, 1)),
+	},
 	url: { key: "bgURL", parser: (s) => s },
 	stripeColors: { key: "stripeColors", parser: (s) => s },
 	backgroundColor: { key: "backgroundColor", parser: (s) => s.split(",").map(parseFloat) },

js/regl/palettePass.js

@@ -65,7 +65,7 @@ const makePalette = (regl, entries) => {
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const palette = makePalette(regl, config.paletteEntries);
-	const { backgroundColor } = config;
+	const { backgroundColor, ditherMagnitude } = config;
 
 	const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
 
@@ -74,10 +74,10 @@ export default ({ regl, config }, inputs) => {
 
 		uniforms: {
 			backgroundColor,
+			ditherMagnitude,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 			palette,
-			ditherMagnitude: 0.05,
 		},
 		framebuffer: output,
 	});

js/regl/resurrectionPass.js

@@ -10,7 +10,7 @@ import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
-	const { backgroundColor } = config;
+	const { backgroundColor, ditherMagnitude } = config;
 	const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl");
 
 	const render = regl({
@@ -18,9 +18,9 @@ export default ({ regl, config }, inputs) => {
 
 		uniforms: {
 			backgroundColor,
+			ditherMagnitude,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
-			ditherMagnitude: 0.05,
 		},
 		framebuffer: output,
 	});

js/regl/stripePass.js

@@ -31,7 +31,7 @@ const prideStripeColors = [
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 
-	const { backgroundColor } = config;
+	const { backgroundColor, ditherMagnitude } = config;
 
 	// Expand and convert stripe colors into 1D texture data
 	const stripeColors =
@@ -49,10 +49,10 @@ export default ({ regl, config }, inputs) => {
 
 		uniforms: {
 			backgroundColor,
+			ditherMagnitude,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 			stripes,
-			ditherMagnitude: 0.05,
 		},
 		framebuffer: output,
 	});

js/webgpu/palettePass.js

@@ -102,7 +102,7 @@ export default ({ config, device, timeBuffer }) => {
 
 		const paletteShaderUniforms = structs.from(paletteShader.code);
 		const configUniforms = paletteShaderUniforms.Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
 
 		const paletteUniforms = paletteShaderUniforms.Palette;
 		paletteBuffer = makePalette(device, paletteUniforms, config.paletteEntries);

js/webgpu/resurrectionPass.js

@@ -36,7 +36,7 @@ export default ({ config, device, timeBuffer }) => {
 		});
 
 		const configUniforms = structs.from(resurrectionShader.code).Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
 	})();
 
 	const build = (size, inputs) => {

js/webgpu/stripePass.js

@@ -73,7 +73,7 @@ export default ({ config, device, timeBuffer }) => {
 		});
 
 		const configUniforms = structs.from(stripeShader.code).Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: 0.05, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
 	})();
 
 	const build = (size, inputs) => {