HEXADOME

VISITOR’S GUIDE · FOR THE CURIOUS & THE BUILDERS

Field notes from six living rooms.

HEXADOME is a fictional generative-art pavilion, but the works are real browser performances. The main page hangs six seeded <canvas> elements as museum works: each has an artist, label, edition seed, and reseed button. The interface stays gallery-white with hairline frames, Syne display type, Space Mono labels, quiet matting, and paper grain, so the colour belongs to the algorithms instead of the wall.

The six works, technically

  1. Ninety Thousand Rivers — curl-noise flow field

    FlowWork.step() moves 3,000 particles through the curl of seeded value noise from makeNoise3(). Three translucent Path2D inks accumulate over fiber marks, so the picture silts up like a river map.

  2. Maze Protocol — two-colour truchet tiling

    TruchetWork paints quarter-disc tiles in ultramarine and vermilion. A scheduled weather front rotates tiles by eased quarter turns; midpoint edges keep the maze continuous while it reroutes.

  3. Gravity Chorus — n-body trails

    OrbitalWork integrates five softened-gravity bodies with a centring spring. A faint carbon veil erases old marks while gold strokes use globalCompositeOperation='lighter' to braid luminous trails.

  4. Signal, Sea, Signal — 1-bit ordered dither

    DitherWork samples interfering waves, thresholds them against an 8×8 Bayer matrix, writes ink-or-paper values into ImageData, then upscales with smoothing off.

  5. Cell Garden — voronoi bloom, watercolor fills

    VoronoiWork lets drifting sites split and fade. clipHalf() cuts each polygon against perpendicular bisectors; wobbled edges and radial washes make the math pool like pigment.

  6. Reef Engine — space-colonization growth

    CoralWork.growTick() scatters invisible nutrients, finds nearest branch nodes through a spatial hash, extends toward the averaged pull, consumes reached nutrients, and thickens ancestors.

Page behavior lives in main.js: reveal timing, active room navigation, hover parallax, the reseed flash, and runPavilionReseed(), which sweeps through all six room buttons from the hero instrument. The master loop in works.js observes visibility, respects prefers-reduced-motion, and stops scheduling animation frames while the document is hidden.

Palette & type

GALLERY WALL
--paper #FAFAF7
INK
--ink #1A1A18
HAIRLINE FRAMES
--hair #DCDCD4
LIVE MARKER
--accent #E5574F
ROOM III GOLD
--gold #E0B45E
DISPLAY TYPE
Syne 700–800
LABEL TYPE
Space Mono 400/700
ART COLOURS
carried by the works only

Museum matting is CSS: .frame__mat supplies the white border, shadow, and inner measuring line, while .frame__window adds the inset bevel. Labels keep the fiction grounded with artist, title, medium, year, and edition seed.

Reproduce this

PROMPTING NOTES

Prompt for a gallery, not a demo reel: “Build a single-page generative-art pavilion in pure HTML/CSS/JS. Use a gallery-white field, hairline frames, Syne display type, Space Mono labels, and six live seeded canvas works: curl-noise flow, rotating truchet maze, gold n-body trails, Bayer-dither waves, splitting voronoi watercolor, and space-colonization coral.”

Then require museum behavior: invented artists, medium “algorithm, canvas,” visible seed numbers, reseed buttons, CSS matting, short statements between rooms, reduced-motion stills, and animations that pause off-screen and when the tab is hidden.

⟵ BACK TO THE PAVILION