HTML and CSS Reference
InDepth Information
xMin
and
yMin
give us the location of the topleft corner of the intersection, and
xMax
and
yMax
give us the bottomright 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
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
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
like this:
var
var
bluepixel
=
((
pixelX

blueObject
.
x
)
+
(
pixelY

blueObject
.
y
)
*
blueObject
.
width
)
*
4
+
3
;
var
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
: