Base particle logic generated via particles.casberry.in.
Experiment 01 // Fractal Weather Formations
The Goal: To test the limits of real-time browser rendering by orchestrating a dense, fluid swarm of 20,000 distinct geometries running natively on the GPU via WebGL.
How it works: Instead of relying on a standard physics engine, this experiment simulates large-scale atmospheric cloud dynamics entirely through pure mathematics. By combining a Golden Ratio Spiral for particle distribution with layered fractal-like noise loops, the system generates predictable, shifting weather patterns, turbulence, and stormy color gradients on the fly.
Tech Stack: Three.js WebGL Shaders GPU Instanced Mesh Post-Processing Bloom
Shout-out to particles.casberry.in for the awesome base sandbox! I used their platform to model the initial particle swarm physics, exported the raw math, and wired it up natively into this custom canvas wrapper.
// 🌀 THE MATHEMATICAL HEART: Distribution, Noise, & Swirl
const ga = 2.339996; // Golden angle for spherical distribution
const y = 1.0 - 2.0 * (i / totalParticles);
const r = Math.sqrt(1.0 - y * y);
const theta = ga * i;
// 1. Layered fractal-like noise for atmospheric turbulence
let noise = Math.sin((x * 3.1 + time) * 1.3) * Math.cos((z * 2.7 - time) * 1.7) +
Math.sin((x * 5.7 - time * 0.7) * 0.9) * Math.cos((ly * 4.3 + time * 0.6) * 1.1);
noise *= 0.5 * turbulence;
// 2. Swirling radial velocity vectors
let angle = theta + swirlStrength * noise + time;
let radius = scale * (0.6 + 0.4 * noise + 0.2 * Math.sin(time + fi * 20.0));
// 3. Interpolate (lerp) for smooth fluid movement
this.positions[i].lerp(this.target, 0.1);
Recent Comments