feat: enable lensflare in ui and control with mouse position

index.html

@@ -71,13 +71,27 @@
 
           <!-- autocomplete off prevents browsers from remebering the value on page reloads -->
           <form autocomplete="off">
-            <button id="save" class="button is-primary">
+            <div class="buttons">
-              Save Image
+              <button id="save" class="button is-primary">
-            </button>
+                Save Image
-            <button id="share" class="button is-secondary">
+              </button>
-              <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
+              <button id="share" class="button is-secondary">
-              Share
+                <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
-            </button>
+                Share
+              </button>
+            </div>
+            
+            <div class="field">
+              <!--
+              <label class="label">
+                Use Gyroscope
+                <input type="checkbox" class="is-pulled-right">
+              </label>
+              -->
+              <button id="lensflare" class="button is-medium is-fullwidth">
+                Lensflare
+              </button>
+            </div>
 
             <p class="menu-label">
             Color Correction

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);
+  }
 }