js/patterns.js

/**

 * 🌿 Ivy's GPU Art Studio

 * Tab 4: Generative Patterns

 *

 * Procedural pattern generation using fragment shaders

 * Perlin noise, Voronoi, waves, plasma, kaleidoscope, and more!

 */

class PatternsRenderer {
    constructor() {
        this.device = null;
        this.context = null;
        this.format = null;

        // Pattern parameters
        this.params = {
            type: 0, // 0=ivy (matches HTML select order), 1-9 other patterns
            palette: 0, // 0-8 palettes
            scale: 1.0,
            speed: 1.0,
            complexity: 5,
            intensity: 1.0,
            animate: true,
            mouseReact: false
        };

        this.input = null;
        this.animationLoop = null;
        this.isActive = false;
        this.time = 0;
    }

    async init(device, context, format, canvas) {
        this.device = device;
        this.context = context;
        this.format = format;
        this.canvas = canvas;

        // Create shader
        const shaderModule = device.createShaderModule({
            label: "Patterns Shader",
            code: this.getShaderCode()
        });

        // Create uniform buffer - increased size for new params
        this.uniformBuffer = device.createBuffer({
            label: "Patterns Uniforms",
            size: 80,
            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
        });

        // Create bind group layout
        const bindGroupLayout = device.createBindGroupLayout({
            entries: [
                {
                    binding: 0,
                    visibility: GPUShaderStage.FRAGMENT,
                    buffer: { type: "uniform" }
                }
            ]
        });

        // Create pipeline
        this.pipeline = device.createRenderPipeline({
            label: "Patterns Pipeline",
            layout: device.createPipelineLayout({
                bindGroupLayouts: [bindGroupLayout]
            }),
            vertex: {
                module: shaderModule,
                entryPoint: "vertexMain"
            },
            fragment: {
                module: shaderModule,
                entryPoint: "fragmentMain",
                targets: [{ format }]
            },
            primitive: {
                topology: "triangle-list"
            }
        });

        // Create bind group
        this.bindGroup = device.createBindGroup({
            layout: bindGroupLayout,
            entries: [
                {
                    binding: 0,
                    resource: { buffer: this.uniformBuffer }
                }
            ]
        });

        // Setup input
        this.input = new WebGPUUtils.InputHandler(canvas);

        // Create animation loop
        this.animationLoop = new WebGPUUtils.AnimationLoop((dt, time) => {
            // Only advance time if animation is enabled
            if (this.params.animate) {
                this.time += dt * this.params.speed;
            }
            this.render();
        });
    }

    start() {
        this.isActive = true;
        this.animationLoop.start();
    }

    stop() {
        this.isActive = false;
        this.animationLoop.stop();
    }

    reset() {
        this.time = 0;
    }

    setType(type) {
        const types = {
            ivy: 0, // First in HTML select = index 0
            noise: 1,
            voronoi: 2,
            waves: 3,
            plasma: 4,
            kaleidoscope: 5,
            hexagons: 6,
            spiral: 7,
            reaction: 8,
            circuits: 9,
            glitch: 10, // NEW: Glitch terrain mountains
            aurora: 11 // NEW: Aurora borealis
        };
        this.params.type = types[type] ?? 0; // Default to ivy
    }

    setPalette(palette) {
        const palettes = {
            ivy: 0,
            rainbow: 1,
            fire: 2,
            ocean: 3,
            neon: 4,
            sunset: 5,
            cosmic: 6,
            candy: 7,
            monochrome: 8
        };
        this.params.palette = palettes[palette] ?? 0;
    }

    setScale(scale) {
        this.params.scale = scale;
    }

    setSpeed(speed) {
        this.params.speed = speed;
    }

    setComplexity(complexity) {
        this.params.complexity = complexity;
    }

    setIntensity(intensity) {
        this.params.intensity = intensity;
    }

    setAnimate(animate) {
        this.params.animate = animate;
    }

