diff options
Diffstat (limited to 'main.js')
-rw-r--r-- | main.js | 28 |
1 files changed, 27 insertions, 1 deletions
@@ -12,6 +12,11 @@ let settings = { "blur": { filter: value => value * canvas.width / 100 + 'px' } }; const img = new Image(); +let lensflare_active = false; +let cursor = { + x: 0, + y: 0 +}; // wait for site to be parsed so element can be found document.addEventListener("DOMContentLoaded", function() { @@ -30,6 +35,25 @@ document.addEventListener("DOMContentLoaded", function() { document.getElementById("save").addEventListener("click", save_image) document.getElementById("share").addEventListener("click", share_image) + document.getElementById("lensflare").addEventListener("click", function(event) { + lensflare_active = !lensflare_active; + if (lensflare_active) { + event.target.classList.add("is-primary"); + } else { + event.target.classList.remove("is-primary"); + } + draw(true); + }); + + document.getElementById("viewport").addEventListener("mousemove", function(event) { + if (event.buttons === 1 && lensflare_active) { + cursor.x = (event.clientX - canvas.offsetLeft) / canvas.clientWidth - 0.5; + cursor.y = (event.clientY - canvas.offsetTop) / canvas.clientWidth - 0.5; + console.log(cursor); + draw(true); + } + }); + window.addEventListener("resize", () => draw(true)) video.addEventListener("canplay", function() { @@ -246,6 +270,8 @@ function draw(viewport_scale) { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.filter = ''; - // lensflare(.3,.3); + if (lensflare_active) { + lensflare(cursor.x, cursor.y); + } } |