The Pythagorean Theorem allows us to find the distance between any two points in a two-dimensional space if we know the lengths of the line segments that form a right-angle between the points.

a² + b² = c²

In our case, we are trying to calculate the distance (c) between the two points.

A little algebra will transform this equation to:

It is computationally expensive to perform the square root. A nice mathematical trick will actually allow us to perform our collision detection without calculating the square root.

If we were to use square roots to do this calculation, here is what that might look like:

c = sqrt(a * a + b * b);
if (c <= r1 + r2) return true;

Although this would work, there is a nice little mathematical trick that allows us to accomplish this test without taking the square root. Take a look at this:

c = a * a + b * b;
if (c<= r1 * r1 + r2 * r2) return true;

It turns out that we can just keep everything in the equation at the power of 2 and the comparison still works. This is because we are only interested in the relative comparison between the distance and the sum of the radii, not the absolute mathematical values.

Now, it's time to modify Sprite.h to add support for the circular collision detection. First, we need to add some member variables to hold the center point and radius. Add these two properties to Sprite.h:

float m_radius;
Point m_center;

Then add the following methods declarations:

void SetRadius(const GLfloat p_radius) { m_radius = p_radius; }
const float GetRadius() const { return m_radius; }
void SetCenter(const Point p_center) { m_center = p_center; }
const Point GetCenter() const;
const bool IntersectsCircle(const Sprite* p_sprite) const;

These methods allow us to set and retrieve the center point and radius of the sprite. The GetCenter method is more than one line, so we will implement it in Sprite.cpp:

const Sprite::Point Sprite::GetCenter() const
{
  Point center;
  center.x = this->GetPosition().x + m_center.x;
  center.y = this->GetPosition().y + m_center.y;

  return center;
}

An important point to note here is that m_center represents an x and y offset from the sprite's anchor point. So, to return the center point we will add m_center to the current position of the sprite and this will give us the current center point of the sprite exactly where it is in the game.

We now need to add the code to perform the collision detection. Add the following code to Sprite.cpp:

const bool Sprite::IntersectsCircle(const Sprite* p_sprite) const
{
 if (this->IsCollideable() && p_sprite->IsCollideable() && this->IsActive() && p_sprite->IsActive())
 {
  const Point p1 = this->GetCenter();
  const Point p2 = p_sprite->GetCenter();
  float y = p2.y - p1.y;
  float x = p2.x - p1.x;
  float d = x*x + y*y;
  float r1 = this->GetRadius() * this->GetRadius();
  float r2 = p_sprite->GetRadius() * p_sprite->GetRadius();
  if (d <= r1 + r2)
  {
   return true;
  }
 }
 return false;
}

As we have already explained the use of the Pythagorean Theorem, this code should actually seem a little familiar to you. Here is what we are doing:

The function accepts one sprite to compare with itself.

As we discussed many times, textures are represented as rectangles. In fact, we will take advantage of this when we cover rectangular collision detection later in the chapter. The following figure illustrates how rectangular and circular collision detection differ (the relative sizes are exaggerated to make a point):

The sprites on the left are colliding using a rectangular bounding box. The sprites on the right are colliding using a bounding circle. In general, using a bounding circle is visually more convincing when we are dealing with rounder shapes.

With the code that we developed, we need to define the center and radius for any sprites that will use circular collision detection. Add the following code to the LoadTextures function in RoboRacer.cpp:

Sprite::Point center;
float radius;

center.x = robot_right->GetSize().width / 2.0f;
center.y = robot_right->GetSize().height / 2.0f;
radius = (center.x + center.y) / 2.0f;

robot_right->SetCenter(center);
robot_right->SetRadius(radius);
robot_left->SetCenter(center);
robot_left->SetRadius(radius);

center.x = pickup->GetSize().width / 2.0f;
float yOffset = (pickup->GetSize().height / 4.0f) * 3.0f;
center.y = yOffset;
pickup->SetCenter(center);
radius = pickup->GetSize().width / 2.0f;
pickup->SetRadius(radius);

Don't get too worried about the exact values that we are using here. We are basically setting up a bounding circle for Robo and the oil can that match the preceding figure. Robo's bounding circle is set to the middle of the robot, while the oil can's circle is set to the bottom half of the texture.

We are now going to add a new function that will perform all of our collision detection. Add the following function to RoboRacer2D.cpp:

void CheckCollisions()
{
 if (player->IntersectsCircle(pickup))
 {
  pickup->IsVisible(false);
  pickup->IsActive(false);
  player->SetValue(player->GetValue() + pickup->GetValue());
  pickupSpawnTimer = 0.0f;
 }
}

The purpose of this code is to check to see whether the player has collided with the pickup:

We have two small details left. First, you must add a call to CheckCollisions to the Update function:

if (m_gameState == GS_Running)
{
  background->Update(p_deltaTime);
  robot_left->Update(p_deltaTime);
  robot_right->Update(p_deltaTime);
  robot_left_strip->Update(p_deltaTime);
  robot_right_strip->Update(p_deltaTime);
  
  pause->Update(p_deltaTime);
  resume->Update(p_deltaTime);
  
  pickup->Update(p_deltaTime);
  SpawnPickup(p_deltaTime);
  
  CheckCollisions();
}

Secondly, you need to make the player and pickup collideable. Add these three lines to the bottom of LoadTextures just before the return statement:

robot_left->IsCollideable(true);
robot_right->IsCollideable(true);
pickup->IsCollideable(true);

Now, the real fun starts! Play the game and when the oil can spawns, and use Robo to pick it up. Five seconds later another oil can spawns. The fun never ends!