Last week was my longest post yet, so this week we’ll be keeping it a tad shorter. This one is significantly less conceptual than the rest and sets you up to begin writing some creative code. I’ve maybe been a little too eager to get here, but I promise I’ll balance posts like this one out with more theory and inspiration :)
p5.js is a creative coding library that I use for the vast majority of my code art. Reiterating what I’ve mentioned in previous posts (if you’re not familiar with coding yet), it’s a lot of code written by many wonderful people to make our lives easier for doing creative stuff with code. It’s completely free and quite easy to learn, and if you feel so inclined you can even directly contribute to its development because it’s open source. It has a vibrant community of users, contributors, and educators, and a vast range of tutorials and examples are available for free on the internet. They recently released the 2.0 version of the library with some cool improvements and fixes which I’m very excited to test out!
In prior posts when I’ve been saying things like “…assume a kind soul has already written a line function…”, the developers of p5.js are those kind souls that I’m referring to (at least in the case of web-based code art). They’ve provided a ton of tools to work with that are all documented in the reference. As with most technical topics, it is important that you get quite comfortable with referring to documentation (or at least have a good system of querying it) when you don’t know how to do something. All of the information is there just waiting for you to find it!
Now, I say all of this because I really want to better set the stage for everything that I’ve been writing about thus far. There are multiple ways and contexts in which you can use p5.js, but the p5.js editor is by far the easiest to get started with regardless of your coding experience.
The editor is a website, and it looks like this:
The code on the left side might look slightly familiar - a couple function definitions are already provided to us. You might be able to guess what happens based on their names, but allow me to explain!
Once the play button at the top left corner is pressed, our “sketch” starts running. What that means:
setup() gets called once to “setup” our sketch. We can do whatever we want in here, as long as we only want it to be done once. By default, all that’s done in here is createCanvas(400, 400) which (once again, probably quite self-explanatory especially if you’ve been following the last few posts) creates a canvas to draw on with a width of 400 pixels and height of 400 pixels.
draw() gets called every frame, usually ~60 times per second. Video and animation work by showing you a whole bunch of frames very quickly which your brain perceives as smooth motion, and this is no different (assuming we’re trying to show something that moves). Technically, we don’t even need the draw function if we just want to make a static piece. We could instead do everything in setup and delete draw entirely.
One thing that I’ve forgotten to mention explicitly (but you’ve probably figured it out if you’ve been following along) is that with a few exceptions, code gets executed from top to bottom within a function. Make sure you define your variables and do your math before you try to use it!
I do want things to move, so I’m keeping the draw function. Adding similar code as last time into our existing setup and draw structure, we get the following (which you can view and modify here!):
windowWidth and windowHeight are variables provided by p5.js which automatically give us the width and height of the containing window. Everything else is explained by the comments in the code and largely similar to what I discussed last time.
setup and draw are basically the only major ways in which p5.js governs how a sketch works from a structural point of view. Everything else is up to you!
Aside from the library itself being quite friendly and easy to understand, the editor has some nice features that make getting started especially easy. If you’re not a fan of reading the reference, you can simply start typing what you’re trying to do and it’ll pop up suggestions for functions and variables that it already has available for you to use.
If you happen to do something wrong, like only putting in a single argument to the line function, the Friendly Error System (yes, that’s the actual name) will tell you as clearly as possible what went wrong and how to fix it, as well as link you to the documentation for the function you were trying to call.
Like I said, not so scary!
That’s pretty much all you need to know to begin experimenting with creative code in p5.js. Even if you’ve never touched code before, I’d highly recommend you go to the p5.js editor for the sketch above and try messing around by changing some of the numbers to see how they change the visuals.
If you’re feeling confident, consider attempting to write a basic function to draw something specific using the techniques discussed in A Variable World and Coffee as a Function.
I’d love to see what you do or help you out if you get stuck, so feel free to reach out!
See you next week :)
Happening Things
InterAccess flashDRIVE digital arts exhibit is up at the gallery and the opening party last week was amazing! I have 32 editions of a piece called IA Flow Fields up for sale in-person and on Metalabel, and with it you get:
Digital image file
Digital video file (of the animation)
HTML file that can be opened as a webpage to play with the system that created the various editions
5x7” plotter art (a machine drawing driven by my code) of your unique edition
In addition to the above, May 16th will be the first Open HDMI event in InterAccess’s new space. Come listen to music, check out the exhibit, and see what even more digital artists have to show on the massive projector system!
My wonderful partner is exhibiting at Artist Project at the Better Living Centre from May 8-11! Come say hi at booth 129 if you’re stopping by!
Weekly quote:
“I can eat glass, it does not hurt me.”
~ Ethan Mollick, The I Can Eat Glass Project (1996?)
I wrote this during downtime while helping my partner set up for Artist Project today, and finished it off just before it arrived in your inbox. We are very tired but excited :)
Album of the week: “No Drum and Bass in the Jazz Room” (2010) by Clever Girl
If you have any feedback or questions about this or any other post (or just want to say hi!), I’m always happy to chat. Thank you for taking the time to read!