Flip-Dot
The flip-disc sign from buses and stations. Every disc swings over, hits its stop, bounces and latches, so each message arrives as a clattering wave. One sign, or a board of them.
What it is for
A readout that is an object: a departures board, a live clock or scoreboard, a venue marquee, a status sign, or a hero the visitor writes on.
Everything you set here is what the Code and Prompt tabs give you.
Seats open in 11 days. Want one email that morning?
Datasheet
- Mechanism
- Latching disc physics, Scheduled wave, Banded line waves, Per line and column layout, Ray cast sprite atlas, Baked motion blur, Progressive sliced baking, Glass reflection layer, Lamp lit mount, Dirty cell redraw, Bitmap type, Sleeping loop, Synthesised clatter
- Stack
- Vanilla ES modules, CSS, Canvas 2D
- Needs
- Nothing, no dependencies
- States
- 13 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restEvery disc latched against its stop; the loop is asleep and requests no frames.
- Writing inThe first time the sign comes into view it starts dark and writes its message with the wave.
- Changing messageOnly the discs that differ flip, in a sweep, diagonal, ring or scatter that starts at the first change; each lands, rebounds and latches.
- MarqueeHolds the start of the message, then scrolls it a column at a time; stops while the pointer is over it or when paused.
- ClockHH:MM from the local time; the colon flips every second and the digits change with the wave. The accessible name updates once a minute, silently.
- DrawThe pointer inverts the discs it passes; each flips back after the configured time, in the order it was written.
- A board, one line at a timesetLine(i, text) rewrites one line with a wave confined to its rows; the other lines hold, or finish their own wave. Each line (and each tab-separated column) can carry its own alignment, face and disc paint.
- Glass coverOn by default: a 2.2 % veil and a reflection band with a firm edge and a soft tail on the lamp side, broken up by low-frequency unevenness, faded in under the bezel lip.
- MountedHanging from two drop rods (ceiling flange, rod, clevis, tab, bolt) or bolted to the wall on four flat brackets with their shadows; all per pixel from the same lamp. The object grows by its mount in percentage padding.
- RebuildingA resize, a colour, a lamp or a mount change is baked in 8 ms slices between frames (no task over 50 ms); the old picture stays up until the new one swaps in whole. A high-density first paint is a half-resolution draft, sharpened a moment later.
- Mode taken oversetFrame() on a marquee or clock turns it static and dispatches a bubbling flipdot:mode event; the preview writes it back to the lab, so the Mode control stays true.
- Off screen or hiddenThe loop pauses and the wave's clock stops; a returning tab cannot launch a disc with a long frame.
- Reduced motionThe message on the first paint, every change an instant swap, no frames requested; a marquee becomes pages of whole words.
Notes
Lines can be aligned, painted and rewritten one at a time; the message stays plain text for assistive technology; only the discs move.
Original. Taken from the physical flip-disc sign, not from a catalogue reference, so references is honestly empty. Both bitmap faces were drawn for this piece; Canvas 2D only, every surface (discs, housing, glass, mount) shaded per pixel from one lamp, so no image or font ships. Presets: Now boarding, Platform 2, Night bus, Station clock, Write on it.
Anatomy
Latching disc physics, Scheduled wave, Banded line waves, Per line and column layout, Ray cast sprite atlas, Baked motion blur, Progressive sliced baking, Glass reflection layer, Lamp lit mount, Dirty cell redraw, Bitmap type, Sleeping loop, Synthesised clatter
Usage notes
A readout that is an object: a departures board, a live clock or scoreboard, a venue marquee, a status sign, or a hero the visitor writes on. Lines can be aligned, painted and rewritten one at a time; the message stays plain text for assistive technology; only the discs move.
Options
| Option | Type | Description |
|---|---|---|
| text | text | A | starts a second line. Letters, digits and . , : ; ! ? - + / ( ) & # % = @ * £ $ ° → ← |
| mode | enum | Static holds the message; marquee scrolls it; clock shows the time; draw lets the pointer write on the sign. |
| font | enum | Auto takes the large one when the message fits. |
| align | enum | Align |
| align2 | enum | A board sets each line on its own: a destination left, a platform right. |
| cols | number | Columns |
| rows | number | Rows |
| disc | enum | Disc colour |
| disc2 | enum | The board’s fitting: the rows of the second line and after carry discs of another colour. |
| finish | enum | Auto follows the page: brushed steel round the sign on a light finish; on Graphite, Black, Phosphor and Night, drawn in that finish’s own light (anodised metal with a bright cut edge, black glass traced in a display’s glow, dim metal lit from inside). |
| glass | boolean | A faint veil and a reflection band placed by the lamp. |
| mount | enum | Hanging from two drop rods, or bolted to the wall on flat brackets. The object grows by the mount. |
| wave | enum | The order the discs flip in when the message changes. |
| waveSpeed | number | Wave speed (columns/s) |
| bounce | number | How far a disc rebounds off its stop. 0 latches dead. |
| light | number | 0 is from above, clockwise. |
| marqueeSpeed | number | A disc takes about a tenth of a second to turn. Past ten columns a second the letters are still turning when the next step comes, as on a real sign. |
| persistence | number | In draw mode, how long a stroke stays before its discs flip back. |
| intro | boolean | The sign starts dark and writes its message the first time it comes into view. |
| sound | boolean | Synthesised, no audio file. Plays only after you have touched the page. |
Methods
- update
- setText
- setLine
- setFrame
- replay
- pause
- play
- state
- message
- destroy
How it works
Original. Taken from the physical flip-disc sign, not from a catalogue reference, so references is honestly empty. Both bitmap faces were drawn for this piece; Canvas 2D only, every surface (discs, housing, glass, mount) shaded per pixel from one lamp, so no image or font ships. Presets: Now boarding, Platform 2, Night bus, Station clock, Write on it.