Overhauled the rainPass's support for the "operator" version of the effect. It now overrides the brightness of any glyph brighter than a threshold, which I think is a much clearer concept.

Also changed the way the glyphs cycle in the "operator" version, after noticing they only change once every four or five frames in the original effect.

TODO.txt

@@ -1,7 +1,7 @@
 TODO:
 
 Improve forkability
-  Should the OPERATOR and PARADISE specific config values still exist?
+
   Document every variable, method, and section of the main function in rainPass.compute
     Maybe rewrite it? Make the time based stuff easier to read?
 

js/config.js

@@ -29,12 +29,12 @@ const defaults = {
 	bloomSize: 0.6, // The amount the bloom calculation is scaled
 	highPassThreshold: 0.1, // The minimum brightness that is still blurred
 	cycleSpeed: 1, // The speed glyphs change
+	cycleFrameSkip: 1, // The global minimum number of frames between glyphs cycling
 	cycleStyleName: "cycleFasterWhenDimmed", // The way glyphs cycle, either proportional to their brightness or randomly
 	cursorEffectThreshold: 1, // The minimum brightness for a glyph to still be lit up as a cursor at the bottom of a raindrop
-	brightnessOffset: 0.0, // OPERATOR
+	brightnessOverride: 0.0, // A global override to the brightness of displayed glyphs. Only used if it is > 0.
-	brightnessMultiplier: 1.0, // OPERATOR
+	brightnessThreshold: 0, // The minimum brightness for a glyph to still be considered visible
-	brightnessMinimum: 0, // OPERATOR
+	brightnessDecay: 1.0, // The rate at which glyphs light up and dim
-	brightnessMix: 1.0, // The decay at which a glyph lights up and dims
 	fallSpeed: 1, // 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
@@ -70,12 +70,12 @@ const versions = {
 		...fonts.matrixcode,
 		bloomStrength: 0.75,
 		highPassThreshold: 0.0,
-		cycleSpeed: 0.05,
+		cycleSpeed: 0.2,
+		cycleFrameSkip: 6,
 		cycleStyleName: "cycleRandomly",
 		cursorEffectThreshold: 0.64,
-		brightnessOffset: 0.25,
+		brightnessOverride: 0.25,
-		brightnessMultiplier: 0.0,
+		brightnessThreshold: -1.0,
-		brightnessMinimum: -1.0,
 		fallSpeed: 0.65,
 		glyphEdgeCrop: 0.15,
 		glyphHeightToWidth: 1.35,
@@ -92,7 +92,7 @@ const versions = {
 		...defaults,
 		...fonts.gothic,
 		highPassThreshold: 0.7,
-		brightnessMix: 0.75,
+		brightnessDecay: 0.75,
 		fallSpeed: 2.0,
 		hasThunder: true,
 		numColumns: 60,
@@ -112,7 +112,7 @@ const versions = {
 		bloomStrength: 1.75,
 		highPassThreshold: 0,
 		cycleSpeed: 0.1,
-		brightnessMix: 0.05,
+		brightnessDecay: 0.05,
 		fallSpeed: 0.08,
 		hasSun: true,
 		isPolar: true,
@@ -141,7 +141,9 @@ const versions = {
 	},
 };
 versions.throwback = versions.operator;
-versions["1999"] = versions.classic;
+versions["1999"] = versions.operator;
+versions["2003"] = versions.classic;
+versions["2021"] = versions.resurrections;
 
 const range = (f, min = -Infinity, max = Infinity) => Math.max(min, Math.min(max, f));
 const nullNaN = (f) => (isNaN(f) ? null : f);

js/rainPass.js

@@ -63,12 +63,12 @@ export default (regl, config) => {
 	const computeUniforms = {
 		...commonUniforms,
 		...extractEntries(config, [
-			"brightnessMinimum",
+			"brightnessThreshold",
-			"brightnessMix",
+			"brightnessOverride",
-			"brightnessMultiplier",
+			"brightnessDecay",
-			"brightnessOffset",
 			"cursorEffectThreshold",
 			"cycleSpeed",
+			"cycleFrameSkip",
 			"fallSpeed",
 			"hasSun",
 			"hasThunder",

js/utils.js

@@ -139,6 +139,7 @@ const makeFullScreenQuad = (regl, uniforms = {}, context = {}) =>
 		uniforms: {
 			...uniforms,
 			time: regl.context("time"),
+			tick: regl.context("tick"),
 		},
 
 		context,

shaders/rainPass.compute

@@ -13,16 +13,18 @@ precision highp float;
 #define SQRT_5 2.23606797749979
 
 uniform float time;
+uniform float tick;
 uniform float numColumns, numRows;
 uniform sampler2D lastState;
 uniform bool hasSun;
 uniform bool hasThunder;
 uniform bool showComputationTexture;
-uniform float brightnessMinimum, brightnessMultiplier, brightnessOffset, brightnessMix;
+uniform float brightnessOverride, brightnessThreshold, brightnessDecay;
 uniform float animationSpeed, fallSpeed, cycleSpeed;
 uniform float raindropLength;
 uniform float glyphHeightToWidth;
 uniform int cycleStyle;
+uniform float cycleFrameSkip;
 uniform float rippleScale, rippleSpeed, rippleThickness;
 uniform int rippleType;
 uniform float cursorEffectThreshold;
@@ -60,8 +62,7 @@ float getGlyphCycleSpeed(float rainTime, float brightness) {
 	if (cycleStyle == 0 && brightness > 0.0) {
 		glyphCycleSpeed = pow(1.0 - brightness, 4.0);
 	} else if (cycleStyle == 1) {
-		glyphCycleSpeed = fract((rainTime + 0.7 * sin(RADS_TO_HZ * SQRT_2 * rainTime) + 1.1 * sin(RADS_TO_HZ * SQRT_5 * rainTime))) * 0.75;
+		glyphCycleSpeed = fract(rainTime);
-		// glyphCycleSpeed = fract(rainTime) * 0.75; // loop
 	}
 	return glyphCycleSpeed;
 }
@@ -144,7 +145,10 @@ void main()	{
 	if (hasThunder) rainBrightness = applyThunder(rainBrightness, simTime, screenPos);
 
 	float glyphCycleSpeed = getGlyphCycleSpeed(rainTime, rainBrightness);
-	float glyphCycle = fract(oldGlyphCycle + 0.005 * animationSpeed * cycleSpeed * glyphCycleSpeed);
+	float glyphCycle = oldGlyphCycle;
+	if (mod(tick, cycleFrameSkip) == 0.0) {
+		glyphCycle = fract(oldGlyphCycle + 0.005 * animationSpeed * cycleSpeed * glyphCycleSpeed * cycleFrameSkip);
+	}
 
 	float effect = 0.;
 	effect = applyRippleEffect(effect, simTime, screenPos);
@@ -152,12 +156,12 @@ void main()	{
 
 	float glyphDepth = rand(vec2(glyphPos.x, 0.0));
 
-	if (rainBrightness > brightnessMinimum) {
+	if (brightnessOverride > 0. && rainBrightness > brightnessThreshold) {
-		rainBrightness = rainBrightness * brightnessMultiplier + brightnessOffset;
+		rainBrightness = brightnessOverride;
 	}
 
 	if (!isInitializing) {
-		rainBrightness = mix(oldRainBrightness, rainBrightness, brightnessMix);
+		rainBrightness = mix(oldRainBrightness, rainBrightness, brightnessDecay);
 	}
 
 	if (showComputationTexture) {