/////////////

// SAMPLE THE IMAGE(S) OR VIDEO(S) HERE
var img1 = new Image();
img1 = document.getElementById('img1');

var imgW = img1.width;
var imgH = img1.height;

context.drawImage(img1, 0,0, imgW, imgH);

// RETRIEVE THE PXxPX RGBA INFO AND STORE IN data
var imgData = context.getImageData(0,0,imgW, imgH);
var data = imgData.data;

// REDRAW THE IMAGE IN AS MANY STEPS AS NEEDED

// inc = SAMPLE THE COLORS AT inc INTERVALS
var inc = Math.round(mouseX/2)+5;

// REPRESENT THE COLOR INFO USING A MATRIX
// IN THIS CASE THE SAME W AND H AS THE ORIGINAL IMAGE
for (var y = 0; y<imgH; y+=inc) {
for (var x=0; x<imgW; x+=inc) {

// FOR EACH REPRESENTING BOX
// RETRIEVE THE rgba INFO FOR EACH SAMPLED PIXEL
var r = data[((imgW * y) + x) * 4];
var g = data[((imgW * y) + x) * 4 + 1];
var b = data[((imgW * y) + x) * 4 + 2];
var a = data[((imgW * y) + x) * 4 + 2];

// DRAW THE BOXES REPRESENTING THE IMAGE
context.save();
context.beginPath();
context.rect(x+imgW-inc/2,y+imgW/3-inc/2,inc,inc);
context.fillStyle = "rgb("+r+","+g+","+b+")";
context.fill();
context.closePath();
context.restore();

}
}