add noise dodec animation (#2)

Author: Matt Henderson

.devcontainer/devcontainer.json

@@ -6,7 +6,8 @@
 	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
 	// Features to add to the dev container. More info: https://containers.dev/features.
 	"features": {
-		"ghcr.io/devcontainers-contrib/features/pnpm:2": {}
+		"ghcr.io/devcontainers-contrib/features/pnpm:2": {},
+		"ghcr.io/devcontainers-contrib/features/tmux-apt-get": {}
 	},
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	"forwardPorts": [

.vscode/settings.json

@@ -5,5 +5,5 @@
         "typescript",
         "typescriptreact",
     ],
-    "webgl-glsl-editor.format.placeSpaceAfterKeywords": true
+    "webgl-glsl-editor.format.placeSpaceAfterKeywords": true,
 }

src/animations/noiseDodecahedron.tsx

@@ -0,0 +1,94 @@
+// @ts-ignore
+import { GlslPipeline } from 'glsl-pipeline';
+import { WebGLRenderer } from 'three';
+
+import { Animation, DrawArgs, DrawFn, MakeDrawFn, Parameter } from 'lib/Animation';
+import Utils from 'lib/utils';
+
+import shader from './shaders/noiseDodecahedron.glsl';
+
+const NoiseDodecahedron = () => {
+    const duration = 20;
+    
+    const canvasWidth = 768;
+    const canvasHeight = 768;
+
+    const parameters: Parameter[] = [
+        {
+            name: 'theta_1',
+            minValue: 0,
+            maxValue: 2 * Math.PI,
+            defaultValue: 0,
+            compute: Utils.makeTransitionFunction([
+                {
+                    easing: 'linear',
+                    startT: 0,
+                    endT: 20,
+                    startValue: 0.0,
+                    endValue: 0.1,
+                },
+            ]),
+        },
+        {
+            name: 'theta_2',
+            minValue: 0,
+            maxValue: 2 * Math.PI,
+            defaultValue: 0,
+            compute: Utils.makeTransitionFunction([
+                {
+                    easing: 'linear',
+                    startT: 0,
+                    endT: 20,
+                    startValue: 1.0,
+                    endValue: 3.0,
+                },
+            ]),
+        },
+    ];
+
+    const makeDrawFn: MakeDrawFn = (canvas) => {
+        const renderer = new WebGLRenderer({
+            canvas,
+        });
+        let pipeline = new GlslPipeline(renderer, {
+            u_t: { value: 0 },
+            u_theta_1: { value: 0 },
+            u_theta_2: { value: 0 },
+            u_update: { value: 0 },
+        });
+        pipeline.load(shader);
+        pipeline.renderMain();
+        let lastUpdate = -1;
+
+        const drawFn: DrawFn = ({ t, theta_1, theta_2 }: DrawArgs) => {
+            if (t == 0) {
+                Utils.resetGlslPipeline(pipeline);
+                lastUpdate = -1;
+            }
+            pipeline.uniforms.u_t.value = t;
+            pipeline.uniforms.u_theta_1.value = theta_1;
+            pipeline.uniforms.u_theta_2.value = theta_2;
+            let update: number = 0;
+            if (t - lastUpdate > 0.04) {
+                update = 1;
+                lastUpdate = t;
+            }
+            pipeline.uniforms.u_update.value = update;
+            pipeline.renderMain();
+        };
+
+        return drawFn;
+    };
+
+    return (
+        <Animation
+            duration={duration}
+            initialCanvasWidth={canvasWidth}
+            initialCanvasHeight={canvasHeight}
+            makeDrawFn={makeDrawFn}
+            parameters={parameters}
+        />
+    );
+};
+
+export default NoiseDodecahedron;

src/animations/shaders/noiseDodecahedron.glsl

