Exploring Creative Code: Week Three
As followers of this blog know well by now, I’m trying something a little different with this series. While I’m continuing to work on my full-stack web applications (and improving my GraphQL, Git, TypeScript, and countless other skills), I’m also blogging through Code as Creative Medium (CaCM), a workbook and collection of exercises designed to teach both coders about art and artists about code. By working in p5.js to create a unique piece of art every week, I’m giving myself an opportunity to enhance my JavaScript skills while making interesting pieces of design. Check out my last couple of blogs to see my progress here.
While I’ve only just started reading CaCM, it’s already having a big impact on the way I view both code and the creative process. One of the great developments of the book is that Golan Levin refers to his lecture notes he gives in his day job as a professor at Carnegie Mellon University. In one such series of lectures about time, Levin discusses the cave paintings of Lascaux and how they relate to code and the people who write it. While this might sound like a far-fetched comparison, Levin explains that the Lascaux cave paintings were not the work of a single artist, but a collective endeavor for an entire community. These cave paintings would take hundreds (and perhaps thousands) of years to create, and our ancestors collaborated with people who may have been as mysterious to them as they are to us today. In the same way, software engineers work in teams either in the same physical space or in an entirely virtual environment, plying their creativity to collaboratively fashion a unique artifact.
Interestingly, the Lascaux cave paintings also shed light on the long fraught question about whether art has any inherent purpose, or whether it is merely to be enjoyed. As Levin points out and recent studies have corroborated, these ancient paintings may not be mere artistic relics, but rather were used for target practice by the people who created them. Software, too, while clearly requiring great creativity to build and maintain, has clear import for users. While these ideas about art, collaboration, and impact barely scratch the surface of CaCM’s contents, it’s beginning to give me a better sense of both art as a whole and the way writing code can be a creative endeavor in and of itself. As I uncover more advanced p5.js concepts and create more interesting sketches, I’m excited to delve more deeply into these concepts, and to think more seriously about what can be accomplished through creative code.
This week, I’ll be following one of CaCM’s exercises to recreate a painting by an incredibly famous abstract artists, Piet Mondrian. If you’re not familiar with the Dutch painter, I’d encourage you to look at some of his work here.
While he worked in many different styles over the course of his lifetime, Mondrian is most famous for his signature geometric style, featuring bright colors and symmetrical lines that traverse his canvas. I’m betting, though, that you’ve seen many of his works, as they’ve permeated our culture, especially in the areas of fashion, music, and advertising. In writing this blog I discovered that there is a little used programming language based on the art, called Piet. One of Mondrian’s paintings even sold at auction for over $50m! Because of how geometric many of his paintings are, Mondrian’s work is one of the more intuitive artists we can emulate through code.
For this exercise I’ll be recreating Composition No. III, with Red, Blue, Yellow, and Black, which can be seen below:
Painted in 1929, today Composition No. III is hanging in the Tate Museum in London. And while I don’t have the space to discuss it here, Mondrian’s emotions and thought process behind the piece — composed while he was fleeing fascism in Europe — is absolutely fascinating. With that, let’s dive into the code!
While I’ll walk through this sketch essentially line by line, my last blog post described how you can get started with p5.
We’ll start our sketch with a basic setup() function, which will allow us to structure the most basic building blocks of our sketch. The setup() function is only used once in your p5 sketch. This function essentially establishes our canvas size, background color, and additional components necessary to make the piece. Because Composition No. III is a relatively large painting we’ll make our canvas 800px by 800px, though at this point our output will be fairly bare:
Now that we have our canvas we can get to the meat and potatoes of our piece with the draw() function. We’ll start with the background(), which will let us set our background color for the painting. For this piece, we’ll make the background slightly off-white to better simulate a physical, paper canvas.
Confession: for these sketches I won’t show you all the painstaking trial and error it took to recreate this famous painting. p5 reminds me of cooking: a lot of people can do it, some people do it every day, but not everyone is talented at it. While i could show you each and every permutation of lines and colors that I used to get as close to the original Mondrian as possible — or show you pictures of the bags under my eyes as the hours ticked by — I think you’d agree that doesn’t make for the most exciting blog post to read. But after significant trial and error I was able to get the correct base colors for my sketch:
At this point I felt like I was really starting to get a feel for how to compose this sketch. As you can see, I’m making significant use of the rect() and fill() functions, which allow the programmer to create rectangle shapes and set their color, respectively.
This might also be a good time for another confession: I’m fairly colorblind. Although I’ve always felt that not being able to see color properly would be a hindrance to my creative process, working in p5 allows me to circumvent that problem entirely, as color is represented through words and numbers rather than colors I can’t identify. Accessibility has long been a topic of discussion for computer scientists, and now more than ever I can see why.
Luckily for me, modern tools like the Eye Dropper Chrome extension allow me to pick colors on the web page to be able to insert it in my own sketch. Rather than guess what the right color is, I can easily grok the the RGB, Grayscale, or other color values needed for my sketch. If you are colorblind yourself — or simply curious about using tools that enhance computer accessibility for all people — I fully encourage you to check out this Chrome extension.
Getting back to my own sketch, it’s time to add the black lines that cross the canvas. After more hours of trial and error, I was able to output the following to my browser:
Our sketch is complete! One thing that was particularly tricky for this piece was manipulating the dimensions of the lines with the strokeWeight() and line()functions. As this was a fairly simple painting to imitate, the difficulty came in with paying close attention to detail. With the strokeWeight() and line() functions, I’m able to pay exact attention to every facet of the sketch, and as you can see the line() function allows you to compute the precise coordinates of an element given other variables in the code. If you’ve been coding along, pat yourself on the back, you just recreated a classic work of art!
What I love about this sketch is that it gives you the ability to really see how p5 handles lines and simple shapes. Though this exercise was relatively simple, with limited manipulations to the canvas, you get a sense for how advanced these sketches could go. Thanks for following along, and come back next week to see my next sketch!
