Building the Dot Matrix Globe
From Natural Earth TopoJSON to a theme-reactive, 60fps canvas globe — ~8,000 dots plotting the Earth as ambient generative art.
The dot matrix globe started as a map visualization experiment — can you represent geography without borders? Just dots, density, and light. The answer turned into the ambient heartbeat of the homepage: a rotating wireframe Earth made of ~8,000 points, each one tested against real land boundaries.
This thread tracks the build from first render (Poisson disc sampling, orthographic projection) through performance optimization (Float32Array, DPR-aware canvas) to the design decisions that made it feel like a mood piece rather than a tool — no scroll-zoom, theme-reactive colors, and a crimson origin star that pulses at the center.
Timeline
Got the first render of a dot-matrix globe tonight. Parsed Natural Earth TopoJSON coastlines, generated point distributions inside landmass polygons using Poisson disc sampling, then projected lat/lng onto a sphere with d3's orthographic projection. The tricky part was dot density — too few points and continents look sparse, too many and it's just a solid blob. Poisson disc sampling with a minimum spacing parameter solved it. Rendering ~8,000 dots per frame on Canvas 2D, rotating smoothly. Looks like a wireframe Earth made of static noise. I like it.
The globe was stuttering on every rotation tick — garbage collection pauses. Switched the point storage from a plain array of objects to a flat Float32Array. No more GC pressure during animation. Also made the canvas DPR-aware so retina screens get crisp dots instead of blurry upscaled ones. The render loop runs via requestAnimationFrame now with proper cleanup on unmount. Consistent 60fps with 8,000 points. The difference between "demo" and "ship it" is always the boring performance work nobody sees.
The globe needed to respond to the site's dark/light toggle instantly — no flash, no re-mount. Built a custom themechange event that the ThemeProvider dispatches when the toggle fires. The canvas listens for it and swaps colors in the next animation frame. Land dots, ocean dots, graticule lines, the crimson origin star — all theme-reactive without destroying and recreating the canvas. Also made the design decision to keep it ambient: no scroll-zoom (it would fight page scrolling), offset-right positioning to leave room for the hero headline. It's a mood piece, not a tool. The globe breathes behind the text.