@@ -0,0 +1,76 @@
+uniform vec2 u_resolution;
+uniform float u_t;
+uniform float u_theta_1;
+uniform float u_theta_2;
+uniform float u_update;
+uniform sampler2D u_doubleBuffer0;
+
+// Tells GlslPipeline that we are using the double buffer:
+#ifdef DOUBLE_BUFFER_0
+#endif
+
+#define res 128.0
+#define rate 2
+#define TWOPI 6.28318530718
+
+vec3 vertices[20] = vec3[](vec3(0, 0, 1), vec3(.58, .33, .75), vec3(0, -.67, .75), vec3(-.58, .33, .75), vec3(.36, .87, .33), vec3(.93, -.13, .33), vec3(.58, -.75, .33), vec3(-.58, -.75, .33), vec3(-.93, -.13, .33), vec3(-.36, .87, .33), vec3(.58, .75, -.33), vec3(.93, .13, -.33), vec3(.36, -.87, -.33), vec3(-.36, -.87, -.33), vec3(-.93, .13, -.33), vec3(-.58, .75, -.33), vec3(0, .67, -.75), vec3(.58, -.33, -.75), vec3(-.58, -.33, -.75), vec3(0, 0, -1));
+
+int seg[] = int[](0, 2, 6, 5, 1  // 3 bottom
+, 0, 3, 8, 7, 2, 0, 1, 4, 9, 3, 2, 7, 13, 12, 6  // 6 crown
+, 8, 14, 18, 13, 7, 6, 12, 17, 11, 5, 3, 9, 15, 14, 8, 1, 5, 11, 10, 4, 4, 10, 16, 15, 9, 19, 18, 14, 15, 16  // 3 top
+, 19, 17, 12, 13, 18, 19, 16, 10, 11, 17);
+
+float hash12(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * .1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+float sdSegment(in vec2 p, in vec2 a, in vec2 b) {
+    vec2 pa = p - a, ba = b - a;
+    float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return length(pa - ba * h);
+}
+
+#define rot(a) mat2(cos(a+vec4(0,33,11,0)))
+
+vec3 T(vec3 p) {
+    p.yz *= rot(TWOPI * u_theta_1 + 0.21);
+    p.zx *= rot(TWOPI * u_theta_2 + 0.77);
+    return p;
+}
+
+void main() {
+    // out vec4 fragColor, in vec2 fragCoord
+
+    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+    vec2 uvI = floor(uv * res) / res;
+
+    vec3 col = texture(u_doubleBuffer0, uv).rgb;
+
+    if (u_t < 0.1) {
+        col = vec3(step(0.5, hash12(u_resolution.xy * uvI)));
+    }
+
+    vec3 _P, P, P0;
+    float dodecCol = 0.;
+    uvI -= 0.5;
+    uvI *= 2.;
+    for (int i; i <= seg.length(); i++) {
+        _P = P;
+        P = T(vertices[seg[i % 60]]);
+        // P *= exp(iFloat2);
+        P /= P.z - 1.7;
+        if (i > 0) {
+            dodecCol += .5 * smoothstep(0.01, 0., sdSegment(uvI, _P.xy, (i % 5 > 0 ? P : P0).xy) - 0.0001);
+        }
+        if (i % 5 < 1) {
+            P0 = P;
+        }
+    }
+    dodecCol = step(0.5, dodecCol);
+
+    col = mix(col, 1. - col, dodecCol * u_update);
+
+    gl_FragColor = vec4(step(0.5, col), 1.0);
+}

src/index.tsx

@@ -1,5 +1,6 @@
 import Minimal2D from 'animations/minimal2D';
 import MinimalShader from 'animations/minimalShader';
+import NoiseDodecahedron from 'animations/noiseDodecahedron';
 import PiArcs from 'animations/piArcs';
 import React, { ReactNode } from 'react';
 import ReactDOM from 'react-dom/client';
@@ -15,11 +16,14 @@ const animations = [
         name: 'hypocycloids',
         component: Hypocycloids,
     },
-
     {
         name: 'piArcs',
         component: PiArcs,
     },
+    {
+        name: 'noiseDodecahedron',
+        component: NoiseDodecahedron,
+    },
     {
         name: 'minimal2d',
         component: Minimal2D,