Playing with Pixels - HTML5 Mobile Game Development - page 340

// Grab the lander's image data
var landerData = imgData.data;
// Create a 3x3 pixel-data
// image data container to use for blitting down the road
this.pixelData = Q.ctx.createImageData(3,3);
this.drawPixel = this.pixelData.data;
// Pixels are going to be exploding out from
// the center of the lander
var centerX = imgData.width / 2;
var centerY = imgData.height / 2;
// Loop over each fourth pixel of the lander image
for(var sy=0;sy < imgData.height;sy+=4) {
for(var sx=0;sx < imgData.width;sx+=4) {
// Offset into the 1 dimension pixel data array
var loc = sx*4 + sy * imgData.width * 4;
// If there's a lander pixel here
if(landerData[loc + 3]) {
// Get the direction of the pixel from center
var distX = sx - centerX;
var distY = sy - centerY;
// Add a new particle
this.particles.push({
x: x + sx, // starting position x
y: y + sy, // starting position y
lifetime: 5, // remaining lifetime
r: landerData[loc] + 20, // make it a little redder
g: landerData[loc+1],
b: landerData[loc+2],
a: landerData[loc+3],
// For particle velocity, use the ship's
// velocity, plus a random direction emanating
// from the center of the ship
vx: vx/6 + distX * 5 *(Math.random()+0.5),
vy: vy/6 + distY * 5 * (Math.random()+0.5)
});
}
}