4x6 watercolor postcard with a 5x3 grid of shapes on it

Gelly Roll and Micron on generic watercolor paper

I was lucky to be able to participate in Paul Butler’s annual #ptpx plotter art postcard exchange this year. I’m pretty new to this art stuff and this was my first time giving something I made to someone I didn’t know. Turns out that’s really intimidating, but I’m so grateful for the opportunity.

I like when people share their process and so I’m going to do that here. I’ll cover the inspiration for the project, how I codified the design, several of the prototypes I built, how I built the final sketch, and finally, how I plotted it. I’ll also share the some of the code along the way.

The code is licensed CC-BY-NC-SA. This means that you’re free to use and remix the code under two conditions: first, you may not use it for any commercial purpose, including selling works produced using my code; and second, you must share whatever you make under the same CC-BY-NC-SA license. Commercial licenses are available; email me.

Inspiration

There’s a scene in the Netflix comedy series Kim’s Convenience (specifically season 1 episode 2, “Janet’s Photos” at around 18:40 minutes in) the character Janet is wearing a light pink sweater with a bunch of interesting designs on it. It’s hard to get a clean screenshot of these but here’s the best crop I could get:

screenshot of a design on Janet's sweater

I just couldn’t stop thinking about this sweater and wanting to play around with those ideas, so I decided to try to recreate it in a generative way. I’ve been using procedural art tools for years but this was my first time working on a generative system intended to create random variations. I figured the first step would be to figure out how to codify the way the shape is put together.

Analyzing the Design

From studying screenshots of the show I was eventually able to figure out that all of the shapes on the sweater are rotations or mirrors of each other. That made it much easier to figure out the rules, since I only had to think about one example. Looking at the image above, here’s what I saw:

That gave me a good starting point for exploration. I started by drawing the shapes on paper with markers. Through all these sketches I started to develop a feel for what was going to be interesting and pleasing to look at. Here are a few of my later sketches:

a photo of three sketches similar to the original source

I made dozens of these but most got recycled

I learned several things through this process:

This was a good start but there were still some open questions. I built a series of prototypes in [p5.js]

[p5.js]:

Design Rules