← Blog

Creative Coding

Mathematical simulations, nature visualization, and generative art in the browser

canvassimulationgenerative artphysicsvisualizationcellular automatafractalparticle system

Comparison guides for this topic

Comparison guides repeatedly referenced across this topic, collected as the next practical step.

Browse more Picks →

12 articles

#110 min

The World of Cellular Automata — From Game of Life to Wave Function Collapse

Design patterns for rule-based cellular automata and grid optimization with Uint8Array, explored through implementations of Game of Life, WaveFunctionCollapse, and SandFall.

#210 min

Fluid Simulation in the Browser — Real-Time Computation on a 100x60 Grid

Running a real-time fluid simulation by simplifying the Navier-Stokes equations on a 100x60 grid. Implementation details of diffusion, advection, and pressure solver.

#39 min

Drawing Fractal Mathematics in the Browser — From Mandelbrot Set to Barnsley Fern

Rendering fractals in the browser using complex number iteration, escape time algorithm, IFS (iterated function systems), and recursive drawing.

#49 min

Generating Natural Terrain with Perlin Noise — Why Randomness Can Be Beautiful

Step-by-step implementation of natural terrain generation with Perlin noise, from the mathematics of gradient noise to octave composition and 3D mesh rendering on Canvas.

#59 min

Visualizing Wave Equations in the Browser — Interference, Diffraction, and Resonance

Implementing 1D and 2D wave equations with finite difference methods and visualizing interference, diffraction, and resonance patterns on Canvas. Rendering techniques for WaveInterference, WaveEquation, and ChladniPlate.

#610 min

The N-Body Problem in the Browser — Implementing Gravitational Simulation

Implementation details of gravitational calculations, vector operations, integration methods, and orbit rendering used in the NBody, SolarSystem, and GravityWell components.

#725 min

Exploring the Reaction-Diffusion Parameter Space — Four Faces of the Gray-Scott Model

Varying feed/kill rates in the Gray-Scott Reaction-Diffusion model produces entirely different patterns: spots, stripes, coral, and cell division. Implementation on a 200x200 grid with exploration notes.

#815 min

Sandpile Model and Self-Organized Criticality — Running the BTW Model in the Browser

Visualizing self-organized criticality in the browser through an implementation of the Bak-Tang-Wiesenfeld sandpile model. Measuring power-law avalanche distributions and the formation of fractal patterns.

#926 min

Visualizing Double Pendulum Chaos — RK4 Integration and Sensitivity to Initial Conditions

Implementing a double pendulum simulation covering Lagrangian mechanics equation derivation, RK4 integration stability, NaN prevention, and visualization of sensitivity to initial conditions.

#1018 min

Sound Synthesis with Fourier Series — Harmonics and Waveform Construction

Synthesizing square, sawtooth, and triangle waves with Fourier series and visualizing them with epicycles. Experience how adding harmonics changes timbre through Web Audio API sound synthesis.

#1114 min

Ant Colony Simulation — Emergent Swarm Intelligence Through Pheromones

Implementing pheromone-based pathfinding with an agent-based model to reproduce ant swarm intelligence in the browser. Explores how evaporation and diffusion parameters affect emergent patterns.

#128 min

60fps Particles with Canvas API — Smooth Animation Design for 200+ Particles

Design techniques for running 200+ particles at 60fps using Canvas API with requestAnimationFrame, fixed timestep, DPI scaling, and spatial partitioning.