A procedural shaded-relief cartographer's table; export the map as PNG.

I built this project to test A procedural shaded-relief cartographer's table; export the map as PNG. The core engineering challenge was sustaining uncompromised 60 FPS rendering using Canvas2D while handling continuous user interaction without framework overhead.

WHAT I WAS TESTING: I focused on two core engineering benchmarks:

Real-time topographic contour line extraction using Marching Squares

Mountain ridge carving and hydrographic river basin generation

THE TECHNICAL SIDE: Combines domain-warped fractional brownian motion (fBm) with Marching Squares contour generation. Renders vintage parchment styled topographic maps with seeded coordinates. Everything executes in the browser using Canvas2D, Procedural Cartography, Contour Line Marching Squares. No third-party frameworks, no heavy runtime bundles, and zero external tracking.

WHAT I LEARNED: Contour line marching squares often generated disconnected micro-segments. Stitching adjacent line segments into continuous polyline paths allowed smooth canvas stroke rendering. Finding the sweet spot between mathematical precision and frame budget took careful profiling, but the result runs at a steady 60 FPS even on modest hardware.

TRY IT YOURSELF: The live build is deployed on Netlify. Open it in your browser, test the controls, and observe the render response times.

If you are building high-performance 3D, physics, or creative web systems and want to collaborate, reach out here on Contra.

Really nice map detail