feat: deviceorientation to control lensflare

1 files changed, 35 insertions, 11 deletions

diff --git a/main.js b/main.js
index 19ac577..0fde283 100644
--- a/main.js
+++ b/main.js
@@ -32,18 +32,25 @@ document.addEventListener("DOMContentLoaded", function() {
   document.getElementById("cheese").addEventListener("click", take_picture);
   document.getElementById("upload-image").addEventListener("change", upload_image)
 
-  document.getElementById("save").addEventListener("click", save_image)
-  document.getElementById("share").addEventListener("click", share_image)
+  for (let element of document.getElementsByClassName("save-image")) {
+    element.addEventListener("click", save_image)
+  }
+  for (let element of document.getElementsByClassName("share-image")) {
+    element.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);
-  });
+  for (let element of document.getElementsByClassName("lensflare")) {
+    element.addEventListener("click", function(event) {
+      event.preventDefault();
+      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) {
@@ -54,6 +61,23 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   });
 
+  window.addEventListener("deviceorientation", function(event) {
+    if (lensflare_active) {
+      cursor.x = event.gamma / 360 * 4;
+      cursor.y = (event.beta - 90) / 360 * 4;
+      console.log(cursor);
+      // draw(true);
+    }
+  });
+
+  function animation() {
+    if (lensflare_active) {
+      draw(true);
+    }
+    requestAnimationFrame(animation)
+  };
+  animation();
+
   window.addEventListener("resize", () => draw(true))
 
   video.addEventListener("canplay", function() {