Video : Green to Blue

by Tushar Thakare

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
   <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″ />
   <style>
   div {
       float: left;
       border: 1px solid #444444;
       padding: 10px;
       margin: 10px;
       background: #3B3B3B;
   }
   </style>
   <script type=”text/javascript” src=”main.js”></script>
</head>
<body onload=”processor.doLoad()”>
   <div>
       <video id=”video” src=”kermit.mp4″ controls=”true” width=”480″ height=”360″ type=”video/mp4″></video>
   </div>
   <div>
       <canvas id=”c1″ width=”480″ height=”360″ style=”display:none;”></canvas>
       <canvas id=”c2″ width=”480″ height=”360″></canvas>
   </div>
</body>
</html>

JavaScript

var processor = {
 timerCallback: function() {
   if (this.video.paused || this.video.ended) {
     return;
   }
   this.computeFrame();
   var self = this;
   setTimeout(function () {
       self.timerCallback();
     }, 0);
 },
 doLoad: function() {
   this.video = document.getElementById(“video”);
   this.c1 = document.getElementById(“c1”);
   this.ctx1 = this.c1.getContext(“2d”);
   this.c2 = document.getElementById(“c2”);
   this.ctx2 = this.c2.getContext(“2d”);
   var self = this;
   this.video.addEventListener(“play”, function() {
       self.width = self.video.videoWidth;
       self.height = self.video.videoHeight;
       self.timerCallback();
     }, false);
 },
 computeFrame: function() {
   this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
   var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
var l = frame.data.length / 4;
   for (var i = 0; i < l; i++) {
     var r = frame.data[i * 4 + 0];
     var g = frame.data[i * 4 + 1];
     var b = frame.data[i * 4 + 2];
     var hsl=this.rgbToHsl(r,g,b);
     var hue=hsl.h*360;
     // green to blue
     if (hue > 55 && hue < 185){
       var newRgb=this.hslToRgb(hsl.h+.35,hsl.s,hsl.l);
       frame.data[i * 4 + 0] = newRgb.r;
       frame.data[i * 4 + 1] = newRgb.g;
       frame.data[i * 4 + 2] = newRgb.b;
       frame.data[i * 4 + 3] = 255;
     }
     // blue to green
     if (hue >= 185 && hue < 270){
       var newRgb=this.hslToRgb(hsl.h-.25,hsl.s,hsl.l);
       frame.data[i * 4 + 0] = newRgb.r;
       frame.data[i * 4 + 1] = newRgb.g;
       frame.data[i * 4 + 2] = newRgb.b;
       frame.data[i * 4 + 3] = 255;
     }
   }
   this.ctx2.putImageData(frame, 0, 0);
   return;
 },
 ////////////////////////
 // Helper functions
 //
 rgbToHsl: function(r, g, b){
   r /= 255, g /= 255, b /= 255;
   var max = Math.max(r, g, b), min = Math.min(r, g, b);
   var h, s, l = (max + min) / 2;
   if(max == min){
     h = s = 0; // achromatic
   }else{
     var d = max – min;
     s = l > 0.5...