From a644133c1e1f609eb7cdbbd9a02ca6b275f88a84 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Mon, 3 Sep 2018 00:28:13 -0700
Subject: [PATCH] Moved some more code out of index.html

---
 index.html           | 149 ++++---------------------------------------
 js/MatrixGeometry.js | 135 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 146 insertions(+), 138 deletions(-)
 create mode 100644 js/MatrixGeometry.js

diff --git a/index.html b/index.html
index 3a6051d..9926333 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
   <script src="./js/UnrealBloomPass.js"></script>
 
   <script src="./js/MatrixMaterial.js"></script>
+  <script src="./js/MatrixGeometry.js"></script>
 
   <script>
 
@@ -26,9 +27,12 @@
     const cycleSpeed = parseFloat(getParam("cycleSpeed", 1));
     const numColumns = parseInt(getParam("width", 80));
     const numRows = numColumns;
-    const numGlyphs = numRows * numColumns;
     const glyphSequenceLength = 57;
 
+    const a = parseFloat(getParam("a", 1.125));
+    const b = parseFloat(getParam("b", 1.125));
+    const c = parseFloat(getParam("c", 1.25));
+
     document.ontouchmove = (e) => e.preventDefault();
     const element = document.createElement("matrixcode");
     document.body.appendChild(element);
@@ -42,75 +46,16 @@
     renderer.setSize( window.innerWidth, window.innerHeight );
     element.appendChild(renderer.domElement);
     const composer = new THREE.EffectComposer( renderer );
+
     const texture = new THREE.TextureLoader().load( './matrixcode_msdf.png' );
     const material = makeMatrixMaterial(texture, sharpness);
