The algorithm behind procedural terrain, animated with the third dimension of a Perlin noise field as time.
| Platform | Engine | Project |
|---|---|---|
| Web browser | Javascript, p5.js | Individual project |
Marching squares is a computer graphics algorithm that can be used to procedurally generate terrain in video games. It uses a two-dimensional scalar field, which is really just fancy words for a 2D array of random values. Each point in the 2D array is assigned a float value between 0 and 1.
Based on this value (rounded to an integer), 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 in the image below.
Drawing lines in the centre of the checked rectangles based on these rules creates an outline, which can then be used to generate 2D terrain or maps. Using Perlin noise, I generate the animation with the 3rd dimension of the noise as a time dimension.
The following videos inspired me to make this project: The Coding Train - Coding in the Cabana 5: Marching Squares, and Sebastian Lague - Procedural Cave Generation (E02: Marching Squares).
Want to work together?
marc.kletz@kletzgames.com