1 files changed, 150 insertions, 0 deletions
diff --git a/web/main_var.js b/web/main_var.js
new file mode 100644
index 0000000..eb04449
--- /dev/null
+++ b/web/main_var.js
@@ -0,0 +1,150 @@
+var ReReReRe = function() {
+	$("#nojs").remove();
+	var res = [window.innerWidth, window.innerHeight];
+	var canvas = $("<canvas />").attr("width", res[0]).attr("height", res[1]).css("position", "absolute").css("width", "100%").css("height", "100%").appendTo($("body"));
+	var context = canvas[0].getContext("2d");
+	var sources = [];
+	var actives = [];
+	var supportedGCO = (function getGCOModes() {
+		var ctx = document.createElement('canvas').getContext('2d');
+  		//var gCO = ["source-over", "source-in", "source-out", "source-atop", "destination-over", "destination-in", "destination-out", "destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+  		var gCO = ["destination-atop", "lighter", "copy", "xor", "multiply", "screen", "overlay", "darken", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+		return gCO.filter(function(g) {
+    		ctx.globalCompositeOperation = g;
+    		return ctx.globalCompositeOperation === g;
+  		});
+	})();
+
+	var enabledGCO = {};
+	supportedGCO.forEach(function(val) {
+		var item = $("<label />");
+		var input = $("<input />", {id: "blend"+val}).attr("type", "checkbox").attr("checked", "checked");
+		input.click(function(){
+			enabledGCO[val] = $(this).prop("checked");
+		});
+		item.append(input);
+		item.append(val);
+		enabledGCO[val] = true;
+		$("#blendtypes").append(item).append("<br />");
+	});
+
+	function randomBoolean() {
+		return (Math.random() > 0.5);
+	}
+
+	function randomInt(max) {
+		return Math.floor(Math.random()*max);
+	}
+
+	function randomPosition(wo, ho) {
+		if (wo && ho) {
+			xmax = res[0] - wo;
+			ymax = res[1] - ho;
+		} else {
+			xmax = res[0];
+			ymax = res[1];
+		}
+		return [Math.floor(xmax*Math.random()), Math.floor(ymax*Math.random())];
+	}
+
+	function randomSource() {
+		return sources[Math.floor((sources.length - 1)*Math.random())]
+	}
+
+	function randomGCO() {
+		var gcos = [];
+		for (var k in enabledGCO) {
+			if (enabledGCO[k]) gcos.push(k);
+		}
+
+		return gcos[Math.floor((gcos.length - 1)*Math.random())];
+	}
+
+	var Source = function() {
+		var self = this;
+		var src = randomSource();
+		var staging = null;
+		var scontext = null;
+		var size = null;
+		var blitpos = null;
+		var gcotype = null;
+		this.ready = false;
+		var refreshing = false;
+
+	
+		function refresh() {
+			refreshing = true;
+			var img = new Image();
+			img.src = src;
+			img.onload = function() {
+				if (!size) size = [this.width, this.height];
+				if (!staging) staging = $("<canvas />").attr("width", size[0]).attr("height", size[1]);
+				if (!scontext) scontext = staging[0].getContext("2d");
+				scontext.clearRect(0, 0, size[0], size[1]);
+				scontext.drawImage(img, 0, 0, size[0], size[1]);
+				self.ready = true;
+				this.onload = null;
+				refreshing = false;
+			}
+			setTimeout(function(){
+				delete img;
+			}, 90);
+		}
+
+		this.blit = function() {
+			if (!staging) return;
+			if (!gcotype) gcotype = randomGCO(); //context.globalCompositeOperation = randomGCO();
+			context.globalCompositeOperation = gcotype;
+			//context.globalAlpha = (Math.random()/2) + 0.5;
+			if (!blitpos) blitpos = randomPosition(size[0], size[1]);
+			context.drawImage(staging[0], blitpos[0], blitpos[1], size[0], size[1]);
+
+			self.ready = false;
+			if (!refreshing) refresh();
+		};
+
+		refresh();
+	};
+
+
+	function step() {
+		var anyready = false;
+		actives.forEach(function(a){
+			if (a.ready) {
+				anyready = true;
+			}
+		});	
+		if (anyready) {
+			context.clearRect(0, 0, res[0], res[1]);
+			actives.forEach(function(a){
+				a.blit();
+			});
+		}
+		setTimeout(step, 110);
+	}
+
+	function start() {
+		for (var x = 0; x < randomInt(5)+2; x++) {
+			actives.push(new Source());
+		}
+		step();
+	}
+	
+	$.ajax({
+		dataType: "json",
+		url: "sources.json",
+		success: function(response) {
+			sources = response.data;
+			start();
+		}
+	});
+
+};
+
+
+
+
+
+$(function(){
+	window.rererere = new ReReReRe();
+});