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,
            tunnel: 5, // Wormhole tunnel
            dna: 6, // DNA helix sparkle
            galaxy: 7, // Galaxy vortex
            wavegrid: 8, // NEW: Wave grid (image 2)
            splatter: 9 // NEW: Paint splatter clusters (image 3)
        };
        this.params.mode = modes[mode] || 0;

        // Respawn particles for special modes
        if (mode === "tunnel" || mode === "dna" || mode === "galaxy") {
            this.respawnParticles3D();
        } else if (mode === "wavegrid") {
            this.respawnParticlesGrid();
        } else if (mode === "splatter") {
            this.respawnParticlesClusters();
        }
    }

    // Grid spawn for wave effect
    respawnParticlesGrid() {
        const data = new Float32Array(this.maxParticles * 4);
        const gridSize = Math.floor(Math.sqrt(this.maxParticles));

        for (let i = 0; i < this.maxParticles; i++) {
            const offset = i * 4;
            const gx = (i % gridSize) / gridSize;
            const gy = Math.floor(i / gridSize) / gridSize;

            // Grid position (-1 to 1)
            data[offset] = gx * 2 - 1; // x
            data[offset + 1] = gy * 2 - 1; // y
            data[offset + 2] = gx; // store grid coord for coloring
            data[offset + 3] = gy;
        }

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

    // Cluster spawn for paint splatter effect
    respawnParticlesClusters() {
        const data = new Float32Array(this.maxParticles * 4);
        const numClusters = 30 + Math.floor(Math.random() * 20);
        const clusters = [];

        // Create cluster centers with random colors
        for (let c = 0; c < numClusters; c++) {
            clusters.push({
                x: Math.random() * 2 - 1,
                y: Math.random() * 2 - 1,
                size: 0.1 + Math.random() * 0.25,
                hue: Math.random() // Color identifier
            });
        }

        for (let i = 0; i < this.maxParticles; i++) {
            const offset = i * 4;
            // Pick a random cluster
            const cluster = clusters[Math.floor(Math.random() * numClusters)];

            // Spawn within cluster with gaussian-like distribution
            const angle = Math.random() * Math.PI * 2;
            const dist = Math.random() * Math.random() * cluster.size; // Squared for density at center

            data[offset] = cluster.x + Math.cos(angle) * dist; // x
            data[offset + 1] = cluster.y + Math.sin(angle) * dist; // y
            data[offset + 2] = cluster.hue; // store hue for color
            data[offset + 3] = dist / cluster.size; // distance from center for variation
        }

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

    // Special respawn for 3D-like effects
    respawnParticles3D() {
        const data = new Float32Array(this.maxParticles * 4);

        for (let i = 0; i < this.maxParticles; i++) {
            const offset = i * 4;
            // Spawn in a cylinder/tube shape for better 3D effect
            const angle = Math.random() * Math.PI * 2;
            const radius = 0.3 + Math.random() * 0.7;
            const z = Math.random() * 2 - 1; // Pseudo-depth

            data[offset] = Math.cos(angle) * radius; // x
            data[offset + 1] = Math.sin(angle) * radius; // y
            data[offset + 2] = z * 0.01; // vx (store z as velocity for shader)
            data[offset + 3] = (Math.random() - 0.5) * 0.01; // vy
        }

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

    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, cosmic: 6 };
        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
        // Clamped to prevent values below 0.05 which would cause issues
        const trailAlpha = Math.max(0.05, 1.0 - this.params.trail * 1.9); // Better trail range

        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);

                    }

                } else if (mode == 5) {

                    // 🌀 WORMHOLE TUNNEL - Particles fly toward center creating tunnel effect

                    let noise = hash(p.pos + vec2f(f32(idx) * 0.01, 0.0));



                    // Distance from center

                    let centerDist = length(p.pos);



                    // Spiral inward

                    let angle = atan2(p.pos.y, p.pos.x);

                    let spiralSpeed = 0.1 + noise * 0.1;

                    let newAngle = angle + u.time * spiralSpeed;



                    // Pull toward center (tunnel effect)

                    let pullStrength = 0.05 * (1.0 + centerDist);

                    force = -normalize(p.pos + vec2f(0.001)) * pullStrength;



                    // Add rotation

                    let tangent = vec2f(-p.pos.y, p.pos.x);

                    force += normalize(tangent) * 0.1;



                    // When very close to center, respawn at edge

                    if (centerDist < 0.05) {

                        let spawnAngle = noise * 6.28318 + u.time;

                        p.pos = vec2f(cos(spawnAngle), sin(spawnAngle)) * (0.9 + noise * 0.2);

                        p.vel = vec2f(0.0);

                    }

                } else if (mode == 6) {

                    // 🧬 DNA HELIX - Double helix sparkle spiral

                    let noise = hash(p.pos + vec2f(f32(idx) * 0.01, 0.0));

                    let particlePhase = f32(idx) / u.count;



                    // Two helices (DNA strands)

                    let strand = select(0.0, 3.14159, f32(idx % 2u) > 0.5);

                    let helixAngle = particlePhase * 20.0 + u.time * 2.0 + strand;

                    let helixRadius = 0.3 + 0.1 * sin(particlePhase * 10.0);



                    // Target position on helix

                    let targetX = cos(helixAngle) * helixRadius;

                    let targetY = (particlePhase * 2.0 - 1.0); // Vertical spread

                    let destPos = vec2f(targetX, targetY);



                    // Move toward helix position

                    force = (destPos - p.pos) * 0.1;



                    // Add sparkle jitter

                    force.x += sin(u.time * 10.0 + noise * 100.0) * 0.01;

                    force.y += cos(u.time * 8.0 + noise * 50.0) * 0.01;



                    // Mouse interaction - expand helix

                    if (u.mousePressed > 0.5) {

                        let expand = dir * 0.1;

                        force += expand;

                    }

                } else if (mode == 7) {

                    // 🌌 GALAXY VORTEX - Spiral galaxy with arms

                    let noise = hash(p.pos + vec2f(f32(idx) * 0.01, 0.0));

                    let particlePhase = f32(idx) / u.count;



                    // Galaxy arm assignment (4 arms)

                    let armIndex = f32(idx % 4u);

                    let armOffset = armIndex * 1.5708; // PI/2



                    // Spiral formula

                    let spiralAngle = particlePhase * 15.0 + u.time * 0.5 + armOffset;

                    let spiralRadius = particlePhase * 0.8 + 0.1;



                    // Add arm spread

                    let spread = noise * 0.15;



                    let targetX = cos(spiralAngle) * (spiralRadius + spread);

                    let targetY = sin(spiralAngle) * (spiralRadius + spread);

                    let destPos = vec2f(targetX, targetY);



                    // Smooth movement toward spiral position

                    force = (destPos - p.pos) * 0.05;



                    // Orbital velocity (rotation)

                    let tangent = vec2f(-p.pos.y, p.pos.x);

                    force += normalize(tangent + vec2f(0.001)) * 0.02;



                    // Mouse creates gravity well

                    if (u.mousePressed > 0.5 && dist < 0.5) {

                        force += dir * 0.3 / (dist + 0.1);

                    }

                } else if (mode == 8) {

                    // 🌊 WAVE GRID - Particles on grid with color waves passing through

                    // Grid particles don't move much - the color does the work

                    // Just subtle oscillation

                    let gridX = p.vel.x; // We stored grid coords in vel

                    let gridY = p.vel.y;



                    // Subtle wave movement

                    let waveX = sin(gridY * 10.0 + u.time * 2.0) * 0.005;

                    let waveY = cos(gridX * 10.0 + u.time * 1.5) * 0.005;



                    // Restore to grid position with wave offset

                    let targetX = (gridX * 2.0 - 1.0) + waveX;

                    let targetY = (gridY * 2.0 - 1.0) + waveY;



                    force = (vec2f(targetX, targetY) - p.pos) * 0.5;



                    // Mouse interaction - push particles away

                    if (dist < 0.2) {

                        force -= dir * 0.05 / (dist + 0.05);

                    }

                } else if (mode == 9) {

                    // 🎨 PAINT SPLATTER - Clustered particles, minimal movement

                    // The beauty is in the static clusters, so minimal force

                    let noise = hash(p.pos + vec2f(f32(idx) * 0.01, u.time * 0.01));



                    // Very subtle jitter to keep them alive

                    force.x = sin(u.time * 3.0 + noise * 100.0) * 0.002;

                    force.y = cos(u.time * 2.5 + noise * 50.0) * 0.002;



                    // Mouse click explodes nearby clusters

                    if (u.mousePressed > 0.5 && dist < 0.3) {

                        force -= dir * 0.2 / (dist + 0.05);

                    }

                }



                // 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,

                @location(2) vel: vec2f,

            }



            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 if (paletteId == 5) { // Gold

                    return vec3f(1.0, 0.8 * tt + 0.2, 0.2 * tt);

                } else { // Cosmic - Purple/Pink/Blue sparkle like image 2

                    return vec3f(

                        0.4 + 0.6 * sin(tt * 8.0 + 1.0),

                        0.2 + 0.3 * sin(tt * 6.0 + 2.0),

                        0.6 + 0.4 * sin(tt * 10.0 + 4.0)

                    );

                }

            }



            @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);

                output.vel = input.vel; // Pass velocity for special modes



                return output;

            }



            @fragment

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

                // Circular particle with glow

                let dist = length(input.uv - 0.5) * 2.0;

                if (dist > 1.0) {

                    discard;

                }



                let paletteId = i32(u.palette);

                let mode = i32(u.mode);

                var hue = fract(input.speed * 20.0 + u.time * 0.1);

                var color = getPaletteColor(hue, paletteId);

                var alpha: f32;



                if (mode == 8) {

                    // 🌊 WAVE GRID - Color based on wave function, not speed

                    let gridX = input.vel.x;

                    let gridY = input.vel.y;



                    // Multiple wave layers for color

                    let wave1 = sin(gridX * 8.0 + u.time * 1.5) * 0.5 + 0.5;

                    let wave2 = sin(gridY * 6.0 - u.time * 1.2) * 0.5 + 0.5;

                    let wave3 = sin((gridX + gridY) * 5.0 + u.time) * 0.5 + 0.5;



                    hue = fract(wave1 * 0.4 + wave2 * 0.3 + wave3 * 0.3);

                    color = getPaletteColor(hue, paletteId);



                    // Small dots with soft glow

                    let core = 1.0 - smoothstep(0.0, 0.4, dist);

                    let glow = 1.0 - smoothstep(0.0, 1.0, dist);

                    alpha = core * 0.95 + glow * 0.3;

                    color *= 1.2;



                } else if (mode == 9) {

                    // 🎨 PAINT SPLATTER - Color based on cluster hue stored in vel.x

                    let clusterHue = input.vel.x;

                    let distFromCenter = input.vel.y;



                    // Vibrant distinct colors per cluster

                    hue = clusterHue;

                    color = getPaletteColor(hue, 1); // Force rainbow for best splatter effect



                    // Vary brightness based on distance from cluster center

                    let brightness = 0.8 + distFromCenter * 0.4;

                    color *= brightness;



                    // Solid dots with slight soft edge

                    alpha = 1.0 - smoothstep(0.7, 1.0, dist);



                } else if (mode >= 5 && mode <= 7) {

                    // Enhanced glow for tunnel, dna, galaxy

                    let core = 1.0 - smoothstep(0.0, 0.3, dist);

                    let glow = 1.0 - smoothstep(0.0, 1.0, dist);

                    alpha = core * 0.9 + glow * 0.4;



                    let sparkle = sin(u.time * 20.0 + input.speed * 100.0) * 0.3 + 0.7;

                    color *= sparkle * 1.5;

                } else {

                    // Standard soft edge for other modes

                    alpha = 1.0 - smoothstep(0.5, 1.0, dist);

                }



                return vec4f(color * alpha * 0.8, alpha * 0.6);

            }

        `;
    }
}

// Export
window.ParticlesRenderer = ParticlesRenderer;