Day 54. Dots ⚫⚪
Sometimes a globe doesn’t need extra geometry to feel new, just a different logic for how pixels become structure.
For Day 54, I built an animated Earth where custom GLSL shading transforms a standard texture into a dynamic dot field. Continents remain recognizable, but their surface shifts into a pulsing halftone-like language.
The idea was to keep cartographic context while adding a procedural layer in the fragment shader. Around 100,000 points are distributed across the sphere and masked by a land texture, turning the surface into a structured pattern instead of a flat fill.
Ripple markers and curved arcs connect random points over time, turning the globe into a small generative system.
The main challenge was controlling visual noise and avoiding Moiré artifacts. Smoothstep anti-aliasing and scale layering keep the pattern stable across rotation and zoom.
Inspired by experiments on the Three.js forum, this sits between map rendering and generative design, showing how geographic data can stay accurate while the visual language becomes more experimental.
Live demo: Dots
The project
| Piece | Role |
|---|---|
| Stack | Three.js + WebGL + custom fragment shaders |
| Density | ~100,000 points masked by land texture |
| Motion | Ripple markers + curved arcs over time |
| Challenge | Noise control and Moiré via smoothstep AA |
How to follow
- Blog: blog.maptheclouds.com
- LinkedIn: Day 54 post
- Live demo: Dots
- Hashtag: #100DayMapChallenge
#100DayMapChallenge · Day 54/100 · LinkedIn
Previous: Day 53: AsgardMap
Next: Day 55: Biker Santa