more math

html/001-platform-provenance.js

@@ -26,17 +26,38 @@ const shader = new Shader(app)
   .attach(
     gl.FRAGMENT_SHADER,
     `
-      uniform lowp float uTime;
-      uniform lowp float uSinTime;
-      uniform lowp float uCosTime;
+      precision highp float;
+
+      uniform float uTime;
+      uniform float uSinTime;
+      uniform float uCosTime;
 
       varying highp vec2 vTextureCoord;
 
+      vec3 rgb2hsv(vec3 c) {
+        vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+        vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+        vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+
+        float d = q.x - min(q.w, q.y);
+        float e = 1.0e-10;
+        return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+      }
+
+      vec3 hsv2rgb(vec3 c) {
+        vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+        vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+        return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+      }
+
       void main() {
-        lowp float slowedSinTime = sin(uTime*0.001)*0.5+0.5;
-        lowp float slowedCosTime = cos(uTime*0.005)*0.5+0.5;
-        
-        gl_FragColor = vec4(vTextureCoord.x * 0.5 - slowedSinTime, vTextureCoord.y, vTextureCoord.y * 0.5 + slowedSinTime, 1.0);
+        vec3 hsv = rgb2hsv(vec3(vTextureCoord, 1.0));
+        hsv.x += uTime * 0.0001;
+        hsv.y = vTextureCoord.x;
+        hsv.z = vTextureCoord.y;
+        vec3 rgb = hsv2rgb(hsv);
+
+        gl_FragColor = vec4(rgb, 1.0);
         gl_FragColor = clamp(gl_FragColor, 0.0, 1.0);
       }
     `

html/lib/shader.js

@@ -12,12 +12,12 @@ export class Shader {
     this.gl.shaderSource(shader, source);
     this.gl.compileShader(shader);
 
-    // if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-    //   throw new Error(
-    //     "An error occurred compiling the shaders: " +
-    //       this.gl.getShaderInfoLog(shader)
-    //   );
-    // }
+    if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
+      throw new Error(
+        "An error occurred compiling the shaders: " +
+          this.gl.getShaderInfoLog(shader)
+      );
+    }
 
     this.gl.attachShader(this.program, shader);
 

html/work.css

@@ -2,8 +2,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     color: white;
     font: monospace;