Marching Squares with p5.js

Marching Squares with p5.js

The marching squares algorithm is a computer graphics algorithm for creating contours/boundaries based on underlying grid values. It’s a really fascinating algorithm with tons of uses in procedural generation. It’s also really simple to implement! This implementation uses OpenSimplex Noise.

Note: the page can be slow when loading these simulations so it’s better to look at them individually (and checkout the various settings you can tinker with): (1) non-interpolated, (2) interpolated, (3) metaballs.

I first started with a non-interpolated version of the algorithm to see all the possible boundaries in action. If you go into the editor, you can enable and disable various settings to see the distribution below or the squares. You can also take a snapshot of it and use it in 2D world generation (such as generating cave structures).

The interpolated version makes everything look much smoother and natural. Using the interpolated version and adding shapes instead of noise, we can use the marching squares algorithm to generate Metaballs!

Avatar
Amrit Amar
Data Engineer

My research interests include data design and engineering, virtual/augmented reality, artificial intelligence (particularly alignment), computational neuroscience, and evolutionary algorithms.