Lenia lab / 01 · three.js · WebGL · Blender

Particle field

Twelve thousand particles, drawn live in your browser with three.js and WebGL. The animals were rigged and animated in Blender. The page is plain JavaScript and two small shaders, with no framework and no build step. Scroll, and it comes to you.

Scroll · drag to turn

Camera

A single requestAnimationFrame loop drives everything. Each frame it reads the scroll position, smoothed by Lenis, and maps it to a camera distance. The distance is interpolated exponentially, not linearly, so the shape grows at a steady rate on screen instead of lunging at the end.

z = z₀ · (z₁ / z₀)^e(p)

Pointer

Move your pointer through it, or drag to turn it. The pointer is unprojected into a ray and intersected with the shape's plane. Particles within a radius of that point light up at once and fade slowly, so it leaves a path behind it.

l = s² · (3 − 2s), s = 1 − ‖p − c‖ / r

On a touch screen there is no pointer to follow. Try it on a laptop.

Shapes

Every shape is a sampler: a function that returns positions. Text is sampled from an off-screen canvas with a low-discrepancy sequence, the horse, koi and jellyfish from models rigged in Blender. The maths shapes are computed: a trefoil knot, a Möbius strip, and a tesseract rotated in 4D.

x = F⁻¹(uₙ), uₙ = frac(½ + 0.7549 n)

Rendering

The squares take two passes. Particles are added into a half-float render target, one texel per square. A fragment shader then draws each cell as a square whose side follows the square root of its brightness. Glow skips this for additive point sprites.

side = 0.82 · √(Σc / Σw)