From 38b2a0d6928a7e29d7ac7a2332c3cccb1708ad30 Mon Sep 17 00:00:00 2001
From: Richard Knight <q@1bpm.net>
Date: Mon, 24 Aug 2020 14:47:08 +0100
Subject: initial

---
 web/main2.js | 194 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 web/main2.js

(limited to 'web/main2.js')

diff --git a/web/main2.js b/web/main2.js
new file mode 100644
index 0000000..6d3108a
--- /dev/null
+++ b/web/main2.js
@@ -0,0 +1,194 @@
+var ReReReRe = function() {
+	$("#nojs").remove();
+	var cnt = 0;
+	var inuse = [];
+	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 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 />");
+	});
+
+	//var res = [1920, 1080];
+
+	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 img = new Image();
+		img.src = randomSource();
+		$("#latest").html($("<a />").text(img.src).attr("href", img.src));
+		function remove() {
+			delete img;
+		}
+
+		var descriptorLength = 256;
+		var matchesShown = 30;
+		var blurRadius = 3;
+		img.onload = function() {
+			for (var x = 0; x < randomInt(10); x++) {
+				var staging = $("<canvas />").attr("width", this.width).attr("height", this.height);
+				var scontext = staging[0].getContext("2d");
+				scontext.drawImage(img, 0, 0, this.width, this.height);
+
+
+				if (cnt != 0) {
+					var imageData1 = context.getImageData(0, 0, res[0], res[1]);
+					var imageData2 = scontext.getImageData(0, 0, this.width, this.height);
+
+					var gray1 = tracking.Image.grayscale(tracking.Image.blur(imageData1.data, width, height, blurRadius), width, height);
+					var gray2 = tracking.Image.grayscale(tracking.Image.blur(imageData2.data, width, height, blurRadius), width, height);
+					var corners1 = tracking.Fast.findCorners(gray1, width, height);
+					var corners2 = tracking.Fast.findCorners(gray2, width, height);
+					var descriptors1 = tracking.Brief.getDescriptors(gray1, width, corners1);
+					var descriptors2 = tracking.Brief.getDescriptors(gray2, width, corners2);
+					var matches = tracking.Brief.reciprocalMatch(corners1, descriptors1, corners2, descriptors2);
+					matches.sort(function(a, b) {
+						return b.confidence - a.confidence;
+					});
+
+					for (var i = 0; i < Math.min(matchesShown, matches.length); i++) {
+						scontext.globalCompositeOperation = "destination-in"; // source-in ???
+						context.fillStyle = "#FFFFFF";
+					
+						scontext.fillRect(matches[i].keypoint1[0], matches[i].keypoint1[1], 4, 4);
+						scontext.fillRect(matches[i].keypoint2[0] + width, matches[i].keypoint2[1], 4, 4);
+						scontext.beginPath();
+						scontext.moveTo(matches[i].keypoint1[0], matches[i].keypoint1[1]);
+						scontext.lineTo(matches[i].keypoint2[0] + width, matches[i].keypoint2[1]);
+						scontext.fill();
+					}
+
+
+					context.globalCompositeOperation = randomGCO();	
+				}
+				// screen, luminosity, xor, color, saturation
+				//context.globalAlpha = (Math.random()/2) + 0.5;
+
+				var rotate = randomBoolean();
+				if (rotate) { // apply rotation
+					context.save();
+					var degrees = Math.random()*30;
+					if (randomBoolean()) degrees = -degrees;
+					context.rotate(degrees*Math.PI / 180);
+				}
+
+				var pos = randomPosition(this.width, this.height);
+
+				context.drawImage(staging[0], pos[0], pos[1], this.width, this.height);
+			
+				staging.remove();
+				if (rotate) {
+					context.restore();
+				}
+			}
+			cnt ++;
+			this.onload = null; // get one frame from mjpeg only
+			// doesn't work, shit carries on loading. setTimeout(function() { img = null; }, 1000);
+			setTimeout(remove, 1500);
+
+		};
+	};
+
+	function step() {
+		var x = new Source();
+		setTimeout(step, randomInt(5000)+2000);
+	}
+	
+	$.ajax({
+		dataType: "json",
+		url: "sources.json",
+		success: function(response) {
+			sources = response.data;
+			step();
+		}
+	});
+
+	function pmover() {
+		$("#details").show();
+		$("#pi").off("mouseover");
+		$("#details").mouseleave(function(){
+			$(this).hide();
+			$(this).off("mouseleave");
+			$("#pi").mouseover(pmover);
+		});
+	}
+
+	$("#clear").click(function(){
+		context.clearRect(0, 0, res[0], res[1]);
+	});
+
+	$("#pi").mouseover(pmover);
+
+	$("#snap").click(function(){
+		var data = canvas[0].toDataURL();
+		$.ajax({
+			type: "POST",
+			url: "req/request.py",
+			data: {
+				image: data
+			},
+			success: function(response) {
+				alert("ok? " + response.ok);
+			}
+		});
+	});
+
+};
+
+
+
+
+
+$(function(){
+	window.rererere = new ReReReRe();
+});
-- 
cgit v1.2.3