diff --git a/TODO.txt b/TODO.txt index e119688..56404f5 100644 --- a/TODO.txt +++ b/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? diff --git a/js/config.js b/js/config.js index b34f3c2..b4dccb9 100644 --- a/js/config.js +++ b/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 - brightnessMultiplier: 1.0, // OPERATOR - brightnessMinimum: 0, // OPERATOR - brightnessMix: 1.0, // The decay at which a glyph lights up and dims + 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 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, - brightnessMultiplier: 0.0, - brightnessMinimum: -1.0, + brightnessOverride: 0.25, + brightnessThreshold: -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); diff --git a/js/rainPass.js b/js/rainPass.js index 6ca4158..f8e33c6 100644 --- a/js/rainPass.js +++ b/js/rainPass.js @@ -63,12 +63,12 @@ export default (regl, config) => { const computeUniforms = { ...commonUniforms, ...extractEntries(config, [ - "brightnessMinimum", - "brightnessMix", - "brightnessMultiplier", - "brightnessOffset", + "brightnessThreshold", + "brightnessOverride", + "brightnessDecay", "cursorEffectThreshold", "cycleSpeed", + "cycleFrameSkip", "fallSpeed", "hasSun", "hasThunder", diff --git a/js/utils.js b/js/utils.js index 1114da3..573233a 100644 --- a/js/utils.js +++ b/js/utils.js @@ -139,6 +139,7 @@ const makeFullScreenQuad = (regl, uniforms = {}, context = {}) => uniforms: { ...uniforms, time: regl.context("time"), + tick: regl.context("tick"), }, context, diff --git a/shaders/rainPass.compute b/shaders/rainPass.compute index 5e685f0..04a227c 100644 --- a/shaders/rainPass.compute +++ b/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) * 0.75; // loop + glyphCycleSpeed = fract(rainTime); } 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) { - rainBrightness = rainBrightness * brightnessMultiplier + brightnessOffset; + if (brightnessOverride > 0. && rainBrightness > brightnessThreshold) { + rainBrightness = brightnessOverride; } if (!isInitializing) { - rainBrightness = mix(oldRainBrightness, rainBrightness, brightnessMix); + rainBrightness = mix(oldRainBrightness, rainBrightness, brightnessDecay); } if (showComputationTexture) {