1 of 18

The Distance Formula

@BootstrapWorld

2 of 18

Distance in 1 Dimension

Sign in to code.pyret.org (CPO) and open your saved Game Starter File.

At this point:

The Target and Danger should be moving on their own.
Your Player should respond to keypresses.
The Target and Danger should reappear after they leave the screen.

It's almost fully-playable!

3 of 18

Distance in 1 Dimension

What seems to be missing from this game?
What does it mean for characters to 'hit' one another? To collide?
How will the computer know when the characters have collided?

4 of 18

Distance in 1 Dimension

Role-Play: Two Characters Collide!

Identify a "number line" on the floor or across a wall of your classroom as the backdrop for your movement.
Make sure that you and your volunteer stand with feet as close together as possible, representing the infinitely small point that identifies your center.
Raise your arms to form a "T shape", representing the outer edges of the characters.
Emphasize that this represents one dimension (perhaps the x-axis).
With the volunteer, stand about 10 steps away from one another and side-step towards each other one step at a time, while asking the class, "True or False? We are colliding!" Be sure to only accept "true" and "false" as responses - not "yes" and "no"!
Ask the class how far apart you and your volunteer are. How they would calculate this if you were standing on a number line and they could see the actual coordinates under your feet?
After a few iterations, try switching places and repeating. Point out that students always subtract the smaller number from the larger one, regardless of the character order! The results are always positive.
Do this until students can clearly see that collision happens when the two characters are touching or overlapping in some way - NOT when they are at the same point.

5 of 18

Distance in 1 Dimension

Role-Play: Two Characters Collide!

6 of 18

Distance in 1 Dimension

Our game computes 1-dimensional distance (vertical or horizontal) using a function called line-length. Let's explore how it works!

Find the line-length function in your game files and take a minute to look at the code.
What do you notice?
What do you wonder?
Click Run, and practice using line-length in the Interactions Area with different values for a and b.

7 of 18

Distance in 1 Dimension

In your own words, what does the line-length function do?
How does it work?
Why does it use conditionals?

8 of 18

Distance in 1 Dimension

line-length computes the positive distance between two points on a single number line.

If two coordinates differ by their x-values, this function will tell us how far apart they are.

If two coordinates differ by their y-values, this function will tell us how far apart they are.

But what if the coordinates differ by both x and y...?

9 of 18

Distance in 2 Dimensions

Scroll down to 4. Collisions in your game file and look for the distances-color definition.

Right now this value is defined to be the empty string "". Change this to a color that will show up on your background, and click Run.

This setting will draw lines from your Player to each of the other characters, and then uses those lines as the hypotenuse of right triangles!

The legs of these triangles show the distance in 1 dimension each (on the x- and y-axis).

10 of 18

Distance in 2 Dimensions

In order to compute the diagonal distance between two characters in a video game, we'll need a special formula that considers both the vertical and the horizontal distances between them!

When we turned on distances-color in our game, we saw the diagonal distance between two characters represented as the hypotenuse of a right triangle.

How do we find the hypotenuse of a right triangle if we know the measures of both of its legs?
If we had one player at (0,0) and another player at (4,3), we'd see a right triangle and the lengths of the legs would be 3 and 4. How would we use the Pythagorean Theorem to find the hypotenuse of the triangle?

11 of 18

Distance in 2 Dimensions

Connecting Pythagorean Theorem to video games:

On the next slide you'll watch a video created by Tovah Brown of a geometric proof of the Pythagorean theorem, and its application to finding distance between game characters.

Try your best to explain the proof from the video to a partner.
What questions do you have?

12 of 18

Distance in 2 Dimensions

13 of 18

Distance in 2 Dimensions

Turn to Distance on the Coordinate Plane and look at how line-length is used in the code. See if you can figure out how to write the code for the second problem.
Then turn to Circles of Evaluation: Distance between (0, 2) and (4, 5). Convert this expression to a Circle of Evaluation, and then to code.
Then we'll make sure we really understand it all with Multiple Representations: Distance between two points by combining circles of evaluation, code, computation and a sketch on a graph.

14 of 18

Distance in 2 Dimensions

For more practice writing code to generate the distance between two fixed points, complete Distance From Game Coordinates

Optional: for more practice, complete Distance From Game Coordinates 2

15 of 18

Distance in 2 Dimensions

All of the practice we've done so far today focused on a screenshot of a moment in time. With the game stopped in that moment, we knew either the exact location of our characters or the exact distances between them.

But, as we play our games, the characters are constantly changing locations!

In order to calculate the distance between two objects whose locations are constantly changing, we need to use variables!

16 of 18

Distance in 2 Dimensions

Turn to Distance (px, py) to (cx, cy) and use the Design Recipe to help you write a function that takes in two coordinate pairs (four numbers) of two characters (px, py) and (cx, cy) and returns the distance between those two points.

HINT: The code you wrote in Circles of Evaluation: Distance between (0, 2) and (4, 5) can be used to give you your first example!

When you're done, fix the broken distance function in your game file, click Run and check that the right triangles in your file now appear with reasonable distances for the hypotenuse.

17 of 18

Distance in 2 Dimensions

Optional:

If we knew the lengths of the hypotenuse and one leg of the triangle, could we use the formula A² + B² = C² to compute the length of the other leg?

Take a look at the two examples on Comparing Code: Finding Missing Distances.

There's a subtle difference between the two examples! What is it?
Can you explain why they need to be written differently?

18 of 18

Additional Exercises

Use the Design Recipe to solve Word Problem: line-length on their own.
Modify line-length to make use of the absolute value function: num-abs.