60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
|
// Code layout taken from http://www.mozbox.org/pub/green/main.js
|
||
|
|
|
||
|
|
var processor = {
|
||
|
|
doLoad: function() {
|
||
|
|
this.video = document.getElementById("video");
|
||
|
|
|
||
|
|
this.c1 = document.createElement("canvas");
|
||
|
|
this.c1.width = "160"
|
||
|
|
this.c1.height = "96"
|
||
|
|
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 / 2;
|
||
|
|
self.height = self.video.videoHeight / 2;
|
||
|
|
self.len = self.width * self.height;
|
||
|
|
|
||
|
|
self.video.addEventListener('timeupdate', function(event) {
|
||
|
|
self.computeFrame()
|
||
|
|
}, true);
|
||
|
|
}, false);
|
||
|
|
},
|
||
|
|
|
||
|
|
computeFrame: function() {
|
||
|
|
var frame, data, i, num, rgba
|
||
|
|
|
||
|
|
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
|
||
|
|
frame = this.ctx1.getImageData(0, 0, this.width, this.height);
|
||
|
|
data = frame.data;
|
||
|
|
|
||
|
|
num = Math.floor(Math.random()*3)
|
||
|
|
|
||
|
|
for (i = 0; i < this.len; i++) {
|
||
|
|
rgba = data.getPixel(i);
|
||
|
|
|
||
|
|
data.setPixel(i, 0, rgba[num]);
|
||
|
|
data.setPixel(i, 1, rgba[num]);
|
||
|
|
data.setPixel(i, 2, rgba[num]);
|
||
|
|
}
|
||
|
|
this.ctx2.putImageData(frame, 0, 0);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Array.prototype.getPixel = function(number) {
|
||
|
|
var real = number * 4;
|
||
|
|
return this.slice(real, real + 4);
|
||
|
|
};
|
||
|
|
|
||
|
|
Array.prototype.setPixel = function(number, rgba, val) {
|
||
|
|
var real = number * 4 + rgba;
|
||
|
|
if (number < 0 || real > this.length)
|
||
|
|
return;
|
||
|
|
this[real] = val;
|
||
|
|
};
|
||
|
|
|