The following list contains all of the p5.js functions and variables used in this guide, as well as links to their respective reference pages in the p5.js library documentation.
These are the two key functions that you should define yourself in your Javascript code whenever you use the p5.js library:
[setup()](<https://p5js.org/reference/#/p5/setup>) is where you'd create the canvas and do any initialization tasks. It runs once when the program first starts on page load.[draw()](<https://p5js.org/reference/#/p5/draw>) is where you can incorporate interactivity and animation into your program. It loops continuously as long as the program is running.[createCanvas()](<https://p5js.org/reference/#/p5/createCanvas>) creates a new canvas element of the specified width and height.[windowWidth](<https://p5js.org/reference/#/p5/windowWidth>) and [windowHeight](<https://p5js.org/reference/#/p5/windowHeight>) are the width and height of the browser window in pixels.[background()](<https://p5js.org/reference/#/p5/background>) sets the background color of the canvas.[mouseX](<https://p5js.org/reference/#/p5/mouseX>) and [mouseY](<https://p5js.org/reference/#/p5/mouseY>) are the the X and Y coordinates of the mouse's current location.[pmouseX](<https://p5js.org/reference/#/p5/pmouseX>) and [pmouseY](<https://p5js.org/reference/#/p5/pmouseY>) are the the X and Y coordinates of the mouse's previous location.[mouseIsPressed](<https://p5js.org/reference/#/p5/mouseIsPressed>) is a boolean variable that is true if the mouse button is currently pressed or false if not.[frameCount](<https://p5js.org/reference/#/p5/frameCount>) is an integer that contains how many frames have passed so far, or in other words, the total number of calls to draw() so far.[stroke()](<https://p5js.org/reference/#/p5/stroke>) sets the stroke color.[strokeWeight()](<https://p5js.org/reference/#/p5/strokeWeight>) sets the width of the stroke, or line thickness, in pixels.
[noStroke()](<https://p5js.org/reference/#/p5/noStroke>) disables drawing the stroke.[fill()](<https://p5js.org/reference/#/p5/fill>) sets the fill color.
[noFill()](<https://p5js.org/reference/#/p5/noFill>) disables filling in shapes with color.