Using the Pythagorean theorem and what they know from Bootstrap:1, students write a distance function for their games
So far, none of the animations we’ve created included any distance or collision-detection functions. However, if you want to make a game where the player has to hit a target, avoid an enemy, jump onto platforms, or reach a specific part of the screen, we’ll need to account for collisions. This is going to require a little math, but luckily it’s exactly the same as it was in Bootstrap:1.
This lesson is part of a series of features meant to come at the end of the Bootstrap:2 units. Once students have made a number of simple animations and games, they will have lots of ideas for what they want to make next and add to their existing games. We’ve included a number of the most requested features in these lessons. Because each students’ game will be different, we’ve used a Pyret version of the original Ninja Cat game as an example program, but this lesson can be adapted to add collision detection to any game.
Finding the distance in one dimesion is pretty easy: if the characters are on the same number line, we subtract the smaller coordinate from the larger one, and we have our distance.
In the image above, how far apart are the cat and dog?
If the cat was moved one space to the right, how far apart would they be?
What if the cat and dog switched positions?
When the cat and dog were switched, did you still subtract the dog’s position from the cat’s, or subtract the cat’s position from the dog’s? Why?
Draw a number line on the board, with the cutouts of the cat and dog at the given positions. Ask students to tell you the distance between them, and move the images accordingly. Having students act this out can also work well: draw a number line, have two students stand at different points on the line, using their arms or cutouts to give objects of different sizes. Move students along the number line until they touch, then compute the distance on the number line.
- Unfortunately, most distances aren’t only measured in one dimention. We’ll need some code to calculate the distance between two points in two dimentions.
Let’s start with what we do know: if we treat the x- and y-intercepts of C as lines A and B, we have a right triangle.
How could you find the distance between the two points shown in this image?
How could you find the length of the C, also called the Hypotenuse?
What is the line-length of A? Would it be different if the triangle pointed downward, and intercepted the point (0, -4)?
Draw this image on the board, with the lines labeled "A", "B", and "C".
Ancient civilizations had the same problem: they also struggled to find the distance between points in two dimensions. Let’s work through a way to think about this problem: what expression computes the length of the hypotenuse of a right triangle?
A large, white square with a smaller one drawn inside
Four gray triangles, all the same size
Everyone will have a packet with the same materials, but each group’s triangles are a little different. The activity workes with triangles of all sizes, so each pair will get to test it out on their own triangles. Draw the diagram on the board.
For any right triangle, it is possible to draw a picture where the hypoteneuse is used for all four sides of a square. In the diagram shown here, the white square is surrounded by four gray, identical right-triangles, each with sides A and B. The square itself has four identical sides of length C, which are the hypoteneuses for the triangles. If the area of a square is expressed by , then the area of the white space is .
Have students place their gray triangles onto the paper, to match the diagram.
- By moving the gray triangles, it is possible to create two rectangles that fit inside the original square. While the space taken up by the triangles has shifted, it hasn’t gotten any bigger or smaller. Likewise, the white space has been broken into two smaller squares, but in total it remains the same size. By using the side-lengths A and B, one can calculate the area of the two squares.
What is the area of the smaller square? The larger square?
You may need to explicitly point out that the side-lengths of the triangles can be used as the side-lengths of the squares.
- The smaller square has an area of , and the larger square has an area of . Since these squares are just the original square broken up into two pieces, we know that the sum of these areas must be equal to the area of the original square:
Does the same equation work for any values of A and B?
To get C by itself, we take the square-root of the sum of the areas:Pythagoras proved that you can get the square of the hypotenuse by adding the squares of the other two sides. In your games, you’re going to use the horizontal and vertical distance between two characters as the two sides of your triangle, and use the Pythagorean theorem to find the length of that third side.
Remind students that A and B are the horizontal and vertical lengths, which are calculated by line-length.
Now you’ve got code that tells you the distance between the points (4, 2) and (0, 5). But we want to have it work for any two points. It would be great if we had a function that would just take the x’s and y’s as input, and do the math for us.
Turn to Page 44 of your workbook - you’ll see the formula written out.
Draw out the circle of evaluation, starting with the simplest expression you can see first.
Once you have the circle of evaluation, translate it into Pyret code at the bottom of the page, starting with
You still need a function to check whether or not two things are colliding.
Turn to Page 45, and read the problem statement and function header carefully.
Use the Design Recipe to write your distance function. Feel free to use the work from the previous page as your first example, and then come up with a new one of your own.
When finished, type your distance functions into your game, and see what happens.
Does anything happen when things run into each other?
Pay careful attention to the order in which the coordinates are given to the distance function. The player’s x-coordinate (px) must be given first, followed by the player’s y (py), character’s x (cx), and character’s y (cy). Just like with making data structures, order matters, and the distance function will not work otherwise. Also be sure to check that students are using num-sqr and num-sqrt in the correct places.