summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--index.html28
-rw-r--r--main.js28
2 files changed, 48 insertions, 8 deletions
diff --git a/index.html b/index.html
index 892aa39..648efc0 100644
--- a/index.html
+++ b/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">
- 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 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>
+
+ <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
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);
+ }
}