-
-    const fTexU = 1 / 8;
-    const fTexV = 1 / 8;
-    const [z, w] = [0, 1];
-    const glyphScale = 0.0;
-    const [minH, maxH] = [0 - glyphScale, 1 + glyphScale];
-    const [minV, maxV] = [0 - glyphScale, 1 + glyphScale];
-    const verticesPerGlyph = 4;
-
-    const glyphPositionTemplate = [[minH, maxV, z, w], [maxH, maxV, z, w], [minH, minV, z, w], [maxH, minV, z, w],];
-    const glyphBrightnessTemplate = [0, 0, 0, 0,];
-    const glyphUVTemplate = [[0, fTexV], [fTexU, fTexV], [0, 0], [fTexU, 0],];
-    const glyphIndexTemplate = [0, 2, 1, 2, 3, 1,];
-
-    const glyphPositionMarch = 4;
-    const glyphBrightnessMarch = 1;
-    const glyphUVMarch = 2;
-    const glyphIndexMarch = 4;
-
-    const glyphPositionArray = [];
-    const glyphBrightnessArray = [];
-    const glyphUVArray = [];
-    const glyphIndexArray = [];
-
-    const fRow = 1 / numRows;
-    const fColumn = 1 / numColumns;
-
-    for (let column = 0; column < numColumns; column++) {
-      for (let row = 0; row < numRows; row++) {
-        const index = row + column * numRows;
-        glyphPositionArray.push(...[].concat(...glyphPositionTemplate.map(([x, y, z, w]) => [
-          (x + column) / numColumns - 0.5,
-          (y + row) / numRows - 0.5,
-          z,
-          w,
-        ])));
-        glyphBrightnessArray.push(...glyphBrightnessTemplate);
-        glyphUVArray.push(...[].concat(...glyphUVTemplate));
-        glyphIndexArray.push(...[].concat(glyphIndexTemplate.map(i => i + index * glyphIndexMarch)));
-      }
-    }
-
-    const geometry = new THREE.BufferGeometry();
-    const glyphPositionFloat32Array = new Float32Array(glyphPositionArray);
-    const glyphBrightnessFloat32Array = new Float32Array(glyphBrightnessArray);
-    const glyphUVFloat32Array = new Float32Array(glyphUVArray);
-
-    const columns = Array(numColumns).fill().map((_, columnIndex) => {
-      const column = {
-        timeOffset: Math.random(),
-        speedOffset: Math.random(),
-        glyphs: Array(numRows).fill().map((_, index) => ({
-          cycle: Math.random(),
-          symbol: 0,
-          brightness: 0,
-        })),
-        brightnessArray: glyphBrightnessFloat32Array.subarray(numRows * (columnIndex) * glyphBrightnessMarch * verticesPerGlyph, numRows * (columnIndex + 1) * glyphBrightnessMarch * verticesPerGlyph),
-        uvArray: glyphUVFloat32Array.subarray(numRows * (columnIndex) * glyphUVMarch * verticesPerGlyph, numRows * (columnIndex + 1) * glyphUVMarch * verticesPerGlyph),
-      };
-      return column;
+    const {geometry, update} = makeMatrixGeometry({
+      numRows, numColumns,
+      animationSpeed, fallSpeed, cycleSpeed,
+      a, b, c,
+      glyphSequenceLength,
     });
 
-    geometry.addAttribute('position', new THREE.BufferAttribute(glyphPositionFloat32Array, glyphPositionMarch));
-    geometry.addAttribute('brightness', new THREE.BufferAttribute(glyphBrightnessFloat32Array, glyphBrightnessMarch));
-    geometry.addAttribute('uv', new THREE.BufferAttribute(glyphUVFloat32Array, glyphUVMarch));
-    geometry.setIndex(glyphIndexArray);
-
     // const stupidMaterial = new THREE.MeshBasicMaterial( { map: texture, flatShading: false, transparent:false } );
 
     const mesh = new THREE.Mesh( geometry, material );
@@ -175,78 +120,6 @@
     window.addEventListener("orientationchange", windowResize, false);
     windowResize();
 
-    const flattenedUVTemplate = [].concat(...glyphUVTemplate);
-    const uvScrap = [];
-    let last = NaN;
-
-    const SQRT_2 = Math.sqrt(2);
-    const SQRT_5 = Math.sqrt(5);
-
-    const minimumPostProcessingFrameTime = 1;
-
-    const quadInOut = x => x < 0.5 ? 2 * x * x : (1 - 2 * (x * x - 2 * x + 1));
-
-    const a = parseFloat(getParam("a", 1.125));
-    const b = parseFloat(getParam("b", 1.125));
-    const c = parseFloat(getParam("c", 1.25));
-
-    const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
-
-    const fract = x => x < 0 ? (1 - (-x % 1)) : (x % 1);
-
-    let [min, max] = [Infinity, -Infinity];
-
-    const update = now => {
-      if (now - last > 50) {
-        last = now;
-        return;
-      }
-
-      const delta = ((isNaN(last) || now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
-      last = now;
-
-      bloomPass.enabled = delta < minimumPostProcessingFrameTime;
-      filmGrainPass.enabled = delta < minimumPostProcessingFrameTime;
-
-      composer.passes.filter(pass => !pass.enabled).renderToScreen = false;
-      composer.passes.filter(pass => pass.enabled).pop().renderToScreen = true;
-
-      const simTime = now * animationSpeed * fallSpeed * 0.0005;
-
-      for (const column of columns) {
-
-        const columnTime = (column.timeOffset * 1000 + simTime) * (0.5 + column.speedOffset * 0.5) + (Math.sin(simTime * 2 * column.speedOffset) * 0.2);
-
-        for (let rowIndex = 0; rowIndex < column.glyphs.length; rowIndex++) {
-          const glyph = column.glyphs[rowIndex];
-          const glyphTime = rowIndex * 0.01 + columnTime;
-          const value = 1 - fract((glyphTime + 0.3 * Math.sin(SQRT_2 * glyphTime) + 0.2 * Math.sin(SQRT_5 * glyphTime)));
-
-          const computedBrightness = a + b * Math.log(c * (value - 0.5));
-          const newBrightness = isNaN(computedBrightness) ? 0 : Math.min(1, Math.max(0, computedBrightness));
-          glyph.brightness = glyph.brightness * (1 - brightnessChangeBias) + newBrightness * brightnessChangeBias;
-
-          column.brightnessArray.set(glyphBrightnessTemplate.map(() => glyph.brightness), rowIndex * verticesPerGlyph * glyphBrightnessMarch);
-
-          const glyphCycleSpeed = delta * cycleSpeed * 0.2 * Math.pow(1 - glyph.brightness, 4);
-          glyph.cycle = fract(glyph.cycle + glyphCycleSpeed);
-          const symbol = Math.floor(glyphSequenceLength * glyph.cycle);
-          if (glyph.symbol != symbol) {
-            glyph.symbol = symbol;
-            const symbolX = (symbol % 8) / 8;
-            const symbolY = (7 - (symbol - symbolX * 8) / 8) / 8;
-            for (let i = 0; i < 4; i++) {
-              uvScrap[i * 2 + 0] = flattenedUVTemplate[i * 2 + 0] + symbolX;
-              uvScrap[i * 2 + 1] = flattenedUVTemplate[i * 2 + 1] + symbolY;
-            }
-            column.uvArray.set(uvScrap, rowIndex * verticesPerGlyph * glyphUVMarch);
-          }
-        }
-      }
-      geometry.attributes.uv.needsUpdate = true;
-      geometry.attributes.brightness.needsUpdate = true;
-    };
-
     const render = () => {
       requestAnimationFrame(render);
       const now = Date.now();
diff --git a/js/MatrixGeometry.js b/js/MatrixGeometry.js
new file mode 100644
index 0000000..8c5e421
--- /dev/null
+++ b/js/MatrixGeometry.js
@@ -0,0 +1,135 @@
+const makeMatrixGeometry = ({
+      numRows, numColumns,
+      animationSpeed, fallSpeed, cycleSpeed,
+      a, b, c,
+      glyphSequenceLength,
+    }) => {
+
+    const fTexU = 1 / 8;
+    const fTexV = 1 / 8;
+    const verticesPerGlyph = 4;
+
+    const glyphPositionTemplate = [[0, 1, 0, 1], [1, 1, 0, 1], [0, 0, 0, 1], [1, 0, 0, 1],];
+    const glyphBrightnessTemplate = [0, 0, 0, 0,];
+    const glyphUVTemplate = [[0, fTexV], [fTexU, fTexV], [0, 0], [fTexU, 0],];
+    const glyphIndexTemplate = [0, 2, 1, 2, 3, 1,];
+
+    const glyphPositionMarch = 4;
+    const glyphBrightnessMarch = 1;
+    const glyphUVMarch = 2;
+    const glyphIndexMarch = 4;
+
+    const glyphPositionArray = [];
+    const glyphBrightnessArray = [];
+    const glyphUVArray = [];
+    const glyphIndexArray = [];
+
+    const fRow = 1 / numRows;
+    const fColumn = 1 / numColumns;
+
+    for (let column = 0; column < numColumns; column++) {
+      for (let row = 0; row < numRows; row++) {
+        const index = row + column * numRows;
+        glyphPositionArray.push(...[].concat(...glyphPositionTemplate.map(([x, y, z, w]) => [
+          (x + column) / numColumns - 0.5,
+          (y + row) / numRows - 0.5,
+          z,
+          w,
+        ])));
+        glyphBrightnessArray.push(...glyphBrightnessTemplate);
+        glyphUVArray.push(...[].concat(...glyphUVTemplate));
+        glyphIndexArray.push(...[].concat(glyphIndexTemplate.map(i => i + index * glyphIndexMarch)));
+      }
+    }
+
+    const geometry = new THREE.BufferGeometry();
+    const glyphPositionFloat32Array = new Float32Array(glyphPositionArray);
+    const glyphBrightnessFloat32Array = new Float32Array(glyphBrightnessArray);
+    const glyphUVFloat32Array = new Float32Array(glyphUVArray);
+
+    const columns = Array(numColumns).fill().map((_, columnIndex) => {
+      const column = {
+        timeOffset: Math.random(),
+        speedOffset: Math.random(),
+        glyphs: Array(numRows).fill().map((_, index) => ({
+          cycle: Math.random(),
+          symbol: 0,
+          brightness: 0,
+        })),
+        brightnessArray: glyphBrightnessFloat32Array.subarray(numRows * (columnIndex) * glyphBrightnessMarch * verticesPerGlyph, numRows * (columnIndex + 1) * glyphBrightnessMarch * verticesPerGlyph),
+        uvArray: glyphUVFloat32Array.subarray(numRows * (columnIndex) * glyphUVMarch * verticesPerGlyph, numRows * (columnIndex + 1) * glyphUVMarch * verticesPerGlyph),
+      };
+      return column;
+    });
+
+    geometry.addAttribute('position', new THREE.BufferAttribute(glyphPositionFloat32Array, glyphPositionMarch));
+    geometry.addAttribute('brightness', new THREE.BufferAttribute(glyphBrightnessFloat32Array, glyphBrightnessMarch));
+    geometry.addAttribute('uv', new THREE.BufferAttribute(glyphUVFloat32Array, glyphUVMarch));
+    geometry.setIndex(glyphIndexArray);
+
+    const flattenedUVTemplate = [].concat(...glyphUVTemplate);
+    const uvScrap = [];
+    let last = NaN;
+
+    const SQRT_2 = Math.sqrt(2);
+    const SQRT_5 = Math.sqrt(5);
+
+    const minimumPostProcessingFrameTime = 1;
+
+    const brightnessChangeBias = animationSpeed == 0 ? 1 : Math.min(1, Math.abs(animationSpeed));
+
+    const fract = x => x < 0 ? (1 - (-x % 1)) : (x % 1);
+
+    const update = now => {
+      if (now - last > 50) {
+        last = now;
+        return;
+      }
+
+      const delta = ((isNaN(last) || now - last > 1000) ? 0 : now - last) / 1000 * animationSpeed;
+      last = now;
+
+      bloomPass.enabled = delta < minimumPostProcessingFrameTime;
+      filmGrainPass.enabled = delta < minimumPostProcessingFrameTime;
+
+      composer.passes.filter(pass => !pass.enabled).renderToScreen = false;
+      composer.passes.filter(pass => pass.enabled).pop().renderToScreen = true;
+
+      const simTime = now * animationSpeed * fallSpeed * 0.0005;
+
+      for (const column of columns) {
+
+        const columnTime = (column.timeOffset * 1000 + simTime) * (0.5 + column.speedOffset * 0.5) + (Math.sin(simTime * 2 * column.speedOffset) * 0.2);
+
+        for (let rowIndex = 0; rowIndex < column.glyphs.length; rowIndex++) {
+          const glyph = column.glyphs[rowIndex];
+          const glyphTime = rowIndex * 0.01 + columnTime;
+          const value = 1 - fract((glyphTime + 0.3 * Math.sin(SQRT_2 * glyphTime) + 0.2 * Math.sin(SQRT_5 * glyphTime)));
+
+          const computedBrightness = a + b * Math.log(c * (value - 0.5));
+          const newBrightness = isNaN(computedBrightness) ? 0 : Math.min(1, Math.max(0, computedBrightness));
+          glyph.brightness = glyph.brightness * (1 - brightnessChangeBias) + newBrightness * brightnessChangeBias;
+
+          column.brightnessArray.set(glyphBrightnessTemplate.map(() => glyph.brightness), rowIndex * verticesPerGlyph * glyphBrightnessMarch);
+
+          const glyphCycleSpeed = delta * cycleSpeed * 0.2 * Math.pow(1 - glyph.brightness, 4);
+          glyph.cycle = fract(glyph.cycle + glyphCycleSpeed);
+          const symbol = Math.floor(glyphSequenceLength * glyph.cycle);
+          if (glyph.symbol != symbol) {
+            glyph.symbol = symbol;
+            const symbolX = (symbol % 8) / 8;
+            const symbolY = (7 - (symbol - symbolX * 8) / 8) / 8;
+            for (let i = 0; i < 4; i++) {
+              uvScrap[i * 2 + 0] = flattenedUVTemplate[i * 2 + 0] + symbolX;
+              uvScrap[i * 2 + 1] = flattenedUVTemplate[i * 2 + 1] + symbolY;
+            }
+            column.uvArray.set(uvScrap, rowIndex * verticesPerGlyph * glyphUVMarch);
+          }
+        }
+      }
+      geometry.attributes.uv.needsUpdate = true;
+      geometry.attributes.brightness.needsUpdate = true;
+    };
+
+  return {geometry, update};
+}