Organized the version parameters. Combined font data together.

index.html

@@ -24,16 +24,39 @@
 
   <script>
 
+    const fonts = {
+      coptic: {
+        textureURL: "./coptic_msdf.png",
+        sequenceLength: 32
+      },
+      gothic: {
+        textureURL: "./gothic_msdf.png",
+        sequenceLength: 27
+      },
+      matrixcode: {
+        textureURL: "./matrixcode_msdf.png",
+        sequenceLength: 57
+      },
+    };
+
     const versions = {
       paradise: {
-        fontTexture: "./coptic_msdf.png",
-        raindropLength: 0.5,
-        glyphSequenceLength: 32,
         bloom: {
-          strength: 4,
           radius: 1,
+          strength: 4,
           threshold: 0
         },
+        cycleSpeed: 0.05,
+        cycleStyle: "cycleFasterWhenDimmed",
+        fade: true,
+        fallSpeed: 0.05,
+        font: fonts.coptic,
+        glyphEdgeCrop: 0.0,
+        glyphHeightToWidth:1,
+        hasSun: true,
+        hasThunder: false,
+        isPolar: true,
+        numColumns: 50,
         palette: [
           {r: 0.00, g:  0.00, b:  0.00, at: 0.0},
           {r: 0.52, g:  0.17, b:  0.05, at: 0.4},
@@ -41,27 +64,26 @@
           {r: 1.00, g:  0.74, b:  0.29, at: 0.9},
           {r: 1.00, g:  1.00, b:  1.00, at: 1.0},
         ],
-        fallSpeed: 0.05,
+        raindropLength: 0.5,
-        cycleSpeed: 0.05,
-        hasThunder: false,
-        hasSun: true,
         slant: 0,
-        glyphEdgeCrop: 0.0,
-        glyphHeightToWidth:1,
-        isPolar: true,
-        numColumns: 50,
-        fade: true,
-        cycleStyle: "cycleFasterWhenDimmed"
       },
       nightmare: {
-        fontTexture: "./gothic_msdf.png",
-        raindropLength: 0.6,
-        glyphSequenceLength: 27,
         bloom: {
-          strength: 2,
           radius: 0.8,
+          strength: 2,
           threshold: 0.5
         },
+        cycleSpeed: 0.02,
+        cycleStyle: "cycleFasterWhenDimmed",
+        fade: true,
+        fallSpeed: 2.0,
+        font: fonts.gothic,
+        glyphEdgeCrop: 0.0,
+        glyphHeightToWidth:1,
+        hasSun: false,
+        hasThunder: true,
+        isPolar: false,
+        numColumns: 60,
         palette: [
           {r: 0.00, g:  0.00, b:  0.00, at: 0.0},
           {r: 0.52, g:  0.00, b:  0.00, at: 0.2},
@@ -69,27 +91,26 @@
           {r: 1.00, g:  0.60, b:  0.30, at: 0.8},
           {r: 1.00, g:  1.00, b:  0.90, at: 1.0},
         ],
-        fallSpeed: 2.0,
+        raindropLength: 0.6,
-        cycleSpeed: 0.02,
-        hasThunder: true,
-        hasSun: false,
         slant: 360 / 16,
-        glyphEdgeCrop: 0.0,
-        glyphHeightToWidth:1,
-        isPolar: false,
-        numColumns: 60,
-        fade: true,
-        cycleStyle: "cycleFasterWhenDimmed"
       },
       ["1999"]: {
-        fontTexture: "./matrixcode_msdf.png",
-        raindropLength: 1,
-        glyphSequenceLength: 57,
         bloom: {
-          strength: 2,
           radius: 0.5,
+          strength: 2,
           threshold: 0.3
         },
+        cycleSpeed: 1,
+        cycleStyle: "cycleFasterWhenDimmed",
+        fade: true,
+        fallSpeed: 1,
+        font: fonts.matrixcode,
+        glyphEdgeCrop: 0.0,
+        glyphHeightToWidth:1,
+        hasSun: false,
+        hasThunder: false,
+        isPolar: false,
+        numColumns: 80,
         palette: [
           {r:   0/255, g:    0/255, b:    0/255, at:  0/16},
           {r:   6/255, g:   16/255, b:    8/255, at:  1/16},
@@ -109,43 +130,33 @@
           {r: 129/255, g:  232/255, b:  148/255, at: 15/16},
           {r: 140/255, g:  235/255, b:  157/255, at: 16/16},
         ],
-        fallSpeed: 1,
+        raindropLength: 1,
-        cycleSpeed: 1,
-        hasThunder: false,
-        hasSun: false,
         slant: 0,
-        glyphEdgeCrop: 0.0,
-        glyphHeightToWidth:1,
-        isPolar: false,
-        numColumns: 80,
-        fade: true,
-        cycleStyle: "cycleFasterWhenDimmed"
       },
       throwback: {
-        fontTexture: "./matrixcode_msdf.png",
-        raindropLength: 1.5,
-        glyphSequenceLength: 57,
         bloom: {
-          strength: 1,
           radius: 0.4,
+          strength: 1,
           threshold: 0.0
         },
+        cycleSpeed: 0.4,
+        cycleStyle: "cycleRandomly",
+        fade: false,
+        fallSpeed: 0.6,
+        font: fonts.matrixcode,
+        glyphEdgeCrop: 0.15,
+        glyphHeightToWidth:1.5,
+        hasSun: false,
+        hasThunder: false,
+        isPolar: false,
+        numColumns: 90,
         palette: [
           {r: 0.00, g:  0.00, b:  0.00, at: 0.0},
           {r: 0.30, g:  0.90, b:  0.35, at: 0.5},
           {r: 0.90, g:  1.00, b:  0.90, at: 1.0},
         ],
-        fallSpeed: 0.6,
+        raindropLength: 1.5,
-        cycleSpeed: 0.4,
-        hasThunder: false,
-        hasSun: false,
         slant: 0,
-        glyphEdgeCrop: 0.15,
-        glyphHeightToWidth:1.5,
-        isPolar: false,
-        numColumns: 90,
-        fade: false,
-        cycleStyle: "cycleRandomly"
       }
     };
 
