js/particles.js

/**
 * 🌿 Ivy's GPU Art Studio
 * Tab 3: Particle Art
 *
 * GPU-computed particle systems with various behaviors
 */

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

        // Particle parameters
        this.params = {
            count: 10000,
            mode: 0, // 0=attract, 1=repel, 2=orbit, 3=swarm, 4=ivy
            size: 2.0,
            speed: 1.0,
            palette: 0, // 0=ivy, 1=rainbow, 2=fire, 3=ocean, 4=neon, 5=gold
            trail: 0.1 // 0=no trail, higher=more trail
        };

        this.maxParticles = 100000;
        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;

        await this.createBuffers();
        await this.createPipelines();

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

        this.animationLoop = new WebGPUUtils.AnimationLoop((dt, time) => {
            this.time = time;
            this.simulate(dt);
            this.render();
        });
    }

    async createBuffers() {
        // Particle positions (vec2) and velocities (vec2) = 16 bytes per particle
        this.particleBuffer = this.device.createBuffer({
            label: "Particle Buffer",
            size: this.maxParticles * 16,
            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
        });

        // Uniform buffer
        this.uniformBuffer = this.device.createBuffer({
            label: "Particle Uniforms",
            size: 64,
            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
        });

        // Initialize particles
        this.respawnParticles();
    }

    respawnParticles() {
        const data = new Float32Array(this.maxParticles * 4);

        for (let i = 0; i < this.maxParticles; i++) {
            const offset = i * 4;
            // Random position
            data[offset] = Math.random() * 2 - 1; // x
            data[offset + 1] = Math.random() * 2 - 1; // y
            // Random velocity
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 0.01;
            data[offset + 2] = Math.cos(angle) * speed; // vx
            data[offset + 3] = Math.sin(angle) * speed; // vy
        }

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

    async createPipelines() {
        // Compute shader
        const computeShader = this.device.createShaderModule({
            label: "Particle Compute Shader",
            code: this.getComputeShaderCode()
        });

        // Render shader
        const renderShader = this.device.createShaderModule({
            label: "Particle Render Shader",
            code: this.getRenderShaderCode()
        });

        // Bind group layout for compute
        this.computeBindGroupLayout = this.device.createBindGroupLayout({
            entries: [
                { binding: 0, visibility: GPUShaderStage.COMPUTE, buffer: { type: "uniform" } },
                { binding: 1, visibility: GPUShaderStage.COMPUTE, buffer: { type: "storage" } }
            ]
        });

        // Bind group layout for render
        this.renderBindGroupLayout = this.device.createBindGroupLayout({
            entries: [{ binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: { type: "uniform" } }]
        });

        // Compute pipeline
        this.computePipeline = this.device.createComputePipeline({
            label: "Particle Compute Pipeline",
            layout: this.device.createPipelineLayout({
                bindGroupLayouts: [this.computeBindGroupLayout]
            }),
            compute: {
                module: computeShader,
                entryPoint: "main"
            }
        });

        // Render pipeline
        this.renderPipeline = this.device.createRenderPipeline({
            label: "Particle Render Pipeline",
            layout: this.device.createPipelineLayout({
                bindGroupLayouts: [this.renderBindGroupLayout]
            }),
            vertex: {
                module: renderShader,
                entryPoint: "vertexMain",
                buffers: [
                    {
                        arrayStride: 16, // vec4f (pos.xy, vel.xy)
                        stepMode: "instance",
                        attributes: [
                            { shaderLocation: 0, offset: 0, format: "float32x2" }, // position
                            { shaderLocation: 1, offset: 8, format: "float32x2" } // velocity
                        ]
                    }
                ]
            },
            fragment: {
                module: renderShader,
                entryPoint: "fragmentMain",
                targets: [
                    {
                        format: this.format,
                        blend: {
                            color: {
                                srcFactor: "src-alpha",
                                dstFactor: "one",
                                operation: "add"
                            },
                            alpha: {
                                srcFactor: "one",
                                dstFactor: "one",
                                operation: "add"
                            }
                        }
                    }
                ]
            },
            primitive: {
                topology: "triangle-list"
            }
        });

        // Create bind groups
        this.computeBindGroup = this.device.createBindGroup({
            layout: this.computeBindGroupLayout,
            entries: [
                { binding: 0, resource: { buffer: this.uniformBuffer } },
                { binding: 1, resource: { buffer: this.particleBuffer } }
            ]
        });

        this.renderBindGroup = this.device.createBindGroup({
            layout: this.renderBindGroupLayout,
            entries: [{ binding: 0, resource: { buffer: this.uniformBuffer } }]
        });
    }

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

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

    reset() {
        this.respawnParticles();
    }

    setCount(count) {
        this.params.count = Math.min(count, this.maxParticles);
    }

    setMode(mode) {
        const modes = { attract: 0, repel: 1, orbit: 2, swarm: 3, ivy: 4 };
        this.params.mode = modes[mode] || 0;
    }

    setSize(size) {
        this.params.size = size;
    }

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

    setPalette(palette) {
        const palettes = { ivy: 0, rainbow: 1, fire: 2, ocean: 3, neon: 4, gold: 5 };
        this.params.palette = palettes[palette] ?? 0;
    }

    setTrail(trail) {
        this.params.trail = trail;
    }

    simulate(dt) {
        if (!this.isActive) return;

        const aspect = this.canvas.width / this.canvas.height;

        // Update uniforms
        const uniforms = new Float32Array([
            this.params.count,
            dt * this.params.speed,
            this.params.mode,
            this.params.size,
            this.input.mouseX * 2 - 1, // Normalized to -1..1
            this.input.mouseY * 2 - 1,
            this.input.isPressed ? 1.0 : 0.0,
            this.time,
            aspect,
            this.params.palette,
            this.params.trail,
            0.0 // padding
        ]);

        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniforms);

        // Run compute shader
        const commandEncoder = this.device.createCommandEncoder();
        const computePass = commandEncoder.beginComputePass();

        computePass.setPipeline(this.computePipeline);
        computePass.setBindGroup(0, this.computeBindGroup);
        computePass.dispatchWorkgroups(Math.ceil(this.params.count / 64));

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

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

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

        // Trail effect: use semi-transparent clear based on trail value
        // Lower alpha = more trail persistence
        const trailAlpha = 1.0 - this.params.trail * 1.8; // 0.1 trail => 0.82 alpha

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

        renderPass.setPipeline(this.renderPipeline);
        renderPass.setBindGroup(0, this.renderBindGroup);
        renderPass.setVertexBuffer(0, this.particleBuffer);
        renderPass.draw(6, this.params.count); // 6 vertices per quad, instanced
        renderPass.end();

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

    getComputeShaderCode() {
        return /* wgsl */ `
            struct Uniforms {
                count: f32,
                dt: f32,
                mode: f32,
                size: f32,
                mouseX: f32,
                mouseY: f32,
                mousePressed: f32,
                time: f32,
                aspect: f32,
                palette: f32,
                trail: f32,
            }

            struct Particle {
                pos: vec2f,
                vel: vec2f,
            }

            @group(0) @binding(0) var<uniform> u: Uniforms;
            @group(0) @binding(1) var<storage, read_write> particles: array<Particle>;

            // Simple hash function for randomness
            fn hash(p: vec2f) -> f32 {
                var h = dot(p, vec2f(127.1, 311.7));
                return fract(sin(h) * 43758.5453123);
            }

            @compute @workgroup_size(64)
            fn main(@builtin(global_invocation_id) gid: vec3u) {
                let idx = gid.x;
                if (idx >= u32(u.count)) {
                    return;
                }

                var p = particles[idx];
                let mouse = vec2f(u.mouseX, u.mouseY);

                // Calculate force based on mode
                var force = vec2f(0.0, 0.0);
                let toMouse = mouse - p.pos;
                let dist = length(toMouse);
                let dir = normalize(toMouse + vec2f(0.0001, 0.0001));

                let mode = i32(u.mode);

                if (mode == 0) {
                    // Attract to mouse
                    if (u.mousePressed > 0.5 && dist > 0.01) {
                        force = dir * 0.5 / (dist * dist + 0.1);
                    }
                } else if (mode == 1) {
                    // Repel from mouse
                    if (u.mousePressed > 0.5 && dist > 0.01) {
                        force = -dir * 0.5 / (dist * dist + 0.1);
                    }
                } else if (mode == 2) {
                    // Orbit around mouse
                    if (dist > 0.01) {
                        let perpendicular = vec2f(-dir.y, dir.x);
                        force = perpendicular * 0.2 / (dist + 0.1);
                        force += dir * (0.5 - dist) * 0.1; // Pull toward orbit radius
                    }
                } else if (mode == 3) {
                    // Swarm behavior
                    let noise = hash(p.pos + vec2f(u.time * 0.1, 0.0));
                    let angle = noise * 6.28318 + u.time;
                    force = vec2f(cos(angle), sin(angle)) * 0.05;

                    if (u.mousePressed > 0.5 && dist < 0.3) {
                        force += dir * 0.3;
                    }
                } else if (mode == 4) {
                    // 🌿 Ivy mode - Falling leaves that grow/spiral like ivy
                    let noise = hash(p.pos + vec2f(f32(idx) * 0.01, 0.0));

                    // Gentle falling
                    force.y = -0.02;

                    // Swaying left-right like leaves in wind
                    let swayFreq = noise * 2.0 + 1.0;
                    let swayAmp = 0.03 + noise * 0.02;
                    force.x = sin(u.time * swayFreq + p.pos.y * 3.0 + noise * 6.28) * swayAmp;

                    // Spiral pattern (like ivy growing)
                    let spiralAngle = u.time * 0.5 + p.pos.y * 5.0 + noise * 6.28;
                    force.x += cos(spiralAngle) * 0.01;

                    // Mouse interaction - leaves follow cursor
                    if (u.mousePressed > 0.5) {
                        force += dir * 0.2 / (dist + 0.2);
                    } else if (dist < 0.3) {
                        // Gentle attract even without click
                        force += dir * 0.05 / (dist + 0.1);
                    }
                }

                // Apply force
                p.vel += force * u.dt;

                // Damping
                p.vel *= 0.99;

                // Limit speed
                let speed = length(p.vel);
                if (speed > 0.1) {
                    p.vel = normalize(p.vel) * 0.1;
                }

                // Update position
                p.pos += p.vel * u.dt * 10.0;

                // Wrap around edges
                if (p.pos.x < -1.1) { p.pos.x = 1.1; }
                if (p.pos.x > 1.1) { p.pos.x = -1.1; }
                if (p.pos.y < -1.1) { p.pos.y = 1.1; }
                if (p.pos.y > 1.1) { p.pos.y = -1.1; }

                particles[idx] = p;
            }
        `;
    }

    getRenderShaderCode() {
        return /* wgsl */ `
            struct Uniforms {
                count: f32,
                dt: f32,
                mode: f32,
                size: f32,
                mouseX: f32,
                mouseY: f32,
                mousePressed: f32,
                time: f32,
                aspect: f32,
                palette: f32,
                trail: f32,
            }

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

            struct VertexInput {
                @builtin(vertex_index) vertexIndex: u32,
                @builtin(instance_index) instanceIndex: u32,
                @location(0) pos: vec2f,
                @location(1) vel: vec2f,
            }

            struct VertexOutput {
                @builtin(position) position: vec4f,
                @location(0) uv: vec2f,
                @location(1) speed: f32,
            }

            fn getPaletteColor(t: f32, paletteId: i32) -> vec3f {
                let tt = fract(t);

                if (paletteId == 0) { // Ivy Green
                    return vec3f(0.13 + 0.2 * tt, 0.5 + 0.4 * tt, 0.2 + 0.2 * tt);
                } else if (paletteId == 1) { // Rainbow
                    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))
                    );
                } else if (paletteId == 2) { // Fire
                    return vec3f(1.0, 0.3 + 0.5 * tt, tt * 0.2);
                } else if (paletteId == 3) { // Ocean
                    return vec3f(0.1 * tt, 0.3 + 0.4 * tt, 0.6 + 0.4 * tt);
                } else if (paletteId == 4) { // Neon
                    return vec3f(
                        0.5 + 0.5 * sin(tt * 12.0),
                        0.5 + 0.5 * sin(tt * 12.0 + 2.0),
                        0.5 + 0.5 * sin(tt * 12.0 + 4.0)
                    );
                } else { // Gold
                    return vec3f(1.0, 0.8 * tt + 0.2, 0.2 * tt);
                }
            }

            @vertex
            fn vertexMain(input: VertexInput) -> VertexOutput {
                // Quad vertices
                var quadPos = array<vec2f, 6>(
                    vec2f(-1.0, -1.0),
                    vec2f(1.0, -1.0),
                    vec2f(1.0, 1.0),
                    vec2f(-1.0, -1.0),
                    vec2f(1.0, 1.0),
                    vec2f(-1.0, 1.0)
                );

                let size = u.size * 0.01;
                let offset = quadPos[input.vertexIndex] * size;

                var output: VertexOutput;
                output.position = vec4f(
                    input.pos.x + offset.x / u.aspect,
                    input.pos.y + offset.y,
                    0.0, 1.0
                );
                output.uv = quadPos[input.vertexIndex] * 0.5 + 0.5;
                output.speed = length(input.vel);

                return output;
            }

            @fragment
            fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
                // Circular particle
                let dist = length(input.uv - 0.5) * 2.0;
                if (dist > 1.0) {
                    discard;
                }

                let paletteId = i32(u.palette);
                let hue = fract(input.speed * 20.0 + u.time * 0.1);
                let color = getPaletteColor(hue, paletteId);

                // Soft edge
                let alpha = 1.0 - smoothstep(0.5, 1.0, dist);

                return vec4f(color * alpha * 0.8, alpha * 0.5);
            }
        `;
    }
}

// Export
window.ParticlesRenderer = ParticlesRenderer;