    setMouseReact(react) {
        this.params.mouseReact = react;
    }

    updateUniforms() {
        const aspect = this.canvas.width / this.canvas.height;

        const data = new Float32Array([
            this.params.type, // 0
            this.params.palette, // 4
            this.params.scale, // 8
            this.params.complexity, // 12
            this.time, // 16
            aspect, // 20
            this.input.mouseX, // 24
            this.input.mouseY, // 28
            this.input.isPressed ? 1.0 : 0.0, // 32
            this.params.intensity, // 36
            this.params.animate ? 1.0 : 0.0, // 40
            this.params.mouseReact ? 1.0 : 0.0, // 44
            0.0,
            0.0,
            0.0,
            0.0 // padding
        ]);

        this.device.queue.writeBuffer(this.uniformBuffer, 0, data);
    }

    render() {
        if (!this.isActive) return;

        WebGPUUtils.resizeCanvasToDisplaySize(this.canvas, window.devicePixelRatio);
        this.updateUniforms();

        const commandEncoder = this.device.createCommandEncoder();
        const renderPass = commandEncoder.beginRenderPass({
            colorAttachments: [
                {
                    view: this.context.getCurrentTexture().createView(),
                    clearValue: { r: 0, g: 0, b: 0, a: 1 },
                    loadOp: "clear",
                    storeOp: "store"
                }
            ]
        });

        renderPass.setPipeline(this.pipeline);
        renderPass.setBindGroup(0, this.bindGroup);
        renderPass.draw(3);
        renderPass.end();

        this.device.queue.submit([commandEncoder.finish()]);
    }

