Add butterfly anaglyph (#3)

Author: Matt Henderson

public/images/butterfly-text.png

@@ -0,0 +1,70 @@
+// @ts-ignore
+import { GlslPipeline } from 'glsl-pipeline';
+import { RepeatWrapping, TextureLoader, WebGLRenderer } from 'three';
+
+import { Animation, DrawArgs, DrawFn, MakeDrawFn, Parameter } from 'lib/Animation';
+import Utils from 'lib/utils';
+
+import shader from './shaders/anaglyph.glsl';
+
+const Anaglyph = () => {
+    const duration = 6;
+    const canvasWidth = 768;
+    const canvasHeight = 768;
+
+    const parameters: Parameter[] = [
+        {
+            name: 'redness',
+            minValue: 0,
+            maxValue: 1,
+            defaultValue: 0,
+            compute: Utils.makeTransitionFunction([
+                {
+                    easing: 'smoothstep',
+                    startT: 0.5,
+                    endT: duration - 0.5,
+                    startValue: 0,
+                    endValue: 1,
+                },
+            ]),
+        },
+    ];
+
+    const makeDrawFn: MakeDrawFn = (canvas) => {
+        const texLoader = new TextureLoader();
+        let u_tex0 = texLoader.load('/animations/images/butterfly-text.png', () => {
+            drawFn({ t: 0, redness: 0 });
+        });
+        u_tex0.generateMipmaps = false;
+        u_tex0.wrapS = RepeatWrapping;
+        u_tex0.wrapT = RepeatWrapping;
+        const renderer = new WebGLRenderer({
+            canvas,
+        });
+        let pipeline = new GlslPipeline(renderer, { u_redness: { value: 0 }, u_tex0: { type: 't', value: u_tex0 } });
+        pipeline.load(shader);
+        Utils.resetGlslPipeline(pipeline);
+
+        const drawFn: DrawFn = ({ t, redness }: DrawArgs) => {
+            if (t == 0) {
+                Utils.resetGlslPipeline(pipeline);
+            }
+            pipeline.uniforms.u_redness.value = redness;
+            pipeline.renderMain();
+        };
+
+        return drawFn;
+    };
+
+    return (
+        <Animation
+            duration={duration}
+            initialCanvasWidth={canvasWidth}
+            initialCanvasHeight={canvasHeight}
+            makeDrawFn={makeDrawFn}
+            parameters={parameters}
+        />
+    );
+};
+
+export default Anaglyph;

src/animations/anaglyph.tsx

@@ -0,0 +1,77 @@
+uniform vec2 u_resolution;
+uniform float u_redness;
+uniform sampler2D u_tex0;
+
+mat2 rotationMatrix(float angle) {
+    float sine = sin(angle), cosine = cos(angle);
+    return mat2(cosine, -sine, sine, cosine);
+}
+
+vec3 hash32(vec2 p) {
+    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));
+    p3 += dot(p3, p3.yxz + 33.33);
+    return fract((p3.xxy + p3.yzz) * p3.zyx);
+}
+
+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 dist(vec2 uv) {
+    uv -= 0.5;
+    uv *= rotationMatrix(0.3);
+    uv *= 2.;
+    uv += vec2(0.2, 0.3);
+    uv.x = max(uv.x, -uv.x);
+    vec2 p = uv * 20.0;
+    float r = length(p);
+    float t = atan(p.y, p.x);
+    float butterfly = 7. - 0.5 * sin(1. * t) + 2.5 * sin(3. * t) + 2.0 * sin(5. * t) - 1.7 * sin(7. * t) + 3.0 * cos(2. * t) - 2.0 * cos(4. * t) - 0.4 * cos(16. * t) - r;
+    return butterfly;
+}
+
+void main() {
+    vec2 pixel = 1.0 / u_resolution.xy;
+
+    vec2 uv = gl_FragCoord.xy * pixel;
+
+    float res = 100.0;
+
+    // butterfly text texture is 42 by 7
+    int y = int(floor(uv.y * res)) % 7;
+    float rowIndex = floor(uv.y * res / 7.0);
+    int x = int(floor(uv.x * res) + 20. * sin(rowIndex * 2.) + 100.0) % 42;
+
+    float butterflyText = texelFetch(u_tex0, ivec2(x, y), 0).r;
+
+    vec2 uvI = floor(uv * res) / res;
+
+    float message = 0.;
+
+    // Add the text
+    message = mix(message, 0.9, smoothstep(0., pixel.x, 1. - butterflyText));
+
+    // Add outside of butterfly
+    message = mix(message, 0.7, smoothstep(0., pixel.x, dist(uvI)));
+
+    // Subtract inside of butterfly
+    message = mix(0.1, message, smoothstep(0., pixel.x, 2. - dist(uvI)));
+
+    // Add noise
+    message = mix(message, 0.8, smoothstep(0.0, 1.5, hash12(uvI * u_resolution.xy)));
+
+    message = 1. - 0.6 * message;
+
+    // Start as noise
+    vec3 color = hash32(uvI * u_resolution.xy);
+    // combine random color with the message.
+    color.r = mix(clamp(color.r, 0.7, 1.0), 0.2 * color.r, message);
+    color = mix(color, vec3(1.0, 0, 0) * color, u_redness);
+    color.g *= 0.5;  // Reduce green.
+
+    // color = vec3(message);
+    gl_FragColor = vec4(color, 1.0);
+
+}

src/animations/shaders/anaglyph.glsl

@@ -10,6 +10,7 @@ import { Link, RouterProvider, createHashRouter } from 'react-router-dom';
 import Hypocycloids from './animations/hypocycloids';
 import './index.css';
 import './index.css';
+import Anaglyph from 'animations/anaglyph';
 
 const animations = [
     {
@@ -24,6 +25,10 @@ const animations = [
         name: 'noiseDodecahedron',
         component: NoiseDodecahedron,
     },
+    {
+        name: 'anaglyph',
+        component: Anaglyph,
+    },
     {
         name: 'minimal2d',
         component: Minimal2D,