Hello: Please select a channel that interests you (waiting for your selection)

The Dot Field

Dec 15, 2024

Dots moving around in simple ways to create surprisingly complex patterns that feel alive.

It's cool how very simple rules can result in complex patterns. Even something as simple as circles moving back and forth in a straight line generates a fascinating optical illusion. I wanted something like that for the background animation of this site.

The starting point was just a grid of dots. Then I used AI to add some some time-based math functions to nudge each dot slightly. After a few iterations, it stopped looking like a grid and started looking fluid and alive.

There are several several movement modes:

  • Zen The default state. A calm, smooth animation where the camera slowly moves around.

  • Jitter Rapid ripple bursts cascade across the field. Dots jitter with high-frequency oscillations while random ripples fire in chaotic patterns.

  • Swirl Enhanced rotational motion. The field twists with amplified swirl strength, creating flowing vortex patterns.

  • Spiral Logarithmic spiral currents unfurl from the center. Each dot's height is modulated by its angle and distance using the golden ratio for that natural nautilus-shell feel.

  • Quake Seismic waves propagate diagonally through the field. Uses Perlin noise with multiple octaves to create organic, earthquake-like ripples.

  • Hop A dive through a Julia set fractal. Each dot's position maps to the complex plane, and its height represents escape velocity from the fractal boundary.

  • Bloom Gray-Scott reaction-diffusion patterns grow across the grid. Two virtual chemicals interact and diffuse, creating organic coral-like structures that bloom outward.

  • Blink Chaotic double pendulum physics. Three pendulum systems swing independently, and each dot responds to the combined gravitational influence of their endpoints.

  • Stars The grid transforms into a drifting starfield. Each dot gets assigned a random depth and twinkle phase, then the wave motion is suppressed so they float freely in space.

The entire thing runs on the GPU - the advanced graphcis processor on your computer that is designed to efficiently process and display these kinds of animations, so it shouldn't melt your laptop. Hope you like it!