ASCII Flow

Ours Iris Lab

Studied 2026-08-202D canvas, one fillText per cell per frame. No libraries.

The lab index has a background made of characters. It looks like falling code and it is nothing of the kind: there is no rain, no stream, and nothing per-character is animated. A handful of soft shapes drift behind a fixed grid, and every cell asks the same field how bright it should be. The characters are a readout, not a subject. This study takes the field apart, then puts the grid back and shows what the alphabet is actually doing.

1 · The field is the animation

Four kinds of soft body drift across the page: circles, triangles, hexagons and spirals, each returning an influence in 0..1 for any point, blurred at its own edge. Switch the readout to see the field directly. The grid never moves; only what it is sampling does.

Read this: turn the bodies down to one and the illusion collapses into what it is, a blurred blob crossing a fixed grid. What makes the live version read as weather is overlap: several soft fields summing where they cross, at edges no single body has. Untick dark for what the page actually ships: the same field run between about 0.03 and 0.25 alpha on paper, because it lives underneath text.

2 · The alphabet is a ramp, or it is texture

Same field, two different jobs for the characters. Ordered by ink coverage, the alphabet is a greyscale ramp and the grid becomes an image. Picked at random from a set, the same grid becomes texture: you read movement and colour, and no shape at all. The lab background wants the second. Most ASCII art wants the first. They are one line apart.

Read this: on the ramp, the cell size is the resolution, and wound all the way down the field is legible as a picture. On the random set, resolution stops mattering and churn takes over: at zero it is a still pattern, past about three it is noise. The lab runs it near one, which is slow enough to look like something settling.

3 · Arriving, not switching

Every cell keeps its own current opacity and colour and eases toward the target each frame. That single lerp is the difference between a field that breathes and a field that flickers. Push the pointer through it: the disturbance goes into the field, so it is answered by the same code that answers the drifting bodies, with no special case anywhere.

Read this: at ease 1.00 the cell has no memory and the pointer leaves a hard, jittering hole. At 0.08 the same data becomes a wake. Nothing about the field changed; only how fast a cell is allowed to agree with it.
Source. The background of theIris Labindex, which is ours. This page is not a rebuild of it so much as a dissection: the same influence-field idea, pulled out of the page it hides behind and given knobs, so the parts that were doing the work can be seen doing it.

What it actually does

  • Four body types — circle, triangle, hexagon, spiral — and each one answers exactly one question: how much of you is at this point, from 0 to 1, with a soft edge. Nothing else about a body reaches the renderer, which is why a fifth kind would cost one function and no changes anywhere else.
  • The blur is per body, not a post pass. Each shape returns 1 inside, 0 outside, and a linear ramp across its own blur band, so the softness costs nothing and every body can have its own.
  • Colour waves, ripples and pointer particles are the same interface as the shapes. They are not effects layered on the field, they are more of the field, which is why the pointer disturbance needs no special case.
  • The cell keeps its own current opacity, hue, saturation and lightness, and eases toward the target every frame. The eased values are what the fabric is made of.
  • A cell that has picked a character holds it for a couple of hundred frames, then only releases it on a low-probability roll once the influence has gone. Without the lock the grid strobes.
  • The spiral is the only body whose influence is a distance to an arm rather than a distance to a boundary, which is why it reads as motion even when it is standing still.
  • The live version runs the whole thing between about 0.03 and 0.25 alpha, because it sits underneath text. Almost all of the design is in a band you can barely see.

What the rebuild taught

  • The alphabet decides what the grid is for, and it is a one-line difference. Ordered by ink coverage it is a greyscale ramp and the grid becomes an image; picked at random from a set it becomes texture, where you read movement and colour and no shape at all. This background wants the second and most ASCII art wants the first.
  • Overlap is what makes it read as weather. One body crossing a grid is visibly one blurred blob; the illusion needs several soft fields meeting at edges that no single body has.
  • The per-cell ease is the whole feel, and it is worth leaving as a per-frame lerp in the study even though per-second would be more correct. At 1.0 the cell has no memory and the pointer punches a hard jittering hole; at 0.08 the same data becomes a wake.
  • Cost is in fillText, not in the field. The influence sum is cheap arithmetic; the readout is thousands of individual glyph draws per frame, so the cell size is a performance control disguised as a design control.
  • Any character grid is secretly a resampling problem. Cell width and line height set the sampling pitch, and a field with detail finer than the pitch does not blur, it aliases into flicker.

Rebuild

Three figures: the field with a readout switch that shows the influence directly instead of the characters, a quantisation figure that swaps the alphabet between a density ramp, a random set and a single mark, and an easing figure where the pointer drops bodies into the field rather than drawing anything itself. Not a rebuild so much as a dissection: the same idea pulled out of the page it hides behind and given knobs.

Primitives

Flow fieldOne continuous field that everything samples, so unrelated objects agree about the world for free.
Symbol quantiseA continuous field read out through a fixed grid of discrete marks. The grid is the resolution; the alphabet decides whether it reads as a picture or as texture.
Glyph fieldText broken into individually addressable characters with a home and an away position.
SpringDamped follow. Nothing snaps, and stiffness/damping carry most of the perceived personality.
SchedulerJittered periodic events. What makes a thing feel alive when nobody is interacting with it.
Pointer gazeContinuous, saturating response to pointer position rather than discrete hover states.

Where it lives

lab.iriscocreative.com