    getShaderCode() {
        return /* wgsl */ `

            struct Uniforms {

                patternType: f32,

                palette: f32,

                scale: f32,

                complexity: f32,

                time: f32,

                aspect: f32,

                mouseX: f32,

                mouseY: f32,

                mousePressed: f32,

                intensity: f32,

                animate: f32,

                mouseReact: f32,

            }



            @group(0) @binding(0) var<uniform> u: Uniforms;



            struct VertexOutput {

                @builtin(position) position: vec4f,

                @location(0) uv: vec2f,

            }



            @vertex

            fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {

                var pos = array<vec2f, 3>(

                    vec2f(-1.0, -1.0),

                    vec2f(3.0, -1.0),

                    vec2f(-1.0, 3.0)

                );



                var output: VertexOutput;

                output.position = vec4f(pos[vertexIndex], 0.0, 1.0);

                output.uv = pos[vertexIndex] * 0.5 + 0.5;

                return output;

            }



            // ============================================

            // Color Palettes

            // ============================================

            fn getPaletteColor(t: f32, paletteId: i32) -> vec3f {

                let tt = fract(t);



                // Ivy Green

                if (paletteId == 0) {

                    return vec3f(0.1 + 0.2 * tt, 0.4 + 0.5 * tt, 0.15 + 0.2 * tt);

                }

                // Rainbow

                else if (paletteId == 1) {

                    return vec3f(

                        0.5 + 0.5 * cos(6.28318 * (tt + 0.0)),

                        0.5 + 0.5 * cos(6.28318 * (tt + 0.33)),

                        0.5 + 0.5 * cos(6.28318 * (tt + 0.67))

                    );

                }

                // Fire

                else if (paletteId == 2) {

                    return vec3f(min(1.0, tt * 2.0), tt * tt, tt * tt * tt);

                }

                // Ocean

                else if (paletteId == 3) {

                    return vec3f(0.0 + 0.2 * tt, 0.3 + 0.4 * tt, 0.5 + 0.5 * tt);

                }

                // Neon

                else if (paletteId == 4) {

                    return vec3f(

                        0.5 + 0.5 * sin(tt * 6.28),

                        0.5 + 0.5 * sin(tt * 6.28 + 2.094),

                        0.5 + 0.5 * sin(tt * 6.28 + 4.188)

                    );

                }

                // Sunset

                else if (paletteId == 5) {

                    return vec3f(0.9 - 0.3 * tt, 0.3 + 0.3 * tt, 0.4 + 0.4 * tt);

                }

                // Cosmic

                else if (paletteId == 6) {

                    return vec3f(

                        0.1 + 0.4 * sin(tt * 6.28),

                        0.05 + 0.2 * sin(tt * 6.28 + 2.0),

                        0.3 + 0.6 * sin(tt * 6.28 + 4.0)

                    );

                }

                // Candy

                else if (paletteId == 7) {

                    return vec3f(

                        0.8 + 0.2 * sin(tt * 12.56),

                        0.4 + 0.4 * sin(tt * 12.56 + 2.0),

                        0.7 + 0.3 * sin(tt * 12.56 + 4.0)

                    );

                }

                // Monochrome

                else {

                    return vec3f(tt, tt, tt);

                }

            }



            // ============================================

            // Noise Functions

            // ============================================



            fn hash21(p: vec2f) -> f32 {

                var p3 = fract(vec3f(p.x, p.y, p.x) * 0.1031);

                p3 += dot(p3, p3.yzx + 33.33);

                return fract((p3.x + p3.y) * p3.z);

            }



            fn hash22(p: vec2f) -> vec2f {

                let n = sin(dot(p, vec2f(41.0, 289.0)));

                return fract(vec2f(262144.0, 32768.0) * n) * 2.0 - 1.0;

            }



            fn noise(p: vec2f) -> f32 {

                let i = floor(p);

                let f = fract(p);

                let u = f * f * (3.0 - 2.0 * f);



                return mix(

                    mix(hash21(i + vec2f(0.0, 0.0)), hash21(i + vec2f(1.0, 0.0)), u.x),

                    mix(hash21(i + vec2f(0.0, 1.0)), hash21(i + vec2f(1.0, 1.0)), u.x),

                    u.y

                );

            }



            fn fbm(p: vec2f, octaves: i32) -> f32 {

                var value = 0.0;

                var amplitude = 0.5;

                var frequency = 1.0;

                var pos = p;



                for (var i = 0; i < octaves; i++) {

                    value += amplitude * noise(pos * frequency);

                    amplitude *= 0.5;

                    frequency *= 2.0;

                }



                return value;

            }



            // Voronoi

            fn voronoi(p: vec2f) -> vec3f {

                let n = floor(p);

                let f = fract(p);



                var minDist = 1.0;

                var minDist2 = 1.0;

                var cellId = vec2f(0.0);



                for (var j = -1; j <= 1; j++) {

                    for (var i = -1; i <= 1; i++) {

                        let g = vec2f(f32(i), f32(j));

                        let o = hash22(n + g) * 0.5 + 0.5;

                        let r = g + o - f;

                        let d = dot(r, r);



                        if (d < minDist) {

                            minDist2 = minDist;

                            minDist = d;

                            cellId = n + g;

                        } else if (d < minDist2) {

                            minDist2 = d;

                        }

                    }

                }



                return vec3f(sqrt(minDist), sqrt(minDist2) - sqrt(minDist), hash21(cellId));

            }



            // ============================================

            // Pattern Functions

            // ============================================



            fn perlinPattern(uv: vec2f, t: f32) -> f32 {

                let p = uv * u.scale * 5.0;

                let animT = select(0.0, t, u.animate > 0.5);

                return fbm(p + vec2f(animT * 0.2, animT * 0.15), i32(u.complexity));

            }



            fn voronoiPattern(uv: vec2f, t: f32) -> f32 {

                let animT = select(0.0, t, u.animate > 0.5);

                let p = uv * u.scale * 5.0 + vec2f(animT * 0.1, animT * 0.05);

                let v = voronoi(p);

                return v.z + v.y * 0.5;

            }



            fn wavesPattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * 2.0;

                p.x *= u.aspect;

                p *= u.scale;



                var value = 0.0;

                let octaves = i32(u.complexity);

                let animT = select(0.0, t, u.animate > 0.5);



                for (var i = 0; i < octaves; i++) {

                    let freq = f32(i + 1) * 3.0;

                    let phase = animT * (0.5 + f32(i) * 0.1);

                    value += sin(p.x * freq + phase) * cos(p.y * freq * 0.7 + phase * 0.8) / freq;

                }



                return value * 0.5 + 0.5;

            }



            fn plasmaPattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * 2.0;

                p.x *= u.aspect;

                p *= u.scale * 2.0;



                let animT = select(0.0, t, u.animate > 0.5);



                var v = 0.0;

                v += sin(p.x * 10.0 + animT);

                v += sin(10.0 * (p.x * sin(animT / 2.0) + p.y * cos(animT / 3.0)) + animT);

                v += sin(sqrt(100.0 * (p.x * p.x + p.y * p.y) + 1.0) + animT);



                let cx = p.x + 0.5 * sin(animT / 5.0);

                let cy = p.y + 0.5 * cos(animT / 3.0);

                v += sin(sqrt(100.0 * (cx * cx + cy * cy) + 1.0) + animT);



                return (v / 4.0) * 0.5 + 0.5;

            }



            fn kaleidoscopePattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * 2.0;

                p.x *= u.aspect;



                var r = length(p);

                var a = atan2(p.y, p.x);



                let segments = f32(i32(u.complexity) + 3);

                a = abs(((a / 3.14159 * 0.5 + 0.5) * segments) % 2.0 - 1.0) * 3.14159;



                p = vec2f(cos(a), sin(a)) * r;

                p *= u.scale * 2.0;



                let animT = select(0.0, t, u.animate > 0.5);

                p += vec2f(animT * 0.3, animT * 0.2);



                let n = fbm(p, 4);

                let fade = 1.0 - smoothstep(0.5, 1.0, r);



                return n * fade + r * 0.3;

            }



            fn ivyPattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * 2.0 * u.scale;

                p.x *= u.aspect;



                var value = 0.0;

                let animT = select(0.0, t, u.animate > 0.5);



                for (var vine = 0; vine < 5; vine++) {

                    let vf = f32(vine);

                    let vineOffset = vec2f(sin(vf * 1.5 + animT * 0.2) * 0.3, vf * 0.4 - 1.0);

                    var vp = p - vineOffset;



                    let curve = sin(vp.y * 3.0 + animT * 0.5 + vf) * 0.2;

                    vp.x -= curve;



                    let stemDist = abs(vp.x);

                    let stemGlow = exp(-stemDist * 30.0);

                    value += stemGlow * 0.3;



                    for (var leaf = 0; leaf < 6; leaf++) {

                        let lf = f32(leaf);

                        let leafY = vf * 0.4 - 1.0 + lf * 0.3;

                        let side = select(-1.0, 1.0, leaf % 2 == 0);



                        let leafCenter = vec2f(

                            vineOffset.x + sin(leafY * 3.0 + animT * 0.5 + vf) * 0.2 + side * 0.15,

                            leafY

                        );



                        var lp = p - leafCenter;

                        let leafDist = length(lp * vec2f(1.0, 1.5)) - 0.06;

                        let leafGlow = exp(-max(0.0, leafDist) * 40.0);

                        value += leafGlow * 0.5;

                    }

                }



                return clamp(value, 0.0, 1.0);

            }



            fn hexagonsPattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * u.scale * 10.0;

                p.x *= u.aspect;



                let animT = select(0.0, t, u.animate > 0.5);



                // Hexagonal grid

                let s = vec2f(1.0, 1.732);

                let a = (p / s) % 2.0 - 1.0;

                let b = ((p + s * 0.5) / s) % 2.0 - 1.0;



                let gv = select(a, b, dot(a, a) > dot(b, b));

                let hexDist = max(abs(gv.x), abs(gv.y * 0.866 + gv.x * 0.5));



                let pulse = sin(animT * 2.0 + length(p) * 0.5) * 0.5 + 0.5;



                return (1.0 - smoothstep(0.4, 0.5, hexDist)) * pulse;

            }



            fn spiralPattern(uv: vec2f, t: f32) -> f32 {

                var p = (uv - 0.5) * 2.0;

                p.x *= u.aspect;



                let r = length(p);

                let a = atan2(p.y, p.x);

                let animT = select(0.0, t, u.animate > 0.5);



                let spiral = sin(a * u.complexity + r * 10.0 * u.scale - animT * 3.0);

                let rings = sin(r * 20.0 - animT * 2.0);



                return (spiral * 0.5 + 0.5) * (1.0 - r * 0.5);

            }



            fn reactionPattern(uv: vec2f, t: f32) -> f32 {

                var p = uv * u.scale * 8.0;

                let animT = select(0.0, t, u.animate > 0.5);



                var a = fbm(p + vec2f(animT * 0.1, 0.0), i32(u.complexity));

                var b = fbm(p + vec2f(0.0, animT * 0.1) + a * 2.0, i32(u.complexity));

                var c = fbm(p + b * 2.0 + vec2f(animT * 0.05), i32(u.complexity));



                return c;

            }



            fn circuitsPattern(uv: vec2f, t: f32) -> f32 {

                var p = uv * u.scale * 5.0;

                let animT = select(0.0, t, u.animate > 0.5);



                let grid = floor(p);

                let f = fract(p);



                let randVal = hash21(grid);

                let lineX = step(0.45, f.x) * step(f.x, 0.55);

                let lineY = step(0.45, f.y) * step(f.y, 0.55);



                var circuit = 0.0;

                if (randVal > 0.5) {

                    circuit = lineX;

                } else {

                    circuit = lineY;

                }



                // Nodes at intersections

                let nodeDist = length(f - 0.5);

                let node = 1.0 - smoothstep(0.1, 0.15, nodeDist);



                // Pulse animation

                let pulse = sin(animT * 3.0 + hash21(grid) * 6.28) * 0.5 + 0.5;



                return (circuit + node) * (0.5 + pulse * 0.5);

            }



            // 🏔️ GLITCH TERRAIN - Pixelated mountains with neon colors

            fn glitchTerrainPattern(uv: vec2f, t: f32) -> f32 {

                let animT = select(0.0, t, u.animate > 0.5);

                var p = uv;

                p.x *= u.aspect;



                // Create terrain height using layered noise

                var height = 0.0;

                var freq = 2.0 * u.scale;

                var amp = 0.5;



                for (var i = 0; i < 5; i++) {

                    let noiseVal = fbm(vec2f(p.x * freq + animT * 0.1, f32(i) * 0.5), 3);

                    height += noiseVal * amp;

                    freq *= 2.0;

                    amp *= 0.5;

                }



                // Convert to terrain silhouette

                let terrainLine = 0.3 + height * 0.4;

                let inTerrain = step(p.y, terrainLine);



                // Add glitch displacement

                let glitchX = floor(p.x * 50.0) / 50.0;

                let glitchOffset = hash21(vec2f(glitchX, floor(animT * 10.0))) * 0.1;

                let glitchedY = p.y + glitchOffset * inTerrain;



                // Layered mountains effect

                var layers = 0.0;

                for (var i = 0; i < 4; i++) {

                    let layerHeight = 0.2 + f32(i) * 0.15 + fbm(vec2f(p.x * (3.0 - f32(i) * 0.5) + animT * 0.05 * f32(i + 1), f32(i)), 3) * 0.3;

                    let layerMask = step(glitchedY, layerHeight);

                    layers = max(layers, layerMask * (0.3 + f32(i) * 0.2));

                }



                // Add scan lines for glitch effect

                let scanline = sin(p.y * 200.0 + animT * 50.0) * 0.1;



                // Color variation based on height

                let heightGradient = (terrainLine - p.y) / terrainLine;



                return layers + scanline * inTerrain + heightGradient * 0.3;

            }



            // 🌌 AURORA BOREALIS - Northern lights effect

            fn auroraPattern(uv: vec2f, t: f32) -> f32 {

                let animT = select(0.0, t, u.animate > 0.5);

                var p = uv;

                p.x *= u.aspect;



                // Create flowing curtains

                var aurora = 0.0;



                for (var i = 0; i < 5; i++) {

                    let offset = f32(i) * 0.2;

                    let freq = 2.0 + f32(i) * 0.5;

                    let speed = 0.3 + f32(i) * 0.1;



                    // Wave pattern for curtain shape

                    let wave = sin(p.x * freq * u.scale + animT * speed + offset * 10.0);

                    let curtainY = 0.5 + wave * 0.15 + offset * 0.1;



                    // Vertical gradient (aurora rises from bottom)

                    let vertGrad = smoothstep(curtainY - 0.3, curtainY, p.y) *

                                   smoothstep(curtainY + 0.2, curtainY, p.y);



                    // Add noise for organic feel

                    let noiseVal = fbm(vec2f(p.x * 3.0 + animT * 0.2, p.y * 2.0 + f32(i)), 3);



                    aurora += vertGrad * (0.3 + noiseVal * 0.4) * (1.0 - f32(i) * 0.15);

                }



                // Add shimmer

                let shimmer = sin(p.x * 30.0 + animT * 5.0) * sin(p.y * 20.0 + animT * 3.0) * 0.1;



                return aurora + shimmer * aurora;

            }



            @fragment

            fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {

                let patternType = i32(u.patternType);

                let paletteId = i32(u.palette);

                var t = u.time;

                var value: f32 = 0.0;



                // Pattern order matches HTML select: ivy=0, noise=1, voronoi=2, waves=3, plasma=4, kaleidoscope=5, hexagons=6, spiral=7, reaction=8, circuits=9, glitch=10, aurora=11

                if (patternType == 0) {

                    value = ivyPattern(input.uv, t);

                } else if (patternType == 1) {

                    value = perlinPattern(input.uv, t);

                } else if (patternType == 2) {

                    value = voronoiPattern(input.uv, t);

                } else if (patternType == 3) {

                    value = wavesPattern(input.uv, t);

                } else if (patternType == 4) {

                    value = plasmaPattern(input.uv, t);

                } else if (patternType == 5) {

                    value = kaleidoscopePattern(input.uv, t);

                } else if (patternType == 6) {

                    value = hexagonsPattern(input.uv, t);

                } else if (patternType == 7) {

                    value = spiralPattern(input.uv, t);

                } else if (patternType == 8) {

                    value = reactionPattern(input.uv, t);

                } else if (patternType == 9) {

                    value = circuitsPattern(input.uv, t);

                } else if (patternType == 10) {

                    value = glitchTerrainPattern(input.uv, t);

                } else {

                    value = auroraPattern(input.uv, t);

                }



                // Apply intensity

                value *= u.intensity;



                // Get color from palette

                var color = getPaletteColor(value, paletteId);



                // Mouse interaction

                if (u.mouseReact > 0.5 || u.mousePressed > 0.5) {

                    let mouse = vec2f(u.mouseX, u.mouseY);

                    let dist = distance(input.uv, mouse);

                    let glow = exp(-dist * 8.0) * 0.6;

                    color += vec3f(glow, glow * 0.7, glow * 0.9);

                }



                return vec4f(color, 1.0);

            }

        `;
    }
}

// Export
window.PatternsRenderer = PatternsRenderer;