← All ConceptsVol.4
Algorithmic Life

Volume 5

Algorithmic
life.

Beyond CSS. Particles that flock. Fields that flow. Springs that bounce. Waves that breathe. All governed by mathematics, running on Canvas 2D at 60fps. The tools: requestAnimationFrame, trigonometry, noise functions, and physics formulas. No libraries.

Scroll to begin
01

Flow Fields

Noise-driven particle currents. Each particle follows an invisible field.

Canvas 2D + noise function

200 particles follow a 2D noise field — at each point in space, the noise function returns an angle, and the particle drifts in that direction. The field evolves slowly over time, creating organic river-like currents. Move your mouse to warp the field. The formula: angle = noise(x * 0.003, y * 0.003, time) * TAU
02

Spring Physics

Objects connected by springs. Drag one, the rest follow.

Hooke's Law: F = -kx - dv

Drag the red node

A chain of nodes connected by springs. Drag the red node — the others follow with spring physics (Hooke's law with damping). The formula: force = -stiffness * displacement - damping * velocity. This is exactly what Framer Motion and Apple's UIKit use internally — but here it's 15 lines of code.
03

Flocking (Boids)

Emergent collective behaviour from three simple rules.

Reynolds' Boids algorithm (1986)

Move cursor to attract the flock

Each triangle follows three rules: separation (avoid crowding neighbours), alignment (steer toward average heading), cohesion (move toward average position). No central coordinator. The flock emerges from individual behaviour. Move your mouse to attract them.
04

Lissajous Curves

Sine waves on X and Y create infinite patterns.

x = sin(at + δ), y = sin(bt)

Try 3:2, 5:4, 7:6 — each ratio is a different shape family

Two sine waves — one controlling X, one controlling Y — produce infinite pattern families. Change the frequency ratio (a:b) for different shapes. Rational ratios close the curve; irrational ratios fill the space forever. Add a slow phase shift and the pattern breathes.
05

Wave Interference

Multiple wave sources create patterns through superposition.

Σ sin(distance × freq − time)

Click to add wave sources (3 active)

Three wave sources emit circular waves. Where waves overlap, they interfere — reinforcing (bright) or cancelling (dark). Click to place new sources. This is the same physics that creates moiré patterns, acoustic sweet spots, and quantum interference.
06

Strange Attractor

Deterministic chaos. Order within apparent randomness.

Clifford attractor: x' = sin(ay) + c·cos(ax)

A single point, iterated millions of times through a simple formula, traces an impossibly complex pattern. This is deterministic chaos — the same starting point always produces the same image, but tiny parameter changes create wildly different shapes. The formula fits in one line.
07

The Toolkit

What powers all of this. No libraries required.

Canvas 2D

The workhorse. Draw pixels, shapes, gradients. Hardware-accelerated compositing. Works everywhere since IE9.

Perf: 60fps with thousands of particles

Use: Backgrounds, particle effects, data viz, generative art

requestAnimationFrame

The heartbeat. Synced to display refresh rate. Battery-friendly — pauses when tab is hidden.

Perf: Zero overhead vs setInterval

Use: Every animation loop on this page

OffscreenCanvas

Canvas rendering on a Web Worker thread. Main thread stays completely free for UI.

Perf: 100% main thread freedom

Use: Heavy particle systems, generative art that won't jank scrolling

Web Animations API

The browser's native animation engine. More control than CSS animations, less overhead than libraries.

Perf: Compositor thread, hardware-accelerated

Use: Complex sequenced animations, programmatic keyframes

Noise functions

Pseudo-random but smooth. Creates organic, natural-looking variation. The secret behind every 'living' generative artwork.

Perf: Negligible — pure math

Use: Flow fields, terrain, organic movement, texture

Spring physics

F = -kx - dv. Mass, stiffness, damping. The foundation of every satisfying interaction in iOS and Android.

Perf: Negligible — one formula per frame

Use: Following cursors, scroll momentum, draggable elements

Trigonometry

sin, cos, atan2 — the geometry of circles, waves, and rotation. If it curves or oscillates, trig is involved.

Perf: Built into every CPU

Use: Waves, orbits, Lissajous curves, pointing, distance

SVG + SMIL

Vector animations that scale to any resolution. SMIL is NOT deprecated — Chrome reversed its 2015 decision. Native, no JS.

Perf: DOM-based, good for <100 elements

Use: Animated logos, icons, diagrams, line drawing

End of Volume 5

The formula is
the design.

No image files. No animation timelines. No keyframes. Just mathematics, a canvas, and a loop. The algorithms don't repeat — they evolve. That's what makes them feel alive.

← Volume 4Volume 1All Concepts