From 1f69d592498bb49fc64bc4afd46d0388de02cf82 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Thu, 27 Dec 2018 02:39:04 -0800
Subject: [PATCH] Breaking temporality in the color map pass graininess. Adding
 a more finely tuned color map for 1999

---
 index.html         | 26 ++++++++++++++++++++++----
 js/ColorMapPass.js | 14 +++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index e3b34a3..6f1dd1d 100644
--- a/index.html
+++ b/index.html
@@ -80,10 +80,28 @@
           threshold: 0.3
         },
         palette: [
-          {color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
-          {color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4},
-          {color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8},
-          {color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0},
+          // {color: new THREE.Vector3(0.00, 0.00, 0.00), at: 0.0},
+          // {color: new THREE.Vector3(0.05, 0.52, 0.17), at: 0.4},
+          // {color: new THREE.Vector3(0.12, 0.82, 0.37), at: 0.8},
+          // {color: new THREE.Vector3(0.29, 1.00, 0.64), at: 1.0},
+
+          {color: new THREE.Vector3(  0/255,   0/255,   0/255), at: Math.pow( 0/16, 1.5)},
+          {color: new THREE.Vector3(  6/255,  16/255,   8/255), at: Math.pow( 1/16, 1.5)},
+          {color: new THREE.Vector3( 11/255,  28/255,  15/255), at: Math.pow( 2/16, 1.5)},
+          {color: new THREE.Vector3( 17/255,  41/255,  23/255), at: Math.pow( 3/16, 1.5)},
+          {color: new THREE.Vector3( 20/255,  58/255,  31/255), at: Math.pow( 4/16, 1.5)},
+          {color: new THREE.Vector3( 23/255,  84/255,  39/255), at: Math.pow( 5/16, 1.5)},
+          {color: new THREE.Vector3( 30/255, 113/255,  48/255), at: Math.pow( 6/16, 1.5)},
+          {color: new THREE.Vector3( 43/255, 142/255,  60/255), at: Math.pow( 7/16, 1.5)},
+          {color: new THREE.Vector3( 57/255, 160/255,  72/255), at: Math.pow( 8/16, 1.5)},
+          {color: new THREE.Vector3( 70/255, 175/255,  81/255), at: Math.pow( 9/16, 1.5)},
+          {color: new THREE.Vector3( 75/255, 187/255,  85/255), at: Math.pow(10/16, 1.5)},
+          {color: new THREE.Vector3( 78/255, 196/255,  91/255), at: Math.pow(11/16, 1.5)},
+          {color: new THREE.Vector3( 83/255, 203/255, 102/255), at: Math.pow(12/16, 1.5)},
+          {color: new THREE.Vector3( 92/255, 212/255, 114/255), at: Math.pow(13/16, 1.5)},
+          {color: new THREE.Vector3(109/255, 223/255, 130/255), at: Math.pow(14/16, 1.5)},
+          {color: new THREE.Vector3(129/255, 232/255, 148/255), at: Math.pow(15/16, 1.5)},
+          {color: new THREE.Vector3(140/255, 235/255, 157/255), at: Math.pow(16/16, 1.5)},
         ],
         fallSpeed: 1,
         cycleSpeed: 1,
diff --git a/js/ColorMapPass.js b/js/ColorMapPass.js
index cfe3096..c4ddd5e 100644
--- a/js/ColorMapPass.js
+++ b/js/ColorMapPass.js
@@ -13,7 +13,7 @@ const easeInOutQuad = input => {
 
 const ARRAY_SIZE = 2048;
 
-THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
+THREE.ColorMapPass = function (entries, ditherMagnitude = 1, graininess = 100) {
   const colors = Array(ARRAY_SIZE).fill().map(_ => new THREE.Vector3(0, 0, 0));
   const sortedEntries = entries.slice().sort((e1, e2) => e1.at - e2.at).map(entry => ({
     color: entry.color,
@@ -42,12 +42,14 @@ THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
     THREE.UVMapping);
   this.dataTexture.magFilter = THREE.LinearFilter;
   this.dataTexture.needsUpdate = true;
+  this.graininess = graininess;
 
   this.shader = {
     uniforms: {
       tDiffuse: { value: null },
       tColorData: { value: this.dataTexture },
-      ditherMagnitude: { value: ditherMagnitude }
+      ditherMagnitude: { value: ditherMagnitude },
+      tTime: { value: 0 }
     },
 
     vertexShader: `
@@ -64,16 +66,17 @@ THREE.ColorMapPass = function (entries, ditherMagnitude = 1) {
       uniform sampler2D tDiffuse;
       uniform sampler2D tColorData;
       uniform float ditherMagnitude;
+      uniform float tTime;
       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() {
-        gl_FragColor = texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r - rand( gl_FragCoord.xy ) * ditherMagnitude, 0.0 ) );
+        gl_FragColor = texture2D( tColorData, vec2( texture2D( tDiffuse, vUv ).r - rand( gl_FragCoord.xy, tTime ) * ditherMagnitude, 0.0 ) );
       }
     `
   };
@@ -85,6 +88,7 @@ THREE.ColorMapPass.prototype = Object.assign( Object.create( THREE.Pass.prototyp
   constructor: THREE.ColorMapPass,
   render: function() {
     this.uniforms[ "tColorData" ].value = this.dataTexture;
+    this.uniforms[ "tTime" ].value = (Date.now() % this.graininess) / this.graininess;
     THREE.ShaderPass.prototype.render.call(this, ...arguments);
   }
 });