Sketch title: “Emergence”
The result of a sketch I made in my first semester at ATLAS, for Justin Gitlin’s class Creative Coding (ATLS 5660).
Sketch prompt: Build a generator
methods: p5.js, JavaScript (particle generator and flowfield)
What is creative coding?
When you think of “coding” (known alternatively as programming, developing, and so on), what do you think of?
Many of us think of math, science and engineering applications, such as simulation modeling, software applications, and similar realms.
That’s already cool, but there’s also an entire community of people that use code to make art, and for creative applications! In my experience, these uses of code make me more curious about what’s happening in my scripts — and they’re fun!
The ubiquity of code
Are there any software engineers in the room? Even if you’re not a SWE, have you ever asked the question, “How does that work?” about something in your discipline?
Canonically, engineers like to take stuff apart. They like to know how things work. It appears to be the most productive use of destructiveness we’ve come up with as a species.
Well, pretty much anytime we see some kind of digital or virtual interaction, we’re seeing code at work. So we can ask this question, “But how?” with anything code-related. This is where we start to find unexpected examples of software out in the world.
Creative coders, data artists, and software artists out in the wild
creative coder Justin Gitlin, a former professor of mine
Open Processing, a community of creative coders using Processing (powered by Java)
Today’s Tools
p5.js
Today, we’re going to mess with some code using p5.js.
p5.js is a JavaScript library (and web editor) “for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!” Created by Lauren McCarthy in 2013, it’s a JavaScript offshoot of Processing.
The tools we’ll be using today are open-source and browser-based, so there is no installation required.
Simply go to this website: https://p5js.org/ and create an account with an email you’ll have access to later.
JavaScript: quick & dirty intro
Created by the people at the now-defunct Netscape, JavaScript (JS) is a high-level programming language that is extremely popular for use in web development. According to Wiki, as of this year, 98% of websites use JS on the client-side for page behavior.
Part of that is Node.js, which is used by a huge amount of corporate players as a runtime environment.
It is object-oriented, but through a prototype-based (also known as instance-based) system. Classes were only added recently (in the last decade), presumably to avoid confusion.
Let’s get going
This poster is what we’re working with today. Go ahead and check it out, and mess around a bit!
What is it?
It’s a digital spirograph.
A spirograph is a drawing device that produces roulette curves, which is a curve made by a point that follows a line or another curve without slipping or deviating.
Above and below are some examples of posters made with my digital spirograph!
Any questions thus far? Let me know!
Today’s goal
So, the goal of this workshop is for you to make your own poster, by making this digital spirograph your own (or alternatively, by making your own spirograph.)
Since this is a workshop meant for all levels, you get to decide what level of challenge you’d like. The workshop is designed to meet you where you’re already at in your coding journey.
Below is a scaffolded script of my digital spirograph. So, you could choose to alter this script to make it your own, or use it as a reference and code it from scratch. (Please note, if you’re looking to do it with as minimal copy/paste as possible so that you understand every bit of code, you may or may not finish tonight — BUT you have everything you need on this webpage to complete it. It will remain live for six months.)
To make the script your own, add your own changes (colors, words, font-type and so on) to the scaffolded poster script.
Scaffolded script
Let’s get started! The first two things you’ll be doing are:
Make a p5.js account with an email you’ll have access to later.
Please do this if you haven’t already done so
Make a copy of this script: Scaffold script
Do this by going to the dropdown File (in the upper left-hand corner of your screen) —> and then Duplicate.
The script will now be copied onto your account. You can see this by noting that the file name (seen to the right of the text “Auto-refresh,” all of which is next to the PLAY and STOP buttons at the stop of your script box), now has the word “copy” written after it. Change your file name to something you’ll remember, or leave it as is.
The fun begins!
Ok. Now you have a copy of the script. This is where the fun begins!
How can you make this script your own?
You might start by changing what the poster says.
You might continue by changing the colors. You can randomly generate some colorblind-friendly palettes here: Coolors
I’m panicking ??
Open the above link. This will give you the help you need to make changes to a particular function in this script. Simply look up the bit of code you’re working with by function name, and the docs will tell you what it does, and provide helpful examples.
You can also check out the “Cheatsheet” down at the bottom of this workshop page. It has some frequently asked questions :)
Two rules of thumb: Make a plan. Do the easy stuff first.
In coding, and in engineering in general, you’ll want to have a plan before you make any changes.
The most approachable changes to make in this script are the following: The background color, the shape fill colors, the shape line colors, the thickness of the shape lines, the text color, the thickness of the text line, and what the poster says.
Your plan for this workshop might be:
Think of ideas for what I want my poster to look like.
Make my own plan for the order in which I want to change things. (I suggest starting with TWO changes)
For example, a good plan would be: “Change the background color followed by the shape fill colors.”
Other helpful things to note about p5 and JS
In JavaScript, single-line comments are made with two forward slashes: //
//for example, this is a single-line comment in JavaScript
Multi-line comments are made with an asterisk sandwich on forward slash bread, as such: /* */
/* for example, this would allow for a multi-line comment in JS*/
To use command shortcuts to make comments, use these keys in sequence (no + button):
On Macs, use Command, /
On Windows, use Control, /
Finishing up
As you finish up, you’re going to want to save your work. p5.js saves sketches automatically, but just to be sure save your work by going to File —> Save (in the same area as the Duplicate script command that we did before).
You can email yourself a copy of your script by going to File —> Share and copying the link that comes up for Edit (the third link on the page).
More resources/tools
For this workshop specifically
If you want to do something like make the poster your phone background, let me know!
For when you leave here today
Bookmark OpenProcessing’s sketch explorer
Find an amazing resource to learn more about creative coding here: Daniel Shiffman's Coding Train