Skip to main content
Back to discovery

Live preview recorded from Bakai Lab; experiment and demo by Bakai Tolondu uulu. Preview: platform recorded · rights authorized.

ComponentDemo Only

Op grid

An operational grid experiment with layered cells, responsive pointer states, and smooth spatial transitions.

LSource LandLab - Bakai Tolondu uulu

Why it stands out

An operational grid experiment with layered cells, responsive pointer states, and smooth spatial transitions.

Prompt

Build a looping op-art grid in a canvas. This one is "Round": Placeholder text again, long enough to wrap onto a third line and show the leading.

Every tile is a square WINDOW with a single straight edge across it. That is the whole
vocabulary — triangle, trapezoid, sliver and solid block are all just the square clipped
by a half-plane, so the only two things that ever change are the ANGLE of that edge and
its signed DISTANCE from the tile's centre. Clip with Sutherland-Hodgman against the one
line, and use CIRCULAR windows, where the visible shape is the arc within acos(d/h) of the normal closed by its chord.

THE REST STATE
At rest every edge points straight back at the centre of the grid: the edge lies ALONG the radius, so the normal you feed rotate() is the radius turned a quarter (atan2(dy,dx) + PI/2). That reads as a starburst.

THE MOTION
Every tile takes the SAME short turn, but the window when it happens sweeps across the grid, scheduled so the last tile finishes exactly on the wrap. It reads as a front travelling through, not as the whole surface winding up. The delay is linear in radius: the centre leads, the corners trail.

THE OFFSET
The edge also slides along its own normal, one cycle per loop, with the phase gained by radius. Without it the still frame is a plain sunburst; with it the tiles break into rings of heavier and lighter black. Amplitude is damped toward the centre so the middle stays legible,
and no tile should ever saturate to solid.

SEAMLESSNESS IS THE CONSTRAINT. Every law has to return to its start at tau=1 or the loop
visibly clunks: turns are whole numbers (a half turn maps a half-plane onto its own
complement and wraps with a black/white flash), ripple counts are whole numbers, and a
spring has to be normalised to land exactly on 1 because a spring only asymptotes.

Settings for this variant, against a 10x10 / 0.19-gutter baseline:
  shape: "circle",
  motion: "cascade",
  dur: 0.22,

Watch out for:
- Put the origin ON a tile, not on a gutter, or an even tile count gives a 4-way seam.
- Batch every tile into ONE path and fill once. They are all the same colour.
- Ease in-out, because the tiles are MOVING on screen rather than entering or leaving.

Discovery vocabulary

Related by governed terms

Continue comparing

More from Lab - Bakai Tolondu uulu