Images on the Canvas - HTML5 Canvas - page 294

Checking for Intersection Between Two Objects

Afterwehavedetected thatwehaveaboundingboxcollision,wecansimplyloopthroughall
of the pixels in each ImageData set, find the ones that match, and then check to see whether
the alpha value for that pixel is 0. The problem with this approach is that it is slow and pretty
much unusable for objects larger than a few pixels in width and height. Our 48×48 pixel im-
ages are each composed of 2,304 individual pixels. That is far too many to loop through on
each frame tick, even for a single collision test. What we are going to do first is find where
the two bounding boxes for our objects intersect and then check only those pixels.

Figure 4-20 shows an area of intersection where there would be a pixel-based collision.

Figure 4-20. The area where a pixel based collision will take place

To check the pixels in only the area of intersection rather than the entire set of pixels in each
object, we need to first find this area of intersection. We will accomplish this by using the
Math.min and Math.max Javascript functions on the current object positions and their associ-
ated widths and heights:

var var xMin = Math . max ( blueObject . x , redObject . x );

var var yMin = Math . max ( blueObject . y , redObject . y );

var

var xMax = Math . min ( blueObject . x + blueObject . width , redObject . x + redObject . width );
var var yMax = Math . min ( blueObject . y + blueObject . height , redObject . y + redObject . height

Based on the locations of the two objects and the width (or height, depending on the axis),
these will give us four values needed to define the area in intersection.