First commit.

subsites/nohix/videocanvas2.js

@@ -0,0 +1,59 @@
+// 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;
+};
+