Marching Squares



  • Web browser
  • Javascript
  • Individual project

About Marching Squares

Marching squares is a computer graphics algorithm that can be used to procedurally generate terrain in video games. It uses a two-dimensional scalar flied (which is really just fancy words to say a 2D array of random values). Each point in the 2D array will be assigned a float value between 0 and 1. Based on this (rounded to integer) value, four points are checked (a, b, c, d - from the top left corner clockwise around the rectangle). From this 15 unique cases emerge (really only 14 because 0 and 15 are the same but whatever). Each case is depicted on the bottom image. Drawing lines in the center of the checked rectangles based on these rules will create an outline which can then be used to generate 2D terrain or maps. Using a perlin noise, I generate the animation with the 3rd dimension of the perlin noise as time dimension.
img not found

The following videos inspired me to make this project:
The Coding Train: Coding in the Cabana 5: Marching Squares
Sebastian Lague: Procedural Cave Generation (E02. Marching Squares)

Contact me

Please reach me at if you want to get in touch.