ReactionMouse

Neon smoke–style particle playground built in Three.js + GPUComputationRenderer. Two 256×256 render target textures hold positions and velocities for 65,536 particles; a pair of fragment shaders integrate motion on the GPU with curl noise, vector swirl around the pointer, edge wrapping, and shockwave impulses. Post-processing (afterimage trail + bloom) pushes a bright dystopian aesthetic. Built as a self-initiated exploration of mathematical vectorization and lightweight physics on the GPU.

How it works

• GPU simulation: Position/velocity ping-pong textures updated each frame inside GPUComputationRenderer, avoiding CPU copies and keeping vector math on the GPU.
• Field dynamics: Curl noise shapes a divergence-free flow; center attraction and mouse-driven force fields (radial + tangential) create swirling plumes.
• Shockwaves: Clicks stamp timed shock centers; fragment shader adds outward impulses with exponential falloff to create ripples.
• Wrapping bounds: Positions wrap on X/Y (and shallow Z) to keep particles in play without abrupt collisions.
• Styling: Custom shader points with palette blending, additive glow, afterimage trails, and bloom for neon smoke visuals.

Run it locally

npm install
npm run dev

Then open the Vite dev server URL (shown in the terminal).

Project structure

• src/main.js – scene setup, GPU computation pipeline, interaction handlers.
• src/style.css – HUD, gradients, and overall visual treatment.
• index.html – Vite entry wiring the app shell.

Notes

• Pointer move/drag injects force and swirl; clicks trigger shockwaves.
• Simulation size (SIM_SIZE) and bounds can be tuned in src/main.js for different density/performance trade-offs.
• Built as a solo experiment to study GPU-friendly vector fields, curl noise, and visually readable particle physics with minimal CPU overhead.