Dither playground guide

Overview

Dither playground turns a picture into a field of dots that move, morph and react to sound.

Red and blue dots swirling in streaks around the middle of a dark frame
The sample in Three streams, with bigger dots and Trail at 0.7: its red letters and blue shadow swirl around the middle.

First the picture is read on a grid. Every few pixels, set by Grid step, the tool measures the luminance of that spot. A spot bright enough to keep becomes one dot. Brighter spots get bigger, stronger dots, and each dot keeps the colour it was read from. That is a loose kind of dithering.

Each dot is then a small moving part, as in a particle system. It has a velocity, a spring that pulls it back to its place, and damping that calms it down.

Move a mouse or a finger over the dots and they move away, gather or swirl. Four moving modes pull them along curl noise, three orbiting streams, a Lorenz attractor or a golden spiral, then let them fly home.

Load a second picture and the same dots travel to it, which is morphing. Start the microphone or a music file and the sound pushes the dots in time with it. That is audio-reactive art.

Open Dither playground Start here

In this guide

  1. StartWhat you need, your first picture, and how to save it.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree pictures and the settings that made them.
  4. HelpWhat to do when something goes wrong.

It runs in your browser on a 2D canvas. It needs no WebGL, and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.