Physics and Code Tutorial 2: Simulating Motion

Using p5.js and the p5.js editor

1. Same-Speed Motion I
2. Same-Speed Motion II
3. Speeding Up
4. Slowing Down
5. Simulating Motion
6. Physics Terms
7. Simulation End
8*. Bonus Challenge: End When Stopped
--
p5.js Cheat Sheet

1. Same-Speed Motion I
🔝

Press 'play' to run the code.
Create a variable called whereSquareIs and set its value to -90 (see Tutorial1-4: Variables).
Replace the -90 in square() with whereSquareIs and press 'play'.
In draw() and after square(), type whereSquareIs = whereSquareIs + 1;.
Press 'play'.

Sample Solution

Takeaway

By adding 1 to the x-parameter of square() every loop, the square moves to the right.
whereSquareIs = whereSquareIs + 1; in words: whereSquareIs in the next loop = whereSquareIs in the current loop + 1.
*A shorthand for writing whereSquareIs = whereSquareIs + 1; is whereSquareIs += 1; (addition assignment).

2. Same-Speed Motion II
🔝

Replace the 1 in whereSquareIs += 1; with any value that isn't 1 and press 'play'. Repeat this several times with whole, decimal and negative numbers.
Replace the last value chosen with a variable of your creation. What will you call it? Assign it a value and press 'play'.

Sample Solution

Takeaway

Of the value in whereSquareIs += value;:
- Negative values move the square to the left, and positive values move the square to the right.
- The larger the magnitude, the faster the square moves (and the smaller, the slower).

3. Speeding Up
🔝

Challenge: add a single line of code under whereSquareIs += squareSpeedAndDirection; that makes the square speed up.

Sample Solution

Takeaway

(*In this case) adding a positive value (like 0.03) to squareSpeedAndDirection every loop makes the square speed up.

4. Slowing Down
🔝

Challenge: can you make the square slow down (while moving to the right)?
Challenge: can you make the square slow down while moving to the left?
Challenge: can you make the square speed up while moving to the left?
Replace squareSpeedAndDirection += some value; with squareSpeedAndDirection += a variable of your creation;. What will you call it? Assign it a value and press 'play'.

Sample Solution

Takeaway

Of squareSpeedAndDirectionChangePerLoop:
- If its sign matches the sign of squareSpeedAndDirection
  (e.g. squareSpeedAndDirectionChangePerLoop < 0 and squareSpeedAndDirection < 0)
  the square speeds up (and if they do not match, the square slows down).
- The larger the magnitude, the faster the square's speed changes (and the smaller, the slower).

5. Simulating Motion
🔝

Create motion of your choosing by changing the values of whereSquareIs, squareSpeedAndDirection and squareSpeedAndDirectionChangePerLoop.
What kind of situation would cause the square to move in the way you've chosen?
Change showSampleSituation from false to true and press 'play'. Maybe you came up with something similar.

Takeaway

Congratulations, you're simulating motion!
All the extra code enabled by setting showSampleSituation = true; only provides context and enhanced visual appeal. With a little imagination and an understanding of the motion itself, it isn't necessary.

6. Physics Terms
🔝

The variable whereSquareIs has been used to describe where the square is, relative to the origin. Physics already has a term for this: position (\(\vec{d}\)).

Instead of whereSquareIs, use squarePosition.

The variable squareSpeedAndDirection has been used to describe the square's speed and direction of motion (that is, how the square's position changes every loop). Physics already has a term for this:
velocity (\(\vec{v}\)).

Instead of squareSpeedAndDirection, use squareVelocity.

The variable squareSpeedAndDirectionChangePerLoop has been used to describe how the square's speed and direction change every loop (that is, how the square's velocity changes every loop). Physics already has a term for this: acceleration (\(\vec{a}\)).

Instead of squareSpeedAndDirectionChangePerLoop, use squareAcceleration.

7. Simulation End
🔝

Press 'play' to run the code.

After squareVelocity += squareAcceleration;, type:

if (squarePosition < 100 && squareVelocity < 0) {
  noLoop();
}

Press 'play'.
Challenge: can you end the simulation when the object is behind the origin and moving to the left?
Challenge: can you end the simulation when the object is ahead of the origin and moving to the right?

Sample Solution

Takeaway

When will you stop simulating motion? As the creator of the simulation, the answer is up to you. In this case, it depends on the object's location and direction of motion.
noLoop() prevents the code in draw() from running over and over again.
Checking for two conditions to be true requires the logical AND operator (&&).
Reference: noLoop(), && (logical AND)

8*. Bonus Challenge: End When Stopped
🔝

By modifying the code below, can you end the simulation when the object comes to a stop (i.e. prevent the object from reversing its direction)?

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.
+= (addition assignment)	`x += 1;`	Takes the current value of `x` and adds `1` to it.
noLoop()	`noLoop();`	Stops all the code in `draw()` from looping over and over again.
&& (logical AND)	`if (t > 10 && x >= 0) { background('blue'); }`	If the variable `t` is greater than \(10\) AND the variable `x` is greater than or equal to \(0\), the canvas will be painted blue.

Physics and Code Tutorial 2: Simulating Motion

Using p5.js and the p5.js editor

1. Same-Speed Motion I🔝

2. Same-Speed Motion II🔝

3. Speeding Up🔝

4. Slowing Down🔝

5. Simulating Motion🔝

6. Physics Terms🔝

7. Simulation End🔝

8*. Bonus Challenge: End When Stopped🔝

p5.js Cheat Sheet🔝

1. Same-Speed Motion I
🔝

2. Same-Speed Motion II
🔝

3. Speeding Up
🔝

4. Slowing Down
🔝

5. Simulating Motion
🔝

6. Physics Terms
🔝

7. Simulation End
🔝

8*. Bonus Challenge: End When Stopped
🔝

p5.js Cheat Sheet
🔝