Cover image for Marching Squares - Traversing Noise

Marching Squares - Traversing Noise

sketchpunk profile image SketchPunk ・1 min read

In a previous post I showed off an example of marching squares, where the process of how the algorithm works had an animation that step through to help visualize how it works.

This one is more of an idea of how someone can use marching squares. The idea is still the same, you have a grid of points and you traverse through it as 4 point cells. In this example, before I render any of the cells, I loop through by passing its X,Y value to a 2D Perlin noise function. With the resulting value I then use a glsl like "step" idea where for example if the noise is over 0.4, it equals 1 else 0, which I use as a way to set a point as ON or OFF.

So with a grid of points that are ON/OFF, let marching squares do its rendering thing and as the results you kind of get this 2D cave system. If you use the WASD keys on your keyboard, you can actually walk through the noise function.

Hopefully this is a nice example to help people get started with the idea of procedurally generated content.

[ Demo ]

[ Source ]

Posted on by:

sketchpunk profile



10% luck, 20% skill, 15% concentrated power of will. 5% pleasure, 50% pain, And a 100% reason to remember the name.


markdown guide

Noise generators are just interesting to build your maps. A friend of mine ended up using one to create variance in his 3d terrain.

I've always been interested in dynamically generated maps, when I was first dabbling with games without using any engine I just made a bunch of nodes and randomly linking them together to make a text dungeon crawl. As you mentioned this creates kind of a 2D cave system. I can see this making a lot of dead ends or unsolvable routes. How would you propose altering this to create a deterministic path; just make one and start ripping out walls or is there a more calculated way to tackle it?


Just remembered, Wave function collapse is a good algorithm where you can set specific parts and then you can use it to fill in the remaining area based around the starting tiles that have been placed.


I think the simple solution I saw in the past was that you use some algorithm to generate a path or two, that becomes fixed, then you can just fill in the rest of the map around it. Also gives you a chance to put other static things you want in certain places before you fill up the space.