university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: deviceorientation to control lensflare

Browse source
This commit is contained in:
Orangerot 2024-12-12 07:41:11 +01:00
parent f41f1ea4b2
commit 49707ede24
2 changed files with 54 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

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

46
main.js
View file

@ -32,18 +32,25 @@ document.addEventListener("DOMContentLoaded", function() {
document.getElementById("cheese").addEventListener("click", take_picture); document.getElementById("cheese").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image) document.getElementById("upload-image").addEventListener("change", upload_image)
document.getElementById("save").addEventListener("click", save_image) for (let element of document.getElementsByClassName("save-image")) {
document.getElementById("share").addEventListener("click", share_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) { for (let element of document.getElementsByClassName("lensflare")) {
lensflare_active = !lensflare_active; element.addEventListener("click", function(event) {
if (lensflare_active) { event.preventDefault();
event.target.classList.add("is-primary"); lensflare_active = !lensflare_active;
} else { if (lensflare_active) {
event.target.classList.remove("is-primary"); event.target.classList.add("is-primary");
} } else {
draw(true); event.target.classList.remove("is-primary");
}); }
draw(true);
});
}
document.getElementById("viewport").addEventListener("mousemove", function(event) { document.getElementById("viewport").addEventListener("mousemove", function(event) {
if (event.buttons === 1 && lensflare_active) { 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)) window.addEventListener("resize", () => draw(true))
video.addEventListener("canplay", function() { video.addEventListener("canplay", function() {