Physics and Code Tutorial 1: Coding Basics

Using p5.js and the p5.js editor

0. Code Structure
🔝

Everything in setup() happens once at the beginning. Everything in draw() happens over and over again, 60 times every second. For example:


function setup() {
  createCanvas(300, 200);  // creates one canvas at the beginning.
}

function draw() {
  createCanvas(300, 200);  // creates 60 canvases every second, for as long as the code runs.
}

1. Draw a Circle
🔝

  • Type createCanvas(300, 200); in setup() (just like in the example above).
  • In setup() and on a new line after createCanvas(), type background('tomato');.
  • In setup() and on a new line after background(), type circle(100, 50, 25);.
  • Press 'play' to run your code.
  • Change the parameters of all your functions to find out what each does (i.e. change the numbers for createCanvas(), circle() and the colour name for background()).
Sample Solution
Takeaway
  • To draw something on screen, you first need a canvas of a chosen size. The default canvas colour is white.
  • Simple shapes can be drawn, their size and location determined by their parameters.
  • All location parameters are relative to the top-left corner of the canvas (in other words, the origin (0,0) is at the top-left corner of the canvas).
  • Details for all functions can be found on the p5.js reference page, including:

2. setup() vs draw()
🔝

  • Type createCanvas(300, 200); in setup().
  • In draw(), type:
    background('seaGreen');
circle(mouseX, mouseY, 20);
  • Press 'play' and move your cursor over the canvas.
  • Move circle(mouseX, mouseY, 20); to before background();.
  • Press 'play'. What happened to the circle?
  • Move background('seaGreen'); to after createCanvas(); in setup().
  • Press 'play' and again move your cursor over the canvas.
Sample Solution
Takeaway
  • Again: everything in setup() happens once at the beginning, and everything in draw() happens over and over again (i.e. loops), 60 times every second.
  • Functions are executed in order, from top to bottom.
  • Reference: setup(), draw()

3. translate()
🔝

  • Press 'play' to run the code.
  • Type translate(150, 100); in draw(), after background() and before point().
  • Press 'play' and note the difference.
Sample Solution
Takeaway
  • The location of the origin can be changed with translate(x, y).

4. Variables
🔝

  • Press 'play' to run the code.
  • Before setup(), type let squareSize = 20; and replace every 20 with squareSize.
  • Before setup() and after let squareSize = 20;, type let squareSpacing = 30; and replace every 30 with squareSpacing (and every -30 with -squareSpacing).
  • Press 'play' and note the difference.
  • Change the values of squareSize and squareSpacing.
  • Press 'play' and note the difference.
Sample Solution
Takeaway
  • The use of variables makes your code easier to read and maintain.
  • Variables are user-created and should be descriptive, using camelCase where necessary (e.g. squareSize and squareSpacing).
  • As their name suggests, their values can be changed at any time (see Physics and Code Tutorial 2).

5. if ()
🔝

  • Goal: "If the cursor is on the right side of the canvas, draw a square on the left side".
  • Replace if (cursor on the right side) with if (mouseX > 150).
    (*note: translate() does not apply to the mouse.)
  • Replace draw square on left side; with square(-75, 0, squareSize); and press 'play'.
Sample Solution
Takeaway
  • if statements are used to run certain blocks of code only if some condition is met. Otherwise, the code block is ignored.
  • Reference: if statement

p5.js Cheat Sheet
🔝

Reference Example Example Description
createCanvas(x,y) createCanvas(400, 250) Creates a canvas that’s 400 pixels wide and 250 pixels tall.
background(color) background('green') Colours the entire canvas green. (n.b. Colors can be defined a number of different ways.)
translate(x, y) translate(100, 200) Moves the origin to 100 pixels from the left of the canvas and 200 pixels from the top of the canvas.
circle(x, y, diameter) circle(10,20,30) Draws a circle with a 30 pixel diameter 10 pixels to the right of the origin and 20 pixels below the origin. more shapes
let let animalType = "fox"; Creates a variable called animalType (and assigns a value of "fox" to it).
if statement 
if (t > 10) {
  background('green');
}
 If the variable t is greater than 10, the canvas will be painted green.
next:
Physics and Code Tutorial 2: Simulating Motion