Creative Coding

Particle Flow Fields

January 2026

Particle Flow Fields
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.