Pixel pattern generator

I was wondering what could be a good approach to generate geometric random pixel patterns as the ones in the image below…


Thanks :slight_smile:


You’re request is vague - can I ask you to be more specific in terms of what exactly you’re looking for?

What do you mean by “geometric”
What have you already tried?
Looking at your example, which patterns really speak to you?

I’ve tried my hand at this a while ago (see here for examples and a github link) with results that I was pretty happy with. For me, the key was to realize they all consist of a set of shapes (or pixels) in the top left quarter, and the other 3 quarters are mirror images of that. Of course, you can take any part of a single square and then use mirroring to fill in the rest, no need to divide it into 4.

I used a set of predefined curves and lines to create one corner, and then simply drew the other corners with the vertical/horizontal mirror of each shape:



Basically you reproduced Jared Tarbell’s famous “Invader” sketch

"Fractal.Invaders begins with a rectangular region and recursively fills it with little “invader” objects. Each invader is a combination of black squares arranged in a 5 * 5 grid generated at random during runtime. The only rule of construction requires that the left side of the invader be a mirror copy of the right side. This keeps them laterally symmetric, which endows them with a special attractiveness to the human eye.

There are a total of 32,768 (215) possible invaders. The magnitude of 15 comes from the product of 3 columns and 5 rows (the last 2 columns of the grid are ignored since they are the same as the first 2). The 2 comes from the fact that each space in the grid can be either black or white."


I love all of this. Random but symmetrical glyphs make me happy in a manner that words can not express.


You could try 2d cellular automata and substitution systems. Each square could be a different step in an automaton or a different substitution system. Check the links out for visuals, they are from Wolfram’s book.


Nice project @makoho! Nevertheless, I’m looking for a pixel based approach. Thanks for sharing :slight_smile:

Cool stuff @solub! That’s exactly what I was looking for :slight_smile:
Now I just need to figure out how to turn those grids into a 1D array

Super interesting read @ScottGrogin thanks for sharing :pray:
Not going to use that for now, but I’ll save it for future projects!

1 Like

Well given something like this:

// create an 8x8
int quad = 4;
int dim = quad * 2;
boolean[][] pattern = new boolean[dim][dim];

…you want it to have the property that when you set a pixel:

// set a pixel in the upper left quad
int i = (int)random(0, 4);
int j = (int)random(0, 4);
pattern[i][j] = true;

…then it ALSO sets the corresponding (symmetrical) pixels in the other 3 quads. Or two halves, if you are going with the Invader style. There should be methods, like:

void quadSet(i, j){}
void halfSet(i, j){}

…that can handle the symmetrical writing for you.

It might be more intuitive for you to define these as 2D operations, then move the results with a nested loop on your 2D boolean array that copies into PImage.set(x, y), rather than trying to define them as 1D operations on a pixels array. Or just use set() directly if you want to try storing more than black and white in different subsets of pixels.


Awesome @jeremydouglass! I was just thinking out loud, but that’s going to come in handy! thanks for the help!

1 Like