A first endeavor into generative art

April 17, 2020

Last year we organized an internal conference at my workplace and I volunteered to put together a booklet with the abstracts of the presentations. I wanted to add photos of the authors, but I did not want them to look all the same. ⊕Actually, graphic design and layout editing was not new to me, I’ve always had a thing for this field. At some point during my bachelor’s in Economics I even considered moving abroad and studying it instead of finishing that degree. Instead of doing so, I just volunteered to design the faculty magazine. I came up with the idea to have the photos on top of two rectangles of the same size but of two different colors, a bit offset from the photo – every photo should be paired with differently offset rectangles to add some unique design. Of course, I did not want to do this by hand, but that’s what I know Python for.

Initial drawings for different photo layouts. Photo © the Author, CC-BY-SA-NC-3.0.

Looking at the sketches gives a better overview of the idea than trying to describe it in words. We have three objects on top of each other: the two rectangles and the photo. They each take one of the horizontal positions (left, center, right) and one of the vertical positions (top, middle, bottom). Each position may only be taken by one of the objects. The photo must be on the top of the stack, but the order of the two rectangles can be switched. Therefore, we have 3! × 3! × 2! = 72 different potential patterns in this setup.

While I did briefly consider doing this by hand, I quickly realized that it would be too tedious. I also wanted to do the project quickly, so instead of digging into various libraries, I came up with a very simple approach. I would create an SVG image with the two rectangles and the image embedded into it. SVG is a vector image format described with XML code, so it can be easily read and written by computers – and, albeit somewhat tediously, by humans. Therefore, I just need to write the header of the file (which is the same for all variations), add the three objects, then end the file appropriately.

To populate these SVG files, I first generated a cross product of the aforementioned dimensions and turned them into a list of lists. Each item has three ordered sublists: [x coordinates for each item; y coordinates for each item; the colors of the two rectangles]. As the next step I shuffle the outer list to have these in a random order and finally populate the SVG files with the generated rectangles and the image loaded from the computer. ⊕I actually created five rectangles: both colored rectangles and the photo got a white frame by having a slightly larger white rectangle behind them. I highly recommend checking out the code that I used; it provides a better understanding of what I did. (After all: the code is what I did.)

Sample output of varied layouts generated programmatically. Pictures from Unsplash via Unsample. © the Author, CC-BY-SA-NC-3.0.

And that’s it. This was a very simple project that took me about half an hour to write and saved me probably hours of daunting manual work; I just had to drag the SVGs into my desktop publishing application.

Of course, this was a very basic endeavor into generative art. If you are interested to see more, here is a list of links (in no particular order) to start out your adventure:

The collection of Aaron Penne’s artwork, freely available on GitHub
The /r/generative subreddit
Generative Art by Matt Pearson, a book about creating art using the Processing language
A fantastic blog post by Ben Kovach about making generative art feel natural.

Good luck, go out and create art!