<script>
var imageObj = new Image();
var data;
var canvas, context;
var destX, destY, sourceWidth, sourceHeight;
var imageData;
var pixwidth;
window.onload = function() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d");
imageObj.src = document.getElementById("myimage").src;
pixwidth = 15;
sampleImage(imageObj);
clearCanvas();
transformImage();
}
function clearCanvas() {
context.clearRect(0,0,canvas.width, canvas.height) ;
document.getElementById('display').innerHTML = data.length;
}
function sampleImage(imageObj) {
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() {
// 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
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];*/
context.beginPath();
//context.arc(x+300+x, y*2, pixwidth, 0, Math.PI*2, true);
context.rect(x+100, y+100, pixwidth, pixwidth);
context.fillStyle = 'rgb('+red+','+green+','+blue+')';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
}
}
function distortImage(event) {
clearCanvas();
var stage = canvas.getBoundingClientRect();
//alert(event.clientX);
var mouseX = event.clientX - stage.left; // this is in case you position canvas using css
var mouseY = event.clientY - stage.top;
document.getElementById('display').innerHTML = mouseX;
// 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
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 A = mouseX - x + 100;
var B = mouseY - y + 100;
var AA = Math.pow(A,2);
var BB = Math.pow(B,2);
var D = Math.sqrt(AA+BB);
//document.getElementById('display').innerHTML = mouseX + " / " + mouseY + " / " +D;
context.save();
context.translate(x+100, y+100);
context.rotate(D/100);
context.beginPath();
//context.arc(-pixwidth/2 + D/10, -pixwidth/2 + D/10, pixwidth + D/30, 0, Math.PI*2, true);
context.rect(-pixwidth/2 + D/10, -pixwidth/2 + D/10, pixwidth , pixwidth );
context.fillStyle = 'rgb('+red+','+green+','+blue+')';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
context.restore();
}
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="1000" onMouseMove="distortImage(event)"></canvas>
<img src="santi_jace.jpg" id="myimage" width="200" height="200" style="display:none;" />
<div id="display"> </div>