Added backgroundColor support and improved stripe colors handling in config.

js/config.js

@@ -17,6 +17,7 @@ const fonts = {
 };
 
 const defaults = {
+  backgroundColor: [0, 0, 0],
   volumetric: false,
   animationSpeed: 1,
   forwardSpeed: 0.25,
@@ -160,11 +161,13 @@ const paramMapping = {
     parser: s => nullNaN(range(parseFloat(s), 0, 1))
   },
   url: { key: "bgURL", parser: s => s },
-  colors: { key: "stripeColors", parser: s => s },
+  stripeColors: { key: "stripeColors", parser: s => s },
+  backgroundColor: { key: "backgroundColor", parser: s => s.split(",").map(parseFloat) },
   volumetric: { key: "volumetric", parser: s => s.toLowerCase().includes("true") }
 };
 paramMapping.dropLength = paramMapping.raindropLength;
 paramMapping.angle = paramMapping.slant;
+paramMapping.colors = paramMapping.stripeColors;
 
 export default (searchString, make1DTexture) => {
   const urlParams = Object.fromEntries(

js/palettePass.js

@@ -1,4 +1,4 @@
-import { make1DTexture, makePassFBO, makePass } from "./utils.js";
+import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 const makePalette = (regl, entries) => {
   const PALETTE_SIZE = 2048;
@@ -63,6 +63,7 @@ export default (regl, config, inputs) => {
       uniform sampler2D palette;
       uniform float ditherMagnitude;
       uniform float time;
+      uniform vec3 backgroundColor;
       varying vec2 vUV;
 
       highp float rand( const in vec2 uv, const in float t ) {
@@ -74,11 +75,14 @@ export default (regl, config, inputs) => {
       void main() {
         float brightness = texture2D( tex, vUV ).r + texture2D( bloomTex, vUV ).r;
         float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-        gl_FragColor = texture2D( palette, vec2(at, 0.0));
+        gl_FragColor = texture2D( palette, vec2(at, 0.0)) + vec4(backgroundColor, 0.0);
       }
     `,
 
       uniforms: {
+        ...extractEntries(config, [
+          "backgroundColor",
+        ]),
         tex: inputs.primary,
         bloomTex: inputs.bloom,
         palette,

js/stripePass.js

@@ -1,4 +1,4 @@
-import { make1DTexture, makePassFBO, makePass } from "./utils.js";
+import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 const neapolitanStripeColors = [
   [0.4, 0.15, 0.1],
@@ -47,6 +47,7 @@ export default (regl, config, inputs) => {
       uniform sampler2D stripes;
       uniform float ditherMagnitude;
       uniform float time;
+      uniform vec3 backgroundColor;
       varying vec2 vUV;
 
       highp float rand( const in vec2 uv, const in float t ) {
@@ -59,11 +60,14 @@ export default (regl, config, inputs) => {
         vec3 color = texture2D(stripes, vUV).rgb;
         float brightness = min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r;
         float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-        gl_FragColor = vec4(color * at, 1.0);
+        gl_FragColor = vec4(color * at + backgroundColor, 1.0);
       }
     `,
 
       uniforms: {
+        ...extractEntries(config, [
+          "backgroundColor",
+        ]),
         tex: inputs.primary,
         bloomTex: inputs.bloom,
         stripes,