Creative Coding
Particle Flow Fields
January 2026
Three.jsGLSLWebGL
Concept
An exploration of emergent behavior through simple rules. Each particle follows the gradient of a 3D Perlin noise field, creating organic river-like patterns that constantly evolve.
Technical Details
- 100,000 particles rendered via instanced geometry
- Custom GLSL shader for velocity-based color mapping
- Real-time noise field computed on GPU via compute shader
- Interactive: mouse position distorts the flow field
Process
Started as a sketch in p5.js, then ported to Three.js for performance. The GPU compute approach increased particle count from 5,000 to 100,000 while maintaining 60fps.