@@ -188,24 +199,25 @@
     element.appendChild(renderer.domElement);
     const composer = new THREE.EffectComposer( renderer );
 
-    const fontTexture = new THREE.TextureLoader().load( version.fontTexture );
+    const fontTexture = new THREE.TextureLoader().load( version.font.textureURL );
 
-    const matrixRenderer = makeMatrixRenderer(renderer, fontTexture, {
+    const matrixRenderer = makeMatrixRenderer(renderer, {
-      sharpness,
-      numColumns,
       animationSpeed, fallSpeed, cycleSpeed,
-      glyphSequenceLength,
+      cycleStyle: version.cycleStyle,
-      numFontColumns,
+      fade,
-      hasThunder: version.hasThunder,
+      fontTexture,
-      hasSun: version.hasSun,
+      glyphSequenceLength: version.font.sequenceLength,
-      isPolar: version.isPolar,
-      slant,
       glyphEdgeCrop,
       glyphHeightToWidth,
-      fade,
+      hasSun: version.hasSun,
-      showComputationTexture: effect === "none",
+      hasThunder: version.hasThunder,
+      isPolar: version.isPolar,
+      numColumns,
+      numFontColumns,
       raindropLength,
-      cycleStyle: version.cycleStyle
+      sharpness,
+      showComputationTexture: effect === "none",
+      slant,
     });
 
     matrixRenderer.pass.renderToScreen = false;

js/MatrixRenderer.js

@@ -1,4 +1,5 @@
-const makeMatrixRenderer = (renderer, texture, {
+const makeMatrixRenderer = (renderer, {
+  fontTexture,
   sharpness,
   numColumns,
   animationSpeed, fallSpeed, cycleSpeed,
@@ -176,7 +177,7 @@ const glyphVariable = gpuCompute.addVariable(
     new THREE.RawShaderMaterial({
       uniforms: {
         glyphs: { type: "t", value: glyphRTT },
-        msdf: { type: "t", value: texture },
+        msdf: { type: "t", value: fontTexture },
         numColumns: {type: "f", value: numColumns},
         sharpness: { type: "f", value: sharpness },
         numFontColumns: {type: "f", value: numFontColumns},
@@ -242,7 +243,7 @@ const glyphVariable = gpuCompute.addVariable(
           return;
         #endif
 
-        // Unpack the values from the glyph texture
+        // Unpack the values from the font texture
         float brightness = glyph.r;
         #ifndef fade
           if (brightness < -1.0) { discard; return; }
@@ -283,7 +284,6 @@ const glyphVariable = gpuCompute.addVariable(
     mesh.material.defines.isPolar = 1.0;
   }
 
-  console.log(fade);
   if (fade) {
     mesh.material.defines.fade = 1.0;
   }