Pico-8 Bach Inventions Effects ~ Day 7: Texture Generation (Patreon)

Hi everyone!

Today's portrait features fancy 3D brick walls! Those brick walls (forget the 3D) have been procedurally generated and that's today's subject!

Generating 'pixel-art' textures is a really interesting thing to do and it rests on one of my favorite types of procgen, linear procgen! I wrote a whole Doodle Insights about linear procgen a while ago, and I think you should read it after this post if you're interested!

As in any good example of linear procgen, we have a starting point, which is a blank screen, an ending point which is a mossy brick wall texture, and a bunch of steps to get from one to the other.

We will identify every one of them but first, here's a gif where all the steps happen one after the other:

The first thing we do is clear the screen with our brick color, here brown(4).

Then, for every group of 4 horizontal pixel lines, we draw a line-up of bricks of random widths. Everything is in the lighting effect here! According to where your light source is, you should have two lighter sides and two darker sides on each brick.

Here, we consider that the light comes from the upper-left, so for every brick we draw one line on the top and one on the left side of the brick in white(7) and then on the bottom and on the right side of the brick in dark purple(2). We leave out the upper-right and lower-left corners, as they are the intersections between light and dark.

After the whole screen has been covered with bricks, we want to add some character to this texture! Let's make it look old and worn-out.

All we have to do here is set random pixels on the screen to our original brick color, so as to make the lighting look more irregular. Put that in a 'for' loop and crank it up to the desired level of decay. Here we're doing it on 3000 pixels. (not checking if they're different pixels every time though)

Finally comes the moss! It can be really cool to have small elements of a very different color in a texture, as long as it looks coherent! This is what we're aiming for with our moss here.

In another 'for' loop, we'll take random pixels again and we'll look at their color. If they're already mossy pixels, (green or dark green) we make its neighbor pixels mossy as well, with the other moss color. (green -> dark green, dark green -> green)

If the random pixel we chose is not mossy then there's a small chance (rnd(200)<1 here) that we make it mossy anyway, and its neighbors with it, otherwise nothing happens.

Again, give this loop as many iterations as you want moss. Here I'm using 'i=0,9999', which is a lot, for not so much moss, and that leads me to my last point...

This is obviously not the only way to get to that result. The moss generation could have been done in two separated steps, a seeding step and a growing step, for example. But also you might have tried with hexagonal bricks, or you might have tried and accentuate the lighting effect more... Every step can be modified individually and any step can be added in at any moment, always giving you new interesting results; that's the beauty of linear generation!

Again, if you found this interesting, I recommend you take a look at the Doodle Insights about linear procgen!

That's it for today though! Do ask any question you might have and do click the little heart icon if you enjoyed this post! It might seem a useless click to you but it's actually very nice for me to see and quite motivating!

As usual, the downloads for this portrait are available to my 5$+ supporters over there!

Thank you for reading!

Take care!

TRASEVOL_DOG