Removed sun shower. Thunder and ripples are now handled by a third compute shader.

js/config.js

@@ -75,7 +75,6 @@ const defaults = {
 	glyphEdgeCrop: 0.0, // The border around a glyph in a font texture that should be cropped out
 	glyphHeightToWidth: 1, // The aspect ratio of glyphs
 	glyphVerticalSpacing: 1, // The ratio of the vertical distance between glyphs to their height
-	hasSun: false, // Makes the glyphs more radiant. Admittedly not very technical.
 	hasThunder: false, // An effect that adds dramatic lightning flashes
 	isPolar: false, // Whether the glyphs arc across the screen or sit in a standard grid
 	rippleTypeName: null, // The variety of the ripple effect
@@ -154,10 +153,10 @@ const versions = {
 		bloomStrength: 1,
 		highPassThreshold: 0,
 		cycleSpeed: 0.05,
-		baseBrightness: -0.1,
+		baseBrightness: -1.3,
+		baseContrast: 2,
 		brightnessDecay: 0.05,
 		fallSpeed: 0.04,
-		hasSun: true,
 		isPolar: true,
 		rippleTypeName: "circle",
 		rippleSpeed: 0.1,
@@ -211,7 +210,6 @@ const versions = {
 		fallSpeed: 0.1,
 		cycleStyleName: "cycleRandomly",
 		highPassThreshold: 0.0,
-		hasSun: true,
 		paletteEntries: [
 			{ hsl: [0.6, 1.0, 0.05], at: 0.0 },
 			{ hsl: [0.6, 0.8, 0.1], at: 0.1 },

js/regl/main.js

@@ -34,7 +34,7 @@ const loadJS = (src) =>
 	});
 
 export default async (canvas, config) => {
-	await Promise.all([loadJS("lib/regl.min.js"), loadJS("lib/gl-matrix.js")]);
+	await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
 
 	const resize = () => {
 		canvas.width = Math.ceil(canvas.clientWidth * config.resolution);

js/regl/rainPass.js

@@ -12,6 +12,21 @@ const cycleStyles = {
 	cycleRandomly: 1,
 };
 
+// These compute buffers are used to compute the properties of cells in the grid.
+// They take turns being the source and destination of a "compute" shader.
+// The half float data type is crucial! It lets us store almost any real number,
+// whereas the default type limits us to integers between 0 and 255.
+
+// These double buffers are smaller than the screen, because their pixels correspond
+// with cells in the grid, and the cells' glyphs are much larger than a pixel.
+const makeComputeDoubleBuffer = (regl, height, width) =>
+	makeDoubleBuffer(regl, {
+		width,
+		height,
+		wrapT: "clamp",
+		type: "half float",
+	});
+
 const numVerticesPerQuad = 2 * 3;
 const tlVert = [0, 0];
 const trVert = [0, 1];
@@ -46,36 +61,11 @@ export default ({ regl, config, lkg }) => {
 		showDebugView,
 	};
 
-	// These two framebuffers are used to compute the raining code.
-	// they take turns being the source and destination of the "compute" shader.
-	// The half float data type is crucial! It lets us store almost any real number,
-	// whereas the default type limits us to integers between 0 and 255.
-
-	// This double buffer is smaller than the screen, because its pixels correspond
-	// with glyphs in the final image, and the glyphs are much larger than a pixel.
-	const shineDoubleBuffer = makeDoubleBuffer(regl, {
-		width: numColumns,
-		height: numRows,
-		wrapT: "clamp",
-		type: "half float",
-	});
+	const shineDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
 	const rainPassShine = loadText("shaders/glsl/rainPass.shine.frag.glsl");
 	const shineUniforms = {
 		...commonUniforms,
-		...extractEntries(config, [
-			"baseBrightness",
-			"baseContrast",
-			"brightnessDecay",
-			"fallSpeed",
-			"hasSun",
-			"hasThunder",
-			"raindropLength",
-			"rippleScale",
-			"rippleSpeed",
-			"rippleThickness",
-			"loops",
-		]),
-		rippleType,
+		...extractEntries(config, ["baseBrightness", "baseContrast", "brightnessDecay", "fallSpeed", "raindropLength", "loops"]),
 	};
 	const shine = regl({
 		frag: regl.prop("frag"),
@@ -87,12 +77,7 @@ export default ({ regl, config, lkg }) => {
 		framebuffer: shineDoubleBuffer.front,
 	});
 
-	const symbolDoubleBuffer = makeDoubleBuffer(regl, {
-		width: numColumns,
-		height: numRows,
-		wrapT: "clamp",
-		type: "half float",
-	});
+	const symbolDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
 	const rainPassSymbol = loadText("shaders/glsl/rainPass.symbol.frag.glsl");
 	const symbolUniforms = {
 		...commonUniforms,
@@ -110,6 +95,24 @@ export default ({ regl, config, lkg }) => {
 		framebuffer: symbolDoubleBuffer.front,
 	});
 
+	const effectDoubleBuffer = makeComputeDoubleBuffer(regl, numRows, numColumns);
+	const rainPassEffect = loadText("shaders/glsl/rainPass.effect.frag.glsl");
+	const effectUniforms = {
+		...commonUniforms,
+		...extractEntries(config, ["hasThunder", "rippleScale", "rippleSpeed", "rippleThickness", "loops"]),
+		rippleType,
+	};
+	const effect = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			...effectUniforms,
+			shineState: shineDoubleBuffer.front,
+			previousEffectState: effectDoubleBuffer.back,
+		},
+
+		framebuffer: effectDoubleBuffer.front,
+	});
+
 	const quadPositions = Array(numQuadRows)
 		.fill()
 		.map((_, y) =>
@@ -160,6 +163,7 @@ export default ({ regl, config, lkg }) => {
 
 			shineState: shineDoubleBuffer.front,
 			symbolState: symbolDoubleBuffer.front,
+			effectState: effectDoubleBuffer.front,
 			glyphTex: msdf.texture,
 
 			camera: regl.prop("camera"),
@@ -254,6 +258,7 @@ export default ({ regl, config, lkg }) => {
 		() => {
 			shine({ frag: rainPassShine.text() });
 			symbol({ frag: rainPassSymbol.text() });
+			effect({ frag: rainPassEffect.text() });
 			regl.clear({
 				depth: 1,
 				color: [0, 0, 0, 1],