From f9b4d17140c708a1d853dff0555d0ccaf7c172fd Mon Sep 17 00:00:00 2001
From: Orangerot <purple@orangerot.dev>
Date: Thu, 12 Dec 2024 02:19:05 +0100
Subject: feat: more canvas css filters

---
 index.html | 126 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 main.js    |  12 ++++--
 2 files changed, 131 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 7fa40f9..91f1ca5 100644
--- a/index.html
+++ b/index.html
@@ -95,7 +95,7 @@
                 <input type="range"
                        id="brightness" 
                        class="brightness slider is-fullwidth is-primary" 
-                       min="0" max="2" value="1" step="0.05">
+                       min="0" max="2" value="1" step="0.01">
               </div>
             </div>
             <div class="field">
@@ -128,10 +128,70 @@
                        min="0" max="2" value="1" step="0.01">
               </div>
             </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-palette fa-fw"></i>
+                Color
+                <span class="icon is-pulled-right hue-rotate-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="hue-rotate" 
+                       class="hue-rotate slider is-fullwidth is-primary" 
+                       min="-180" max="180" value="0" step="1">
+              </div>
+            </div>
 
             <p class="menu-label">
-            Distortion
+            Filters
             </p>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-radio fa-fw"></i>
+                Grayscale
+                <span class="icon is-pulled-right grayscale-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="grayscale" 
+                       class="grayscale slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
+                Sepia
+                <span class="icon is-pulled-right sepia-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="sepia" 
+                       class="sepia slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+                Invert
+                <span class="icon is-pulled-right invert-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="invert" 
+                       class="invert slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
             <p class="menu-label">
             Blur and Sharpen
             </p>
@@ -219,10 +279,70 @@
                    min="0" max="2" value="1" step="0.01">
           </div>
         </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-palette fa-fw"></i>
+            Color
+            <span class="icon is-pulled-right hue-rotate-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="hue-rotate" 
+                   class="hue-rotate slider is-fullwidth is-primary" 
+                   min="-180" max="180" value="0" step="1">
+          </div>
+        </div>
 
         <p class="menu-label">
-        Distortion
+        Filters
         </p>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-radio fa-fw"></i>
+            Grayscale
+            <span class="icon is-pulled-right grayscale-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="grayscale" 
+                   class="grayscale slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
+            Sepia
+            <span class="icon is-pulled-right sepia-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="sepia" 
+                   class="sepia slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+            Invert
+            <span class="icon is-pulled-right invert-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="invert" 
+                   class="invert slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
         <p class="menu-label">
         Blur and Sharpen
         </p>
diff --git a/main.js b/main.js
index 397cfa9..81e9f87 100644
--- a/main.js
+++ b/main.js
@@ -2,10 +2,14 @@ let canvas;
 let video;
 let ctx;
 let settings = {
-  brightness: {},
-  saturate: {},
-  contrast: {},
-  blur: { filter: value => value * canvas.width / 100 + 'px' }
+  "brightness": {},
+  "saturate": {},
+  "contrast": {},
+  "hue-rotate": {filter: value => value + "deg"},
+  "grayscale": {},
+  "sepia": {},
+  "invert": {},
+  "blur": { filter: value => value * canvas.width / 100 + 'px' }
 };
 const img = new Image();
 
-- 
cgit v1.2.3