When you think of
Who are you? Why are you so excited?Hello! I’m Melanie. I’m currently an intern at NASA Headquarters, working on artificial intelligence and machine learning research.In other words, I’m coding for NASA!I’m probably excited because I’m talking about code, and about art, and those are two things I love.After the summer is over, I get to go back to my Master's degree in human-computer interaction at CU Boulder. (More coding). Let’s get started with the workshop
First, I have a question for you — what do you imagine when I say “code?” Please be as wide-reaching in your response as you can.
Great! Now, let’s get coding
This poster is what we’re aiming for today.
What is it? It’s a spirograph maker. A spirograph is a drawing that we can make with roulette curves, which is a curve made by a point that follows a line or another curve without slipping or deviating.
Here are some examples of this poster I’ve made:
Check it out! Do you have any questions? Let me know.
So, the goal of this workshop is for you to make something your own. So, you get to add your own colors, your own words, and your own type of font.
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.
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), now has the word “copy” written after it.
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. What do you want to say in your poster?
You might continue by changing the colors. What are your favorite colors? Unsure? That’s fine! Find some examples, or randomly generate some here: Coolors
What should I do????
In this workshop, and in ALL OF CODING, your Documentation is your best friend.
Documentation is this cool thing that coders of yesteryear have left behind for us. It’s kind of like a historical record of how code works. Let’s be clear: It’s not expected of anyone that they take one look at code and know what to do. Coding takes time, learning, and effort, but it’s worth it!
Open the above link. This will give you the help you need to make changes to a particular function in this script.
Two coding 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 easiest 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 the first portion of 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. Ask me if you need help!!)
For example, a good plan would be: “Change the background color followed by the shape fill colors.”
Finishing up
As you finish up, you’re going to want to save your work. p5.js saves sketches automatically, but before you navigate away from your page, ensure you 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). Email that to yourself however you can!
Are you into creative coding!? Cool! Are you not? That’s cool too!
There are so many things to do with code. Creative coding is only one gateway into this work.
Check out the things people are doing with creative coding here: https://openprocessing.org/browse/#
Find an amazing resource to learn more about creative coding here: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw
Find a resource to teach yourself JavaScript here: https://grasshopper.app/
If you want to do something like make the poster your phone background, let me know!
Reach goals
Did you super enjoy this? Want more to do?
You could change the shape type. All you need is the P5.js Reference (above) and some coordinates.
Here is an online tool for coordinate-making: Online coordinate plane, but remember that our coordinate plane is 500 x 500.