loading...
Cover image for Marching Squares - Animated Steps

Marching Squares - Animated Steps

sketchpunk profile image SketchPunk ・2 min read

Here is an example of Marching Squares. This sample animates as the algorithm steps through the grid to determine how much of a cell is inside and outside of the circle constraint.

The main idea is that each of the four corners of a cell is assigned a bit wise value, like 1,2,4,8 which then you sum those values which will to determine what to draw in that cell.

Once you sum up the corners that are active, that value is the index of some sort of array that contains our 16 possible ways to draw the cell. In the title image, the bottom left corner is the only active point, so we get a total value of 2. From there, we just look up in our array for the build instructions for 2.

When it comes to marching squares or its 3D version, Marching Cubes, how to draw a cell an be defined in any way that makes sense to your game/application. There are sets out that you can use that will draw specific things. In this example, its a very simple set where each possibility has a collection of mid points on edges to use. So for the title image, value 2 means to take the mid point of the left and bottom edge then draw a line between them. There is a set for marching cubes as well, which define 255 possible ways a cube can be used to determine where to draw 1 or more triangles within the constraint of that one cubic cell.

[Demo]
https://sketchpunk.bitbucket.io/src/2d/003_marching_squares.html

[Source]
https://bitbucket.org/sketchpunk/sketchpunk.bitbucket.io/src/master/src/2d/003_marching_squares.html

[Related Links]
https://www.boristhebrave.com/2018/04/15/marching-cubes-tutorial/

Posted on by:

sketchpunk profile

SketchPunk

@sketchpunk

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

Discussion

markdown guide
 

So the practical application of this is to use a center point to determine an area impacted by an action?

 

Marching spares / cubes? Its a way to render voxels. In this case, 2D voxels. Here's another one of my examples of using noise to enable/disable points on the grid, then using marching squares to render each cell. Now it looks like procedural generated cave system.

sketchpunk.bitbucket.io/src/2d/003...

 

Oh that's pretty cool! Thanks for the explanation!

 

Is the demo working for anyone?

 

I'm using ES2020 features in this example, that means it'll only run in the latest chrome. Firefox will catch up at some point. Sorry.