Welcome to our first procgen tutorial! In this tutorial we'll be introducing a very simple process that works on pixels, the most primitive of all image data. The only thing you need to know is that the screen is made up of a grid of pixels! Let's get to it.

Seeding the canvas

First let's seed the canvas where every pixel gets a random gray value between white and black. Numerically black will be 0 in our color scheme, and white will be 255. If every pixel gets a random value in 0 to 255 we get the following (click to rerandomize):

Neighbor swapping

Now that we have some data in pixels, we can change them over time. The rule that we will start with is very simple: at each time step every pixel (not on the border) looks at its four neighbors and changes itself to have the color of the pixel it chose. Click to restart:

See the Pen Diffusion Procgen site by George Hoqqanen (@hoqqanen) on CodePen.

What can we change? [Pause here]

This process doesn't seem like it has too many parameters, but there are always ways of extending an idea. Take a couple minutes to think of the ways you could edit this process. Once you run out of ideas, look ahead for some variations.


We could use random colors instead of black and white, or we could choose among a palette.


So far we've been using randomness to start. What if we started with a predetermined pattern?

Slanting movement

So far we've been choosing one of the four directions (NEWS) at "random", but really this meant where each direction had an equally likely chance of being chosen. What if we skew the odds, so that it's more likely to pick the North or West neighbor? Modify the relative probabilities to create different effects.

See the Pen Diffusion Procgen site gui by George Hoqqanen (@hoqqanen) on CodePen.

More Variations

See if you can tell what the variations below are doing. It might help to read through the code.

See the Pen Diffusion Variants by George Hoqqanen (@hoqqanen) on CodePen.