How does collisions caculates when developing game in Build an HTML5 Game book

Question

I don't understand author's logic when calculating collisions between two circles (bubbles). Here is the Calculating collisions section.

Author writes:

The bubble being fired follows a set of coordinates defined by the equations:

px = ex + tdx py = ey + tdy

where px and py are points on the trajectory of the bubble’s center point. The calculation of px and py happens in jQuery’s animate method and is the standard equation for moving a point along a line. Next, we’ll calculate t at the closest point on this line to the center of the bubble that we’re checking against:

var t = dx * distToBubble.x + dy * distToBubble.y;

I don't understand what t is and why it calculates by the following formula:

var t = dx * distToBubble.x + dy * distToBubble.y;?

Answer 1

They are describing how to get the nearest point on the moving circle trayectory to the "checking" circle center, without using vector math. Or better , using it but without telling that.

var t = dx * distToBubble.x + dy * distToBubble.y;

is simply the dot product of the moving vector (velocity vector) and the direction vector from moving circle. Hope this image can help :

t is the "projection length" of red vector on black vector. With t you can calculate the green vector and so the position of red point(the closest point). If closest point is inside checking circle then there will be a collision..

Answer 2

I think that the author is describing how to calculate a bounding sphere in a (rather poor, IMHO) roundabout way. I skimmed over the text you linked to and it doesn't make any sense to me, either.

The basic concept of a bounding sphere is that the distance between the center of the object and any point on the sphere is always the same. So all you need to do to calculate collision is check whether or not the point you're testing against is closer to the center point of the object than the radius of the sphere.

I imagine that the point the author wants to test against is a point on the trajectory of the bubble and they're using vector math to find it, or trying to find a common point between the vector of the bubble's path and a vector from whatever it's colliding against.

What I would do instead is using the distance formula to find the distance between the center points of both bubbles (or whatever) and if that distance is smaller than the radius of the bubble, you have a collision. My gut feeling is that is what the author is trying to explain but not doing it very clearly.

Finding the distance between two points