not bad for first time

js/config.js

@@ -91,7 +91,7 @@ const defaults = {
 	],
 	raindropLength: 1, // Adjusts the frequency of raindrops (and their length) in a column
 	slant: 0, // The angle at which rain falls; the orientation of the glyph grid
-	resolution: 1, // An overall scale multiplier
+	resolution: .75, // An overall scale multiplier
 	useHalfFloat: false,
 	renderer: "webgpu", // The preferred web graphics API
 	useHoloplay: false,
@@ -174,11 +174,11 @@ const versions = {
 	},
 	updated: {
 		font: "resurrections",
-		numColumns: 108,
+		numColumns: 100,
 		fallSpeed: 0.35,
 		cycleStyle: "cycleRandomly",
 		cycleSpeed: 0.8,
-		glyphEdgeCrop: 0.1,
+		glyphEdgeCrop: .27,
 		paletteEntries: [
 			{ hsl: [0.39, 0.9, 0.0], at: 0.0 },
 			{ hsl: [0.39, 1.0, 0.6], at: 0.5 },

js/regl/main.js

@@ -7,6 +7,7 @@ import makeStripePass from "./stripePass.js";
 import makeImagePass from "./imagePass.js";
 import makeResurrectionPass from "./resurrectionPass.js";
 import makeQuiltPass from "./quiltPass.js";
+import makeRipplesPass from "./ripplesPass.js";
 import getLKG from "./lkgHelper.js";
 
 const effects = {
@@ -20,6 +21,7 @@ const effects = {
 	image: makeImagePass,
 	resurrection: makeResurrectionPass,
 	resurrections: makeResurrectionPass,
+	ripples: makeRipplesPass,
 };
 
 const dimensions = { width: 1, height: 1 };
@@ -41,19 +43,19 @@ export default async (canvas, config) => {
 		canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
 	};
 	window.onresize = resize;
-	if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
+	// if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
-		window.onclick = () => {
+	// 	window.onclick = () => {
-			if (document.fullscreenElement == null) {
+	// 		if (document.fullscreenElement == null) {
-				if (canvas.webkitRequestFullscreen != null) {
+	// 			if (canvas.webkitRequestFullscreen != null) {
-					canvas.webkitRequestFullscreen();
+	// 				canvas.webkitRequestFullscreen();
-				} else {
+	// 			} else {
-					canvas.requestFullscreen();
+	// 				canvas.requestFullscreen();
-				}
+	// 			}
-			} else {
+	// 		} else {
-				document.exitFullscreen();
+	// 			document.exitFullscreen();
-			}
+	// 		}
-		};
+	// 	};
-	}
+	// }
 	resize();
 
 	const regl = createREGL({

js/regl/ripplesPass.js

@@ -0,0 +1,35 @@
+import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
+
+// Multiplies the rendered rain and bloom by a loaded in image
+
+// const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg";
+
+export default ({ regl, config }, inputs) => {
+    console.log('ripples');
+    
+	const output = makePassFBO(regl, config.useHalfFloat);
+	// const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
+	// const bloomStrength = config.bloomStrength;
+	// const background = loadImage(regl, bgURL);
+	const ripplesPassFrag = loadText("shaders/glsl/ripplesPass.frag.glsl");
+	const render = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			// bloomStrength,
+			time: regl.context("time"),
+			tex: inputs.primary,
+			bloomTex: inputs.bloom,
+			height: regl.context("viewportWidth"),
+			width: regl.context("viewportHeight"),
+		},
+		framebuffer: output,
+	});
+	return makePass(
+		{
+			primary: output,
+		},
+		Promise.all([ripplesPassFrag.loaded]),
+		(w, h) => output.resize(w, h),
+		() => render({ frag: ripplesPassFrag.text() })
+	);
+};

shaders/glsl/ripplesPass.frag.glsl

@@ -0,0 +1,33 @@
+precision mediump float;
+varying vec2 vUV;
+uniform float width, height;
+uniform float time;
+uniform sampler2D tex;
+// uniform sampler2D bloomTex;
+
+void main() {
+
+	// gl_FragColor = texture2D(tex, vUV);
+	// vec4 color = texture2D(bloomTex, vUV) +  texture2D(tex, vUV);
+
+	vec2 iResolution = vec2(width,height);
+	vec2 cp = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
+	float cl = length(cp);
+    vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl / 10.) * cos(cl * 1.0 - time * 5.0) * 0.8;
+	// vec4 col=smoothstep(0.1,.91,texture2D(color).xyz);
+	
+	vec3 col = texture2D(tex, uv).xyz;// + texture2D(bloomTex, uv).xyz;;
+
+
+
+	gl_FragColor = vec4(col,1.0);
+}
+
+// void main( out vec4 fragColor, in vec2 fragCoord )
+// {
+//     vec2 cp = -1.0 + 2.0 * fragCoord / iResolution.xy;
+//     float cl = length(cp);
+//     vec2 uv = fragCoord / iResolution.xy + (cp / cl) * cos(cl * 12.0 - iTime * 4.0) * 0.02;
+//     vec3 col = texture(iChannel0, uv).xyz;
+//     fragColor = vec4(col, 1.0);
+// }