Game Design: Intro to Vector Projections Part II

Lauren Yu
3 min readJun 22, 2020
Pong

This blog picks up where my previous blog post, Game Design: Intro to Vector Projections Part I, left off.

In the last blog post, we reviewed vector basics and ended with how to find a vector projection. So how do we tie this together and find the direction of our bouncing ball using vectors?

FINAL STEPS: FIND VECTOR REFLECTION

  1. Find the the vector that represents your ball’s initial path (red arrow). In order to match the above diagram, we’re starting at the red dot.
    <2,2>
  2. Find the vector that represents your block (black line).
    <4,0>
  3. Find the normal vector to your block (direction of yellow path).
    <0,-4>
  4. Find the reflection vector using the following formula:

For our example,

Finally, add this to the point of collision (aka the intersection of the ball/block vectors). If you want a specific point, you could add the reflected vector to the collision point in vector form (<4,4>+<2,-2> = <6,2>), or if you are just looking for the direction, you could say that starting at point (4,4), for every 2 spaces it goes to the right, move down 2 spaces.

This formula takes your ball vector, v, and subtracts your vector projection of the original ball vector onto the found normal vector multiplied by two. In the digram, this is represented by the two orange vectors. The blue vector that represents the starting point (red dot) to the end point (tip of bottom orange arrow) is the SAME vector that we want our ball to take after hitting the block. Finally, we add the vector to the point of collision. In the case of our game, we could find the point of collision, and then using this formula, we could calculate the direction of the reflection vector (upper blue arrow).

For a deeper explanation of the previous steps, check out this video.

WHY IS THIS USEFUL?

There are a myriad of ways you can incorporate vector projections into your project. Some basic examples include calculating the direction of a bouncing object and identifying where to play a sound if an object shoots past a character’s head. A well-known example is one of the first video games: Pong.

While working on this project, I discovered an awesome YouTube series, Math for Game Developers. I highly recommend checking out the series if you’re interested in gaining a deeper understanding of these math concepts, but I wanted to provide some basic information here for someone that doesn’t have a strong math background.

--

--

Lauren Yu

Software engineer/full-stack developer and founding member of the Breaking Winds Bassoon Quartet.