P5.js Reference Guide

Welcome to the Upperline p5.js Reference Guide! We've put this together to help you as you start your journey into the world of Javascript using the p5.js library. Below you'll find tips, tricks, and resources to help you!

Getting Started

  • p5 Starter Code hosted on Github - Head here and download the repository by clicking on the green "clone or download" button and then downloading the zip file. (If you know how to use git and github, feel free to clone the repository)/
  • Once you've downloaded and unzipped the started code, open the folder in your favorite text editor (We love Sublime Text and Atom).
  • To see the current code 'in action' double click on the index.html file so that it opens up in your browser.
  • The code you'll be writing is in the sketch.js file.

The Basic Structure

Function setup(){ }: This function runs once and only once when the page is loaded. Think of it as the "preparation" for the piece you're building.

Function draw(){ }: This function runs over and over and over (until you leave the page). Each time it runs, it creates what we call a "frame". Similar to how movies are actually static images being shown at 24 frames per second, the draw function runs at 60 frames per second (you can actually change the frame rate.

createCanvas(w,h): This function creates your canvas where w and h are the width and height of the canvas you want to create. You'll want to place this inside your setup() function.

The p5 Coordinate Plane

Drawing Shapes

  • point(x,y)
  • line(x1,y1,x2,y2)
  • ellipse(x,y,w,h) (draws from the center)
  • rect(x,y,w,h) (draws from the top left corner)
  • More on shapes

Color

Some basic color theory - all colors on a screen are made up of Red, Green, and Blue (RGB). In p5, each of these has a value between 0 and 255. We can create new colors using the color(r,g,b) function.

var myRedColor = color(255,0,0);

var myGreenColor = color(0,255,0);

Color Picker: http://www.colorpicker.com/

Once you've set your color, you can use it. fill(color) will set the fill color of any shapes placed after we set the fill. stroke(color) will set the outline color of any shapes placed after we have set the stroke.

background(color) will set the background color of the canvas.

Variables

Variables are placeholders for data. Create a new variable by using the var keyword and giving it a name.

var myAge = 15;

var myFavoriteColor = color(243, 22, 120);

var myName = "Danny";

Random()

The random(min, max) function will return a random number between the min and the max. For example, if you want to create a random color:

var randomRed = random(0,255);

var randomGreen = random(0,255);

var randomBlue = random(0,255);

newColor = color(randomRed, randomGreen, randomBlue);

Built in p5 Variables

width - the width of the canvas

height - the height of the canvas

mouseX - the x-coordinate of the mouse

mouseY - the y-coordinate of the mouse

Event Listeners

function mousePressed(){ } - Runs code when the mouse button is pressed

function mouseClicked(){ } - Runs code when the mouse button is pressed and released

function keyPressed(){ } - The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable

More on Events

A Lot More (Resources)