Sine Dot Grid turns a pair of one-dimensional sine waves into a two-dimensional displacement field. The same field produces different visible behavior depending on how each sampled value is interpreted.

Displacement Mode

field(x,y) = sin(2pi fx x + phase) * sin(2pi fy y + phase)

Type
Toy note
Status
Active toy note
Published
2026-05-01
Canonical URL
https://shanecurry.com/lab/toys/sine-dot-grid/
Related project
ChewGum Animation
Implementation
Inline canvas toy; no external runtime or uploaded data

The yellow curve across the top shows the horizontal sine wave. The magenta curve along the left edge shows the vertical sine wave. Each dot samples both waves, multiplies the results, and then moves or changes size according to the selected mode. Yellow dots are positive field values, magenta dots are negative field values, and white dots are near zero.

Procedural animation often begins as a small rule, not a finished picture. This toy keeps the rule visible: change frequency, amplitude, density, or interpretation mode and the surface changes without changing the underlying grid.

Field formula
field = sin(2*pi*freqX*x + phase) * sin(2*pi*freqY*y + phase*0.73)
Y mode
Moves dots up and down only by the multiplied field value
XY mode
Moves X by the horizontal sine and Y by the vertical sine before coloring by their product
Radial mode
Pushes each dot toward or away from the canvas center according to the field
Size mode
Keeps positions fixed and maps the field value to dot radius
Frequency controls
freqX and freqY range from 1 to 8 cycles across the grid
Dot count
8 to 54 columns; rows are derived from the stage aspect ratio
Animation
Speed changes phase drift only; it does not alter the sampled grid positions
Color mapping
Yellow means field > 0; magenta means field < 0; white means the multiplied field is close to zero
Rendering bounds
Dot centers are kept inside the plot border, with radius accounted for, before the clip mask prevents spill into the sine-guide bands
  • This page is a public rewrite of a private March 2026 Sine Dot Grid prototype.
  • The original prototype tested frequency, amplitude, grid density, row spacing, and four displacement modes.
  • This public version keeps the four modes, exposes the main controls, and uses only inline browser canvas code.
  • Related toy: Stroke Chime, another toy where a sampled mathematical path changes the visible and audible output.

ChewGum Animation

Shane Curry, "Sine Dot Grid," https://shanecurry.com/lab/toys/sine-dot-grid/, published 2026-05-01.

The dots are not a picture of the math. They are the math, sampled into little moving decisions.