diff options
Diffstat (limited to 'web/main2.js')
| -rw-r--r-- | web/main2.js | 194 |
1 files changed, 194 insertions, 0 deletions
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(); +}); |