VIDEO CANVAS 01

 

MOVE THE MOUSE OVER THE CANVAS

PROCESSOR INTENSIVE: WORKS ONLY IN THE SERVER ON FIREFOX

<script> 
var vid = new Image();
var canvas, context;
var vw, vh;
var R, G, B, A;
var imageData, data, pixwidth;
var x, y;
var stage, mouseX, mouseY, dh, dv, dm ;
function init() {
 vid = document.getElementById('vid');
  
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');
  
  canvas.addEventListener("mousemove", mouseCoords, false);
  
  vw = 300;
  vh = 300;
  
  return setInterval(drawVid, 20); 
  
  }
function  mouseCoords(event) {
  
  stage = canvas.getBoundingClientRect();
  
  mouseX = event.clientX - stage.left; // this is in case you position canvas using css
 mouseY = event.clientY - stage.top;
 // document.getElementById('display').innerHTML = "Mouse Position: " + mouseX + ", " + mouseY;
  
  }
  
  
  function drawVid() {
  
  context.drawImage(vid,0,0,vw,vh);
  
  imageData = context.getImageData(0, 0, vw, vh); 
  
  data = imageData.data;
  
  pixwidth = 5;
  
  context.clearRect(0,0,canvas.width, canvas.height);
for (y = 0; y < vh; y+=pixwidth) {   // ROWS 
 for (x = 0; x < vw; x+=pixwidth) {   // COLUMNS
  
  ////////// MOUSE DISTANCE
  
  dh = Math.pow(mouseX - x, 2);
  dv = Math.pow(mouseY - y, 2);
  dm = Math.sqrt(dh+dv);
  
  ///////// COLORS
  
  R = data[((vw * y) + x) * 4];
  G = data[((vw * y) + x) * 4 + 1];
  B = data[((vw * y) + x) * 4 + 2];
  A = data[((vw * y) + x) * 4 + 3];
  
  
  
  context.beginPath();
  
  //context.arc(x+pixwidth, y+pixwidth, pixwidth/2, 0, Math.PI*2, true);
  context.rect(vw/2+ x+pixwidth/2 + dm/10, vh/2+y+pixwidth/2 -dm/10, pixwidth, pixwidth);
  context.fillStyle = 'rgba('+(R)+','+(G)+','+(B)+','+(A)+')';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();
  context.closePath(); 
  }
  }
}
</script> 
  
  <meta charset="UTF-8">
  </head>
<body onload="init()" >

<canvas id="myCanvas" width="610" height="610" ></canvas> 
<div id="display"></div>
<video id="vid" loop autoplay width="480" height="320" style="display: none;" > 
  <source src="vid/movie.webm" type="video/webm"> 
  <source src="vid/movie.ogv" type="video/ogg"> 
  <source src="vid/movie.mp4" type="video/mp4"> 
  </video>