<img src="marilyn.jpg" id="myimage" width="250" height="259" style="display:none;" />
<script>
// THIS REPLACES THE onload FUNCTION INSIDE THE BODY TAG

  window.addEventListener("load", setup, false);
//////////////////////////////////////////////////

  // DECLARE requestAnimFrame
var fps = 30;
window.requestAnimFrame = function() {
return (
window.requestAnimationFrame ||

  window.webkitRequestAnimationFrame ||

  window.mozRequestAnimationFrame ||

  window.oRequestAnimationFrame ||

  window.msRequestAnimationFrame ||
function( callback ){

  window.setTimeout(callback, 1000 / fps);

  }
)
}();
// DEFINE YOUR GLOBAL VARIABLES HERE
var canvas;

  var context;

  canvas = document.getElementById("myCanvas");

  context = canvas.getContext("2d");
// ADD EVENT LISTENERS
canvas.addEventListener("mousemove", mousePos, false);
///// MOUSE COORDINATES ///////////////////////
var stage, mouseX, mouseY;

  function mousePos(event) {

  stage = canvas.getBoundingClientRect();

  mouseX = event.clientX - stage.left;

  mouseY = event.clientY - stage.top;
}
///// GLOBAL VARIABLES
var counter;
var imageObj = new Image();

  

  var data;

  

  var destX, destY, sourceWidth, sourceHeight;

  

  var imageData;
// INITIALIZE THE STARTING FUNCTION
function setup() {
counter = 0;
mouseX = 0;

  mouseY = 0;
// CALL SUBSEQUENT FUNCTIONS, as many as you need
sampleData();
clear(); // COVER TRANSPARENT CANVAS OR CLEAR CANVAS
draw(); // THIS IS WHERE AL HAPPENS
}
function clear() { // USE THIS AREA TO MODIFY BKGD
context.clearRect(0,0,canvas.width, canvas.height);
}
function sampleData() {

  

  imageObj.src = document.getElementById("myimage").src;

  

  destX = 0;

  destY = 0;

  

  sourceWidth = imageObj.width;

  sourceHeight = imageObj.height;

  

  context.drawImage(imageObj, destX, destY);

  

  imageData = context.getImageData(destX, destY, sourceWidth, sourceHeight);

  

  data = imageData.data;

  

  }
function transformImage() {

  

  var pixwidth = 5;

  // var pixwidth = 5 + Math.round(mouseX/10);
// or iterate over all pixels based on x and y coordinates.
 // loop through each row

  

  for(var y = 0; y < sourceHeight; y+=pixwidth) {   // ROWS 

  

  // loop through each column

  for(var x = 0; x < sourceWidth; x+=pixwidth) {   // COLUMNS

  

  // define the color values 

  var red = data[((sourceWidth * y) + x) * 4];

  var green = data[((sourceWidth * y) + x) * 4 + 1];

  var blue = data[((sourceWidth * y) + x) * 4 + 2];

  

  /*			var red = data[					(y + x) * 4];

  var green = data[				(y + x) * 4 + 1];

  var blue = data[				(y + x) * 4 + 2];*/

  

  var dx = mouseX - x+230;

  var dy = mouseY - y+150;

  

  var D = Math.sqrt( dx*dx + dy*dy );

  

  context.save();

  context.translate(x+230, y+150);

  context.rotate(D/10);

  context.beginPath();

  //context.arc(x+300+x, y*2, pixwidth, 0, Math.PI*2, true);

  context.rect(-pixwidth/2, -pixwidth/2, pixwidth+D/50, pixwidth+D/50);

  context.fillStyle = 'rgb('+red+','+green+','+blue+')';

  context.fill();

  context.restore();

  //context.lineWidth = 1;

  //context.strokeStyle = 'black';

  //context.stroke();

  }

  }

  

  

  }
function draw() {
counter += 0.1; // EASIER FOR SINE COSINE FUNCTIONS
if (counter > 1000) { counter = 0; } // RESET COUNTER WHEN IT REACHES A LIMIT
clear(); // USE THIS TO REFRESH THE FRAME AND CLEAR CANVAS
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START HERE
 

  transformImage();


// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< END HERE
document.getElementById('display').innerHTML = mouseX + " || " + mouseY + " || counter = " + counter;
requestAnimFrame(draw); // THIS CREATES THE ANIMATION
}
</script>