Dither playground guide

Every control

Every control in the panel, top to bottom. Dot min, Dot max, Spring, Damping, Interaction, Dot shape, and the Effects and Image morph sections show only when Level of detail is on Advanced. Effects, Audio reactive and Load and export start closed; tap their titles to open them.

Many sliders glide to a new value over a few frames instead of jumping.

Load and save

They stay at the top while the panel scrolls. Your pictures stay on this device for every lab tool until you press × on a tile. Reset puts the controls back: your picture, and a second image if you loaded one, stay.

Image AButton: Image A, the picture that becomes the dots. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. A new picture makes fresh dots; × brings back the sample.
SwapButton: Exchanges A and B: the second image becomes the dots, and the dots morph into the first.
Image BButton: Image B, the second image the dots travel to under Image morph. Press it to open one, or pick two at once. It is kept the same way as A; × takes the second image away.
Try the sampleButton: Loads the sample: the AIKIZI logo at 192 × 192 pixels, in place of your picture.
Save PNGButton: Saves the frame as you see it as dither-frame.png. See PNG.

Image

A line shows how many dots there are, how many frames a second are drawn, and the size the picture was read at.

Level of detail

Simple · AdvancedPick one: How much of the panel shows.

Simple: Hides the finer settings, Effects and Image morph. The page opens here.

Advanced: Shows everything.

Sampling

These four sliders apply as you move them. Grid step and Brightness make the dots again; Dot min and Dot max resize the dots in place.

Grid stepSlider · 1 to 8 · starts at 2: How many pixels apart the picture is read. 1 reads every pixel and makes the most dots; 8 makes the fewest. See grid step.
BrightnessSlider · 5 to 120 · starts at 40: How bright a spot must be to become a dot. Raise it to drop the dark parts; lower it to keep more. See threshold.
Dot minSlider · 0.2 to 2 · starts at 0.5: The size of the dots from the dimmest kept spots. See dot size range.
Dot maxSlider · 0.5 to 4 · starts at 1.5: The size of the dots from the brightest spots. See dot size.
ResampleButton: Makes the dots again from the picture with the Sampling settings above, and starts the animation clock again. Moving Grid step or Brightness remakes the dots without restarting the clock.

Physics

Radius, Push force and Interaction work in Still only. Spring and Damping work in every mode.

RadiusSlider · 30 to 200 · starts at 90: How far from your pointer, in pixels, dots are pushed.
Push forceSlider · 1 to 20 · starts at 7: How hard dots near your pointer are pushed. Sound uses it too.
SpringSlider · 0.01 to 0.15 · starts at 0.04: How strongly each dot is pulled back to its place. Higher snaps back faster. See spring.
DampingSlider · 0.5 to 0.95 · starts at 0.82: How much of its speed a dot keeps each frame. Higher lets dots coast and wobble longer; lower settles them sooner. See damping.
InteractionChoice: What your pointer does to nearby dots. Repel pushes them away, Attract pulls them in, and Swirl sends them around it. See repel, attract and swirl.
Dot shapeChoice: Draws each dot as a Circle, a Square or a Diamond. See dot shape.

Animation

Each moving mode runs in a loop: the dots break away, move for a few seconds, and fly home, then the loop starts again. At Speed 1 a loop takes 10 seconds in Curl drift, 12 in Three streams, 14 in Lorenz attractor and 15 in Golden spiral. Your pointer and sound move the dots only in Still.

Still · Curl drift · Three streams · Lorenz attractor · Golden spiralPick one: What moves the dots.

Still: The dots rest in the picture. Your pointer and sound push them. The page opens here.

Curl drift: The dots spin outward, drift on curl noise while two unseen points circle the middle and tug at them, then return.

Three streams: The dots split into three groups that circle the middle at different speeds and distances, stirred by curl noise.

Lorenz attractor: Each dot follows its own path on a Lorenz attractor, a looping path from a famous chaotic system. See strange attractor.

Golden spiral: The dots are pulled into curling arms built from the golden ratio and the golden angle. See golden spiral.
SpeedSlider · 0.2 to 3 · starts at 1: How fast the moving modes play. It does not change pushing in Still.

Color and glow

Dots take on the glow colour near your pointer, when sound pushes them, and in part of each Curl drift loop.

Dot colorChoice: The colour of the dots. Sampled keeps each dot's colour from the picture, White and Mint paint them all one colour, and Mono turns the picture's colours to grey.
OpacitySlider · 0.3 to 1 · starts at 0.85: How solid the dots are. Dimmer spots are always a little fainter than bright ones.
Mint · Violet · Pink · Coral · Cyan · Gold · WhitePick one: The glow colour: Mint, Violet, Pink, Coral, Cyan, Gold or White. Picking one also sets Custom color.
Custom colorColour · starts #10B981: Any glow colour you like. Picking one here clears the highlighted button.
Glow strengthSlider · 0 to 1 · starts at 0.6: How far dots shift towards the glow colour. At 0 they never change colour.

Effects

TrailSlider · 0 to 0.95 · starts at 0: How long moving dots leave streaks. At 0 (off) each frame is drawn fresh; higher keeps more of the frames before. See trail.
BackgroundColour · starts #08080A: The colour behind the dots, in the frame and in the saved PNG.

Image morph

Nothing here works until you load a second image: Blend, Auto and the presets all wait for it. The dots of the first picture then travel to places read from the second one, with the same Grid step and Brightness. See morphing and morph target.

Load a second imageButton: Opens a second picture for the dots to travel to: it presses Image B. The button then reads Second image loaded.
BlendSlider · 0 to 1 · starts at 0: How far the dots have travelled, from 0 (the first picture) to 1 (the second). Moving it by hand sets Auto to Off.
AutoChoice: Plays the morph for you. Loop travels to the second picture and back, over and over. Once travels there and stays. Off leaves it to Blend.
SpeedSlider · 0.05 to 2 · starts at 0.3: How fast Auto plays. At 0.3, one trip takes about half a minute.
Classic · Dissolve · Wave wipe · Explosion · Spiral · Gravity · Radial · Glitch · Cinematic · OrganicPick one: Sets Pattern, Stagger, Easing, Path, Path strength, Chaos, Chaos peak, Color change, Color offset, Size wave and Opacity dip in one go. See preset.

Classic: All dots move together along straight lines, easing in and out. The page opens here.

Dissolve: Dots leave in scattered order and fade on the way. See dissolve.

Wave wipe: Dots leave from left to right on wavy paths; colour changes first.

Explosion: All dots burst apart together, pass through white, then land.

Spiral: Dots leave in a spiral order on spiral paths while their colour turns around the colour wheel.

Gravity: Dots leave from the top down and sag on the way; colour changes last.

Radial: Dots leave from the middle outward on arcs, fading through black.

Glitch: Dots leave in scattered order, jitter and swell, and split their colour change by channel.

Cinematic: Dots leave in a diamond from the middle, on gentle arcs, through black.

Organic: Dots leave from the edges inward, circling the middle as they go.
PatternChoice: The order in which dots set off: all at once, a wipe from one side, a radial wipe, a spiral, clockwise, diagonal, a diamond, columns, rows, scattered or a checkerboard. It matters only when Stagger is above 0.
StaggerSlider · 0 to 1 · starts at 0: How spread out the start times are. At 0 every dot sets off together. See stagger.
EasingChoice: How each dot speeds up and slows down on its trip: steady, slow start, slow finish, both, sharp, springy, bouncing, or going past and coming back. See easing.
PathChoice: The shape of each trip: a straight line, an arc, going past the end, a spiral, a fall, a scatter, a loop around the middle, or a wave.
Path strengthSlider · 0 to 1 · starts at 0.5: How strongly the chosen path bends the trip. Straight ignores it.
ChaosSlider · 0 to 1 · starts at 0: How far dots are thrown off course part way through their trip. See chaos amount.
Chaos peakSlider · 0.1 to 0.9 · starts at 0.5: When in the trip the throw is strongest, from early (0.1) to late (0.9).
Color changeChoice: How colours change on the way: in step with the move, ahead of it, behind it, through black, through white, around the colour wheel (hue shift), one channel after another (chromatic aberration), or with a flash of the glow colour.
Color offsetSlider · -0.5 to 0.5 · starts at 0: Moves the colour change earlier (above 0) or later (below 0) than the move.
Size waveSlider · 0 to 1 · starts at 0: How much dots swell in the middle of their trip.
Opacity dipSlider · 0 to 1 · starts at 0: How much dots fade in the middle of their trip.
MatchingChoice: Which place in the second picture each dot goes to. Spatial picks a nearby one, Brightness sends dark dots to dark places and bright to bright, and Random sends them anywhere.

Audio reactive

Sound moves the dots only while Animation is on Still. The louder the chosen band, the harder every dot is pushed outward from the middle, with a little shake, and the more it takes on the glow colour. See audio-reactive.

Use the micButton: Asks the browser for the microphone and lets it push the dots; the button then reads Mic on. See microphone input.
StopButton: Shows while sound is on. It turns the microphone off, so the browser stops showing it in use, and stops the music file.
Choose a music fileButton: Opens a music file from your device; its name shows on the button, and Play and Pause appear. See audio file.
PlayButton: Plays the music file through your speakers and lets it push the dots.
PauseButton: Pauses the music file where it is.
SensitivitySlider · 0.5 to 5 · starts at 2: Multiplies the level the tool hears; the level stops at 1. Raise it for quiet sound. The Level line below the Band shows the result from 0 to 1 while sound is on. See sensitivity.
BandChoice: Which part of the sound pushes the dots: Bass (the lowest part), Mids, Highs or Full. See bass, mids, highs and frequency band.

Load and export

Image URLText: A web address of a picture to load. Press Enter here, or the button below.
Load the URLButton: Loads the picture at that address and makes fresh dots from it.
CopyButton: Copies the same picture to the clipboard. See clipboard.
Settle the dotsButton: Puts every dot straight back in its place and restarts the animation loop. Settings stay.

Reset

ResetButton: Puts every setting back to how the page opened, Simple view and Still included, and makes the dots again.