summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorOrangerot <purple@orangerot.dev>2024-12-12 07:41:11 +0100
committerOrangerot <purple@orangerot.dev>2024-12-12 07:41:11 +0100
commit49707ede247a722764443a15b848ed755c1491e8 (patch)
treec960043edb0146f49a617ea56a22c72b279b2a5c
parentf41f1ea4b2cf9e4698a2ce67ef9a7ea74d1bf058 (diff)
feat: deviceorientation to control lensflare
-rw-r--r--index.html36
-rw-r--r--main.js46
2 files changed, 54 insertions, 28 deletions
diff --git a/index.html b/index.html
index 648efc0..3ad802c 100644
--- a/index.html
+++ b/index.html
@@ -72,23 +72,17 @@
<!-- autocomplete off prevents browsers from remebering the value on page reloads -->
<form autocomplete="off">
<div class="buttons">
- <button id="save" class="button is-primary">
+ <button class="button is-primary save-image">
Save Image
</button>
- <button id="share" class="button is-secondary">
+ <button class="button is-secondary share-image">
<i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
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">
+ <button class="button is-medium is-fullwidth lensflare">
Lensflare
</button>
</div>
@@ -236,13 +230,21 @@
<!-- autocomplete off prevents browsers from remebering the value on page reloads -->
<form autocomplete="off">
- <button id="save" class="button is-primary">
- Save Image
- </button>
- <button id="share" class="button is-secondary">
- <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
- Share
- </button>
+ <div class="buttons">
+ <button class="button is-primary save-image">
+ Save Image
+ </button>
+ <button class="button is-secondary share-image">
+ <i class="fa-solid fa-share-from-square fa-fw mr-1"></i>
+ Share
+ </button>
+ </div>
+
+ <div class="field">
+ <button class="button is-medium is-fullwidth lensflare">
+ Lensflare
+ </button>
+ </div>
<p class="menu-label">
Color Correction
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() {