HTML and CSS Reference
In-Depth Information
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
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
:
