Cleaned up config by moving its responsibilities into the passes

js/stripePass.js

@@ -1,7 +1,38 @@
-import { makePassFBO, makePass } from "./utils.js";
+import { make1DTexture, makePassFBO, makePass } from "./utils.js";
 
-export default (regl, {}, input) => {
+const neapolitanStripeColors = [
+  [0.4, 0.15, 0.1],
+  [0.4, 0.15, 0.1],
+  [0.8, 0.8, 0.6],
+  [0.8, 0.8, 0.6],
+  [1.0, 0.7, 0.8],
+  [1.0, 0.7, 0.8]
+].flat();
+
+const prideStripeColors = [
+  [1, 0, 0],
+  [1, 0.5, 0],
+  [1, 1, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+  [0.8, 0, 1]
+].flat();
+
+export default (regl, config, input) => {
   const output = makePassFBO(regl);
+
+  const stripeColors =
+    "stripeColors" in config
+      ? config.stripeColors.split(",").map(parseFloat)
+      : config.effect === "pride"
+      ? prideStripeColors
+      : neapolitanStripeColors;
+  const numStripeColors = Math.floor(stripeColors.length / 3);
+  const stripes = make1DTexture(
+    regl,
+    stripeColors.slice(0, numStripeColors * 3).map(f => Math.floor(f * 0xff))
+  );
+
   return makePass(
     output,
     regl({
@@ -12,24 +43,26 @@ export default (regl, {}, input) => {
       uniform sampler2D tex;
       uniform sampler2D stripes;
       uniform float ditherMagnitude;
+      uniform float time;
       varying vec2 vUV;
 
-      highp float rand( const in vec2 uv ) {
+      highp float rand( const in vec2 uv, const in float t ) {
         const highp float a = 12.9898, b = 78.233, c = 43758.5453;
         highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
-        return fract(sin(sn) * c);
+        return fract(sin(sn) * c + t);
       }
 
       void main() {
-        vec3 color = texture2D(stripes, vUV).rgb - rand( gl_FragCoord.xy ) * ditherMagnitude;
-        float brightness = texture2D(tex, vUV).r;
+        vec3 color = texture2D(stripes, vUV).rgb;
+        float brightness = texture2D(tex, vUV).r - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
         gl_FragColor = vec4(color * brightness, 1.0);
       }
     `,
 
       uniforms: {
         tex: input,
-        ditherMagnitude: 0.1
+        stripes,
+        ditherMagnitude: 0.05
       },
       framebuffer: output
     })