In today’s workshop you will:
meet the p5 online editor and draw pictures with code
learn how to interpret instructions in an artistic context
meet some great conceptual and code artists (well, you’ll meet their work, anyway)
compose your own generative artwork
You’ll need to work with a partner to explore this stuff. Introduce yourself to the person next to you—they’ll be your parter for today. If you’ve never met them before, that’s ok. Take a moment to get to know them a little bit; if you’re stuck for things to talk about, ask them what they think the word interpretation means when we’re talking about art?
The purpose of this workshop is to get you started thinking about interpretation. You might think that in an artistic context, that word is talking about the way that different people will have different responses to and preferences for the things that they see. Adele might like portraits, while CaiHeng prefers landscapes… that sort of thing.
Actually, this workshop also explores a different meaning for the word interpretation. This workshop is about the way that a work of art can be represented as an instruction (or a series of instructions) which must be interpreted (or executed, or realised, or performed) to make a complete artwork.
Part 0: create a p5 editor account (optional)
In a new tab, head to the p5 web editor. You’ll notice that there’s a Sign up button in the top-right. You don’t have to sign up (you can write code anonymously if you’d prefer) but if you want to come back to your work later (or share it with someone else) then you should go ahead and create an account now.
You should keep your p5 web editor tab open, switching between this page and that one as needed.
Part 1: drawing by hand
Grab a pen and a piece of paper. Without comparing with any of your classmates, draw a tree. Don’t worry, we’re not marking your drawing skills. Once you’re done (don’t sweat over it too much—just a few minutes is fine) wait for further instructions.
Part 2: drawing by code—what kind of art is generative art?
Generative art is much older than computers. In the mid-20th century, the artist Sol LeWitt created a series of works where he would describe an artwork in words, and sometimes using a diagram. These instructions, which he called “wall drawings” would then be carried out by someone else. Here are the instructions for his Wall Drawing #118:
And here’s a result of following the instructions:
This is analogous to the kind of art we are doing when we make art with code. We create the instructions to describe an artwork, but the actual drawing is taken care of by the computer.
Another artist whose work follows a similar form is Casey Reas (one of the creators of Processing, which is the precursor to p5.js). Reas has created a large series of works which he called “Processes”. These works, like LeWitt’s wall drawings, were first composed in English. Here’s one of Reas’s Processes:
If you’re wondering what “Element 1” is, the basic idea is that all of Casey’s Processes are interlinked and they cross-reference one another. It’s all explained on Casey’s website, although you don’t need to understand all of that to appreciate the idea here.
And here’s a result of following the instructions:
Discuss with your partner: what is the work of art here? The instructions, or the realisation? And who’s the artist—the person who wrote the instructions, the person who followed them, or both/neither?
Part 3: messing with p5 interpretations of generative art
Here are two p5 interpretations of Sol Lewitt instructions. Have a look at both!
The above p5 widgets are interactive—you can change the code and the results will change. Still, the canvas window (where the actual sketches are) is pretty small. That’s ok—you can always copy-paste the code from these interactive boxes into your p5 web editor tab to see and interact with them on a bigger canvas.
Choose one p5 interpretation and copy it into a new sketch using the p5 web editor. Explore using p5 by remixing the code and changing values. Here are some things to start off with:
- try changing different numbers
- try replacing some of the numbers with
- try combining numbers using functions like
- try changing fill and stroke colours
You can use the p5 reference to look up functions and investigate what’s going on in detail.
Even though you’re still discussing this stuff with your partner, you should each have a go at this part. It’s fine if you make different changes compared to your partner. In fact, that’s kindof the point 😉
Part 4: following the instructions
Ok, now it’s your turn. Here’s a new wall drawing instruction (let’s call it Ben Swift’s wall drawing #1)
on a blue background, three not-quite-horizontal white lines of various thickness next to a “breathing” circle
Using the p5 web editor, write a p5 sketch which realises the above wall drawing.
As you do this (again, on your own—not with your partner just yet) try not to look around at your classmate’s screens. Instead, think (or sketch on a piece of paper if you like) how you’re planning to interpret the instruction.
Part 5: composing your own instructions
In the final part of this workshop, you get to make your own wall drawing instruction. You can borrow ideas from the things you’ve seen already, but if you have new ideas then that’s fine too—this is a place to experiment.
Write your own wall drawing instruction and give it to your partner to realise in p5.js. The rules are: (1) don’t make it too complicated, and (2) try to imagine what your instructions will look like as you write them—the aim is to write instructions that will be interesting when drawn.
Once you’ve each written out a wall drawing instruction, swap the instructions with your partner, then open up the p5 web editor and write a new sketch which realises your partner’s wall drawing.
Part 6: break it down!
If you’ve got to the end and there’s some time left, here’s some code for you to mess with and make your own—it’s based on Casey Reas’ Process 10 (which you saw in part 2). Play around with parameters to see how it works; add colour or change the drawing style. Break it down and make it your own. And remember that if you copy it into a new p5 web editor tab you can enjoy it on a much bigger canvas 😁
In this workshop you:
met some great conceptual and code artists
discovered the p5 online editor and used p5’s drawing functions to make pictures with code
learned how to interpret instructions in an artistic context
composed your own generative artwork
Search the web for more LeWitt wall drawings. Can you implement any of them in p5? If you really want a challenge, can you add a dynamic (time-varying) component to any of the things you’ve done today?
Here are a couple more links which you might find interesting. Or you could just use the Googles.
Finally, there’s a whole course on this stuff at uni—COMP1720: Art & Interaction in New Media. The whole course website is publicly available, so although some of the things won’t work (e.g. you won’t be able to submit assigments) you should feel free to poke around the course website and explore.