Until now, we’ve been exploring HTML, CSS and jQuery in mostly practical ways. As we’ve gotten familiar with the basics, we’re going to continue pushing our knowledge by using programming as art on it’s own, and a tool to generate it.
For most of the activities, we’re going to use a JavaScript library called p5.js. You can use p5.js for artwork, data visualization, or simply in tandem with HTML, CSS and JavaScript
Screenshot of p5.js web editor with circled numbers
You’re able to use the web editor w/o being logged in, but please create an account so that you can store and share your sketches.
Anatomy(Matches up to the numbers in the image)
The“code” pane. This is where you type your p5.js code.
The“console” pane. This is where error messages from your code show up. you can also use the console.log() function to make text appear here while your program is running.(This is helpful for debugging purposes, and we’ll discuss it more later!)
The“preview” pane. Your sketch will show up here!
Controls. Press the“Play” button(▶) to“run” your sketch. Press“Stop”(⬛︎) to terminate the sketch.
The name of your sketch. Click the little pencil icon to the right of the name to edit it.(When you create a new sketch, a random name is generated for you. The web editor uses this library to generate the names, if you’re curious!)
Sketches
Processing is a tool developed to allow beginner’s to create prototypes and explorations very quickly. For this reason, P5.js(and processing) executions are referred to as sketches.
All sketches have both a setup function and a draw function.
The setup() function is used to set your sketch’s size. You can leave it blank to use default values, or you can specify it to your liking.
The draw() function is a function is a function that is executed every frame of your application's life. Whatever statements you write in the body of the draw function will be run, continuously.
function setup() {
}
function draw() {
triangle(30, 75, 58, 20, 86, 75);
}
Cut and paste the above and paste it into your editor. Well done! This is your first sketch.
What’s going on?
triangle(30, 75, 58, 20, 86, 75); is an example of a function call. p5.js comes with several dozen built-in“functions” that perform various tasks, like drawing shapes to the screen or calculating values using mathematical formulas. Learning how to program in p5.js is mostly about learning these commands and what they do. The triangle function, in case you hadn’t guessed, draws a triangle to the screen.
triangle is the function’s name. Functions are always followed by a pair of parentheses; inside these parentheses are a comma-separated list of values. These values are called the function’s parameters. Every function uses its parameters in a slightly different way, and part of learning a function is learning what its parameters mean.
In the case of triangle, there are 6 parameters. x1(the x coordinate of the first point) y1(the y coordinate of the first point), x2(x coordinate of the second point), y2(y coordinate of the second point), x3(x coordinate of the third point), y3(y coordinate of the third point).
The function call ends with the semicolon(;). You should put a semicolon at the end of every function call.
You can put as many function calls as you want in between the line that reads function draw() { and the } that follows it.
The Web Editor
Sketches
function setup() {}
function draw() { triangle(30, 75, 58, 20, 86, 75);}What’s going on?