HTML and CSS Reference
xMin and yMin give us the location of the top-left corner of the intersection, and xMax and
yMax give us the bottom-right corner of the intersection.
Thenextstepistocreateanestedloopwhereweiterate thoughallthehorizontal( x )valuesin
the intersection and through each vertical pixel ( y ). At each of these points, we find the trans-
parency value for the pixel in each object at that point and compare it to 0.
The pixelX loop
for ( var
var pixelX = xMin ; pixelX < xMax ; pixelX ++ )
Next we create a nested loop for the y positions in the intersection area.
The nested pixelY loop
for ( var
var pixelY = yMin ; pixelY < yMax ; pixelY ++ )
Whenwehavebotha pixelX valueand pixelY value,weneedtofindthetransparency value
for that pixel in each of our objects. Remember that ImageData objects are simply a single-
dimensional arrayoffournumbersforeachpixelintheimage. So,everyfourthnumberinthe
array is the transparency value for a pixel. Therefore, the transparency value for a single pixel
in our array will be found by using the following steps:
1. Subtract the current x value of our object from the current pixelX value.
2. Add the result of subtracting the current y of our object from the current pixelY value
to the result in step 1.
3. Multiply the new value by 4 (because a pixel is every four values in our array).
4. Add 3 to this to find the transparency value.
It sounds complicated, but the code to find the red and blue object pixels comes out looking
var bluepixel = (( pixelX - blueObject . x ) + ( pixelY - blueObject . y )
* blueObject . width ) * 4 + 3 ;
var redpixel = (( pixelX - redObject . x ) + ( pixelY - redObject . y )
* redObject . width ) * 4 + 3 ;
The collision check
When we have the transparency value for both pixels, to see whether they collide is a simple
matter of making sure that both bluepixel and redpixel in our ImageData arrays for the
objects are both not 0 :