feat: enable lensflare in ui and control with mouse position

1 files changed, 27 insertions, 1 deletions

diff --git a/main.js b/main.js
index 583d997..19ac577 100644
--- a/main.js
+++ b/main.js
@@ -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);
+  }
 }