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.
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):
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.
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?
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.
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.