zeus.ugent.be/content/assets/scripts/halloween/main.js

77 lines
1.8 KiB
JavaScript

let wasmWorker = new Worker('../assets/scripts/halloween/wasm-worker.js');
var canvas, ctx, img, pseudoCanvas, pseudoCtx, width, height, checkbox;
var inited = false;
var inited = false;
function init() {
checkbox = document.getElementById("ghosts");
checkbox.onchange = updateGhosts;
canvas = document.getElementById("overlaycanvas");
ctx = canvas.getContext("2d");
img = document.getElementById('cammie-feed');
pseudoCanvas = document.createElement("canvas");
pseudoCtx = pseudoCanvas.getContext("2d");
update_w_h();
}
function updateGhosts() {
if(checkbox.checked) {
update_coolness();
}
}
function update_w_h() {
width = img.width;
height = img.height;
pseudoCanvas.width = width;
pseudoCanvas.height = height;
canvas.width = width;
canvas.height = height;
}
function update_coolness() {
if(!inited) {
init();
inited = true;
}
if(! checkbox.checked) {
if(ctx) {
ctx.clearRect(0,0, width, height);
}
return;
}
pseudoCtx.clearRect(0, 0, width, height);
pseudoCtx.drawImage(img, 0, 0);
let message = { cmd: 'faceDetect', img: pseudoCtx.getImageData(0, 0, width, height) };
wasmWorker.postMessage(message);
};
wasmWorker.onmessage = function (e) {
var img2 = document.createElement("img");
img2.src = "../assets/images/Ghost.jpg";
if(e.data.features) {
ctx.clearRect(0,0, width, height);
// e.data.features.push({x: 10, y: 10, width: 100, height: 100});
for (let i = 0; i < e.data.features.length; i++) {
let rect = e.data.features[i];
ctx.fillStyle = 'rgb(0,0,0)';
ctx.drawImage(img2, rect.x, rect.y, rect.width, rect.height);
}
update_coolness();
}
}
setTimeout(update_coolness, 3000);