Getting Started: How to use p5, and create your first sketch
Reference: The complete dictionary of all the functions you can use in p5
Examples: These are short demonstrations of various p5.js topics.
Learn: These tutorials provide more in-depth or step-by-step overviews of particular topics.
Shiffman - 1.1 Introduction - p5.js Note that in these videos, he uses an IDE called p5 Editor, which we will not be using in this class. Instead, we'll mostly be working in Sublime Text (or other editor). Not to worry, it's the exact same code.
Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. There are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning and prototyping (from https://processing.org/). Processing is free to download and open source. It allows you to write interactive programs with 2D, 3D or PDF output. It's well documented , with many books available. Processing is a great tool, but it doesn't directly allow you to publish to the web. That's why the Processing Foundation created p5, a set of JavaScript functions that allow us to emulate Processing in the browser. Rather than learning both Processing and p5, we're going to jump straight into p5.
p5 is a set of wrappers around JavaScript that allow us to use JS in a way that’s more similar to Processing. It makes building interactive websites easier than if we were to use native JavaScript. Ultimately, this takes us ever closer to our goal of creative expression through programming!
p5.js is developed by Lauren McCarthy and supported by the Processing Foundation and by NYU ITP. People use it for art, data visualization, web interaction, you name it! Check out some examples on Open Processing!
Make your way to https://p5js.org/get-started/. You may wish to download the libraries and reference them locally (especially for larger, more complex projects), but for short examples I tend to reference the p5 libraries remotely, using a CDN. We've already covered the "Environment" section, so let's go through the "Your First Sketch" example.
Please note that p5 and the JavaScript language is:
Messing around with code you don't understand is a totally valid way to learn. Try changing values in the demo below and see how the result changes. Can you change the colors? How about the speed (velocity)? See if you can begin to understand how the routine works.
The concept of functions is of paramount importance in programming. There are a number of functions used in the above code example, including createCanvas(), as well as setup() and draw(). Functions are composed of the function name, the parameters (also called arguments), and the statement terminator. Parameters (arguments) are wrapped in parentheses and separated by commas, and statements always end (in JavaScript) with a semicolon.
So if we want to add a circle to the sketch below, we need to draw that circle using a function. How do we know what function to use? That's what the p5 Reference is for. We might find that there's no circle() function, but there is in fact an ellipse() function, which will allow us to draw a circle. But what parameters (arguments) should we give the ellipse() function? The reference tells us it should follow the form ellipse(x-coordinate, y-coordinate, width, height);. Try adding that to the code below. Syntax is really important -- it has to be very precise!
p5 sketches typically consist of a setup() function and a draw() function. The code inside the setup() function runs once, while the draw() function runs continuously from top to bottom until the program is stopped.
p5 keeps track of important global variables called width and height. We typically call the createCanvas()function from within the setup() function, and pass it numbers representing 'width' and 'height' of the desired canvas. These numbers are stored as variables for the rest of the time the sketch is running.
You might see p5 tutorial videos where a special p5 Editor is being used. However, for this class, we're going to cut to the chase and write our code in a text editor, and use our browser for debugging. This is the way you'll need to work for more complex, or collaborative projects.
An important thing to keep in mind is debugging. We'll rely on the browser's console for this (right-click and "Inspect" in Chrome). Not only will the console tell us if we've cause an error, we can also voluntarily print output from our code to the console using the print() function. This is particularly useful if we want to visualize the output of some variable, or see when a function is being executed. Try adding a print() function to the above code snippet.
Other useful things related to the p5 coding environment are frameRate(), which specifies the frames per second for your sketch to run, and frameCount, which counts the number of frames since the sketch started running. You can also look into windowWidth and windowHeight if you want a full-window sketch as opposed to a pre-specified canvas size.
Comments are a plain-text way to write notes to yourself or others who may read your code.
Remember that Processing is case sensitive, so be always mindful about capitalization.
Furthermore, p5 is whitespace and indentation insensitive, so the following will work just fine (although you should totally avoid such things!)