Home▸Algorithms & AI▸Marching Squares Contouring (2D)

🔲 Marching Squares Contouring (2D)

A 2D Canvas implementation of the marching-squares contouring algorithm: drag metaballs, sweep an isovalue threshold, and watch the 16-case lookup table build smooth interpolated contour lines over a live scalar-field heatmap.

Algorithms & AI2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

⚙ Under the hood

A 2D Canvas implementation of the marching-squares contouring algorithm: metaballs generate a scalar field, each grid cell's four corners are classified against an adjustable threshold into a 16-case lookup table, and edge crossings are linearly interpolated for smooth contour lines. Toggle the grid-cell view and field heatmap to see the algorithm at work.

algorithmsmarching squaresisocontoursscalar fieldmetaballs2D

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install