art-starry-night-flowfield

What it is

A real-time generative art engine that simulates fluid dynamics using curl noise and interactive vortices. It renders 50,000+ particles at 60 FPS by leveraging WebGPU for compute-intensive physics and rendering, with a CPU fallback via p5.js. The system samples colors from a reference image or palette to create painterly, impasto-style strokes that mimic the movement and color theory of Van Gogh's work.

Features

• WebGPU-accelerated rendering with automatic CPU fallback via p5.js
• Interactive vortex editing: click to add, drag to move, scroll to resize
• Reference image color sampling mapped to particle positions
• Zone-based flow characteristics for sky, hills, and village regions
• Real-time controls for turbulence, noise scale, and trail fade
• High-resolution export up to 8x for print-quality output

Quickstart

python3 server.py
open http://localhost:8000

Architecture

flowchart TD
    User[User Browser] -->|Interacts| UI[p5.js Sketch / UI]
    UI -->|State Updates| Bridge[WebGPU Bridge]
    Bridge -->|Uniforms/Storage Buffers| GPU[WebGPU Device]
    
    subgraph WebGPU Pipeline
        ComputeNoise[Compute Shader: Noise]
        ComputeFlow[Compute Shader: Flow Field]
        ComputeParticles[Compute Shader: Particle Physics]
        RenderPass[Render Pass: Particles & Trails]
    end
    
    GPU -->|Dispatch| ComputeNoise
    ComputeNoise -->|Noise Texture| ComputeFlow
    Bridge -->|Vortex Data| ComputeFlow
    ComputeFlow -->|Vector Field| ComputeParticles
    ComputeParticles -->|Particle Positions| RenderPass
    RenderPass -->|Draw Calls| Canvas[HTML5 Canvas]
    
    subgraph CPU Fallback
        CurlJS[CurlNoise.js]
        VortexJS[Vortex.js]
        ParticleJS[Particle.js]
        BrushJS[Brush.js]
    end
    
    UI -->|Fallback Mode| CurlJS
    CurlJS --> VortexJS
    VortexJS --> ParticleJS
    ParticleJS --> BrushJS
    BrushJS --> Canvas

How it's built

The application uses a hybrid architecture. A p5.js sketch manages the UI, DOM interactions, and CPU-based rendering fallback. For high-performance mode, it initializes a WebGPU device via ES modules. Compute shaders (WGSL) handle simplex noise generation, flow field calculation, and particle physics integration. A bridge layer synchronizes JavaScript state (vortex positions, turbulence levels) with GPU uniform buffers. Render shaders draw particles with trail fading and brush-like tapering effects.

How it runs

sequenceDiagram
    participant User
    participant P5 as p5.js Sketch
    participant Bridge as WebGPU Bridge
    participant GPU as WebGPU Device
    
    User->>P5: Interact (Click/Drag/Scroll)
    P5->>P5: Update Vortex/Config State
    alt WebGPU Enabled
        P5->>Bridge: syncState()
        Bridge->>GPU: writeBuffer (Uniforms/Storage)
        GPU->>GPU: Dispatch Compute (Noise)
        GPU->>GPU: Dispatch Compute (Flow Field)
        GPU->>GPU: Dispatch Compute (Particle Physics)
        GPU->>GPU: Begin Render Pass
        GPU->>GPU: Draw Particles
        GPU->>P5: Present Frame
    else CPU Fallback
        P5->>P5: calculateCurlNoise()
        P5->>P5: updateParticles()
        P5->>P5: drawBrushStrokes()
        P5->>User: Render Canvas
    end

How to apply & reuse

Use this project as a foundation for high-performance web-based particle systems. It demonstrates how to offload physics calculations to WebGPU compute pipelines while maintaining a familiar p5.js development workflow for UI and interaction. It is suitable for data visualization requiring fluid motion, interactive digital art installations, or educational demos of curl noise and vector fields.

At a glance