Figured out how to make the nightmare matrix code slanted.

index.html

@@ -44,6 +44,7 @@
         cycleSpeed: 0.05,
         hasThunder: false,
         hasSun: true,
+        isSlanted: false,
         isPolar: true,
         numColumns: 50
       },
@@ -62,10 +63,11 @@
           {color: new THREE.Vector3(1.00, 0.60, 0.30), at: 0.8},
           {color: new THREE.Vector3(1.00, 1.00, 0.90), at: 1.0},
         ],
-        fallSpeed: 0.4,
+        fallSpeed: 2.0,
         cycleSpeed: 0.02,
         hasThunder: true,
         hasSun: false,
+        isSlanted: true,
         isPolar: false,
         numColumns: 60
       },
@@ -87,6 +89,7 @@
         cycleSpeed: 1,
         hasThunder: false,
         hasSun: false,
+        isSlanted: false,
         isPolar: false,
         numColumns: 80
       }
@@ -104,10 +107,6 @@
     const numColumns = parseInt(getParam("width", version.numColumns));
     const numGlyphColumns = 8;
     const glyphSequenceLength = version.glyphSequenceLength;
-    const palette = version.palette;
-    const hasThunder = version.hasThunder;
-    const hasSun = version.hasSun;
-    const isPolar = version.isPolar;
 
     const effect = getParam("effect", "plain");
 
@@ -129,9 +128,10 @@
       animationSpeed, fallSpeed, cycleSpeed,
       glyphSequenceLength,
       numGlyphColumns,
-      hasThunder,
-      hasSun,
-      isPolar,
+      hasThunder: version.hasThunder,
+      hasSun: version.hasSun,
+      isPolar: version.isPolar,
+      isSlanted: version.isSlanted,
     });
 
     matrixRenderer.pass.renderToScreen = false;
@@ -142,7 +142,7 @@
 
     switch (effect) {
       case "plain":
-        composer.addPass(new THREE.ColorMapPass(palette, 0.1));
+        composer.addPass(new THREE.ColorMapPass(version.palette, 0.1));
         break;
       case "pride":
         composer.addPass(new THREE.HorizontalColorationPass([

js/MatrixRenderer.js

@@ -6,7 +6,8 @@ const makeMatrixRenderer = (renderer, texture, {
   numGlyphColumns,
   hasThunder,
   hasSun,
-  isPolar
+  isPolar,
+  isSlanted
 }) => {
   const matrixRenderer = {};
   const camera = new THREE.OrthographicCamera( -0.5, 0.5, 0.5, -0.5, 0.0001, 10000 );
@@ -75,9 +76,9 @@ const glyphVariable = gpuCompute.addVariable(
       #ifdef hasThunder
         vec2 distVec = (gl_FragCoord.xy / resolution.xy - vec2(0.5, 1.0)) * vec2(1.0, 2.0);
         float thunder = (blast(sin(SQRT_5 * simTime * 2.0), 10.0) + blast(sin(SQRT_2 * simTime * 2.0), 10.0));
-        thunder *= 20.0 * (1.0 - 1.5 * length(distVec));
+        thunder *= 30.0 * (1.0 - 1.0 * length(distVec));
 
-        newBrightness *= max(0.0, thunder) * 0.4 + 0.6;
+        newBrightness *= max(0.0, thunder) * 1.0 + 0.7;
 
         if (newBrightness > brightness) {
           brightness = newBrightness;
@@ -179,6 +180,12 @@ const glyphVariable = gpuCompute.addVariable(
           float radius = length(diff);
           float angle = atan(diff.y, diff.x) + PI;
           vec2 uv = vec2(angle / PI, 1.0 - pow(radius * 0.75, 0.6));
+        #elif isSlanted
+          float angle = PI * 0.125;
+          vec2 rotation = vec2(cos(angle), sin(angle));
+          vec2 uv = vec2(
+             (vUV.x - 0.5) * rotation.x + (vUV.y - 0.5) * rotation.y,
+             (vUV.y - 0.5) * rotation.x - (vUV.x - 0.5) * rotation.y) * 0.75 + 0.5;
         #else
           vec2 uv = vUV;
         #endif
@@ -212,6 +219,10 @@ const glyphVariable = gpuCompute.addVariable(
     mesh.material.defines.isPolar = 1.0;
   }
 
+  if (isSlanted) {
+    mesh.material.defines.isSlanted = 1.0;
+  }
+
   // mesh.material = new THREE.MeshBasicMaterial({map: glyphRTT});
 
   scene.add( mesh );