Physics and Code Tutorial Live!

2: Simulating Motion

1. Same-Speed Motion I

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

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)?
- slow down while moving to the left?
- speed up while moving to the left?

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

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, 7. Simulation End

Challenge!

Can you end the simulation when the object is
- behind the origin and moving to the left?
- 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

Challenge!

Can you end the simulation when the object comes to a stop (i.e. prevent the object from reversing)?

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.

previous:
Physics and Code Tutorial 1: Coding Basics

next:
Physics and Code Tutorial 3: Physics and Code