Generative Assets · Wave 7 — Chance · 161
Two kinds of random, side by side. Uniform scatter clumps — it leaves knots and voids because every point ignores its neighbours. Poisson-disk sampling forbids any two points from sitting closer than a set radius, so the same randomness spreads evenly. It is the reason retinal cones, sown seeds and good dithering never bunch up.
POISSON is a fictional study piece for a design-mathematics studio — a single slab of stars you can inspect and morph. Its one job: make the difference between uniform randomness and blue-noise randomness undeniable in a single glance, then let you scrub between the two so the clumping visibly dissolves. At rest it sits on the blue-noise field, gently turning, so a still frame already tells the story.
Same point count, same random seed — only the rule differs. The left set draws each point independently; the right refuses any point that lands within a minimum radius of another.
A night sky is the honest ground for a point field: near-black so a single luminous dot registers, and so additive glow reads where points overlap. The two field colours are the argument itself — a cool inert grey for indifferent uniform scatter, a living teal for the considered blue-noise.
The ground. Dark enough that overlapping points bloom, so clumps read as bright knots.
Cool, unhelpful grey — the colour of randomness that never checks its neighbours. A line/mark tone only.
Teal for the evenly-sown field. Bright — reserved for marks and the measurement number, never body text.
The reading ink. Body copy steps down to #AEB8C6 / #8894A4, all safely past 4.5:1 on night.
Sora carries the display voice — a geometric grotesque with a scientific evenness that suits the subject, set at 600 for the wordmark. Space Mono handles every number and label: the metrics, the slider ends, the colophon — tabular figures so the nearest-gap and clumping readouts tick without reflow.
Built with React Three Fiber — the declarative React renderer for three.js — loaded with no build step through an ES-module importmap (react, react-dom, @react-three/fiber, @react-three/drei from esm.sh, three from jsdelivr). Markup is written with htm tagged templates instead of JSX, so a single inline module compiles in the browser. The ?external= params on the drei/fiber URLs force one shared three/React singleton.
Instances pool of ~690 spheres; the blue-noise set is generated with Bridson's Poisson-disk algorithm (a spatial grid rejects any candidate inside the minimum radius), the white-noise set is a plain seeded uniform draw.Drove the morph both ways and read the rendered result. Added top/bottom scrim gradients and a colophon text-shadow so the mono labels never sit unreadably over the animated field (the collection's recurring small-text-over-texture failure). Removed two decorative background radial glows that competed with the point field's own additive glow — the field should be the only light source.
Enriched the signature: gave every point a small staggered easing offset so a toggle looks like the field settling, not a rigid slide. Confirmed the second-read detail — additive-blend hotspots where uniform points overlap — so the clumping is felt as brightness. Kept the autorotate slow (0.42) so the slab breathes rather than spins.
Verified 375px (no overflow; nav and wordmark inside the viewport), the prefers-reduced-motion path (autorotate off, a settled static blue-noise frame, toggle still functional), :focus-visible rings, DPR capped at 2, render paused on document.hidden, and a WebGL context-loss fallback that swaps to a CSS star-field. Final copy read.
react/jsx-runtime was mapped (drei imports it). The vanilla-three fallback was prepared but not needed.