06.

04 Collision Detection
When a user sees shapes moving on a screen, and the shapes touch, they user usually expects
some interaction between the shapes. Collision detection refers to programmatically determine
whether one drawn shape interacts or collides with another. It does not matter whether the
movement is driven programmatically (animated), or by keyboard interactions.
For collision detection, the program needs to know 3 things:

1) the direction the shapes are moving, establishing the “leading edges” of the shapes
2) the location of these leading edges
3) when these leading edges meet

The programmer then will have coded some reactive behaviour to result from this collision.

Consider two shapes A and B - the program needs to know the direction A is moving, so it
knows which is A’s leading pixel’s coordinates (ie (x, y)). Then, the program needs to compare
these coordinate(s) with the leading pixel of shape B, closest to A (eg (a,b)). If the coordinates
equal or “cross”, then the shapes have collided.
A B
A is moving right
Clearly, the easiest calculations are for left/right, or
up/down movements. If the shapes are moving
left/right, the program compares x-coordinates only.
If the shapes are moving up/down, the y-coordinates leading edge

are compared.

The x-coordinates of the leading edges of the two A B

shapes equal each other, so the shapes are drawn
touching. Visually it looks like A and B have collided.
Compare x-coord of points

A B
For example, the 06.03_keyboard_interaction.py can be modified with just the following code
so that the ball will stop at the right edge of the window. You can think of the right side of the
window as the leading edge of an object on the right, moving leftwards.

line 1: WINDOW_DIMEN = 500 #The window’s right edge is at column 500

line 2: CIRCLE_WIDTH = 50
:

line 3: def move_right(event=" "):

line 4: global MOVE_HORIZ, upper_left_x, lower_right_x
line 5: upper_left_x = upper_left_x + MOVE_HORIZ
line 6: lower_right_x = lower_right_x + MOVE_HORIZ

line 7: #Check if right edge of ball reaches the window's edge

line 8: if (lower_right_x > WINDOW_DIMEN):
line 9: #Reset the ball's location parameters so it drawn at
line 10: #the same spot, appearing to have collided with the window's
line 11: #edge
line 12: upper_left_x = WINDOW_DIMEN - CIRCLE_WIDTH
line 13: lower_right_x = WINDOW_DIMEN

Lines 1 – 2: These measurement will be used several times, so they should be coded as
constants

Lines 3 – 6 : This code already existed, from the animation lesson

Lines 7 – 13 : New code added to the event “move_right”.

WINDOW_DIMEN

Since “move_right” calculates the ball’s horizontal movement

Window's
to the right, we want to detect when the right side of the ball edge
reaches the window’s edge.

The logic of line 8 is to compare the x-coordinate of the right

edge of the ball (lower_right_x), to the location of the right
side of the window (WINDOW_DIMEN).

If the ball has not reached the edge (ie is less than), then do
CIRCLE_WIDTH
nothing new, and allow the code to work as before. But if the
event means the ball has reached the edge (ie. greater than), upper_left_x lower_right_x
then set the x-coordinates so the ball is drawn just touching
the window’s edge.
Advanced Note:

As noted in class before, there often is more than 1 way to code a particular algorithm. The
code in “move_right” could have been written to use an “else” branch, and move the old
statements into that else branch.

if (lower_right_x > WINDOW_DIMEN):

upper_left_x = WINDOW_DIMEN - CIRCLE_WIDTH
lower_right_x = WINDOW_DIMEN
else:
upper_left_x = upper_left_x + MOVE_HORIZ
lower_right_x = lower_right_x + MOVE_HORIZ

The pros and cons are:

The actual example method:
Pro: The design highlights the default situation, of moving to the right. The
exception case is hitting the wall.
Con: From an execution point, when hitting the wall, the code has to execute
more statements in the exception case, than the other method.

The method above (using “else”):

Pro: All cases execute the same number of statements (including the case of hitting
the wall).
Con: The design does not highlight the main, more common situation versus the
exception case.
 06.04 Collision Detection

06.04.01
a) Expand the 06.04_colllision_example.py program to move left, and to stop at
the left wall.
b) Modify your program that allows up/down movement (a) so that it stops at the
top edge or bottom edge of the window.

06.04.02
Write a program which starts with 2 shapes drawn (your choice of shapes), shape A and
shape B. A is drawn at the left edge of the window; B at the right. They are at the same
height.
The program starts animating the shapes to move toward each other, A moving right, B
moving left.
When the two shapes collide, they stop moving.

06.04.03 Simple Game

Write a “ball_drop” program that starts a ball at the top of the screen, then animates it
falling.
At the bottom of the screen draw a graphic of a ground with a hole.
Add the user action that the user can press left/right keys and the ball moves left/right,
respectively, while still steadily falling.
If the ball hits the ground, the user fails; if the ball hits the hole, the user succeeds.
Provide some message of success or failure.
Use the ESC key to end the program.
Below are examples of the program interface.
Advanced:
06.04.04 Predator/Prey 2 player game
Expanding on the programs of 06.04.01, write a two person game, where there are two
circles, with one set of keys controlling the movement of one circle (eg arrow keys), and
another set of keys controlling the other (eg WASD). The shapes can move
up/down/left/right.

Make one circle the “predator” – it is the larger of the two circles.
Make the other circle the “prey” – it moves a little faster.

If the circles overlap (collide), then the “predator” has captured the “prey”. If the “prey”
can avoid capture for x number of moves, then it has escaped. You decide the number
of moves.

Hint: Use concepts from grade 10 math, and the library “math” and function “sqrt()”.

eg. import math

:
math.sqrt()

FYI. Although it may appear complicated, as a rule of thumb, my program for this is
about 150 lines.

06.04.05 Hurdler

In the screen shot to the right the red shape is moving from right
to left, heading to the yellow shape.
Write a program to allow the user to make the yellow shape jump
up (like Mario!) – make the jump follow the laws of gravity so the
yellow shape moves up, reaches a maximum height, the lands
back where it started from. Ie the jump is straight up then down.
If the yellow shape clears the red, print a congratulatory
message. If the yellow shape does not, then the two shapes
have collided so print a sad message ☹

Hint: use grade 10 math for the jump.