Add dithering functionality, to improve images with gradients

Author: NotNeelPatel

assets/convert.js

@@ -11,6 +11,7 @@ window.addEventListener("paste", (e) => {
 // Prevent default drag behaviors
 ["dragenter", "dragover", "dragleave", "drop"].forEach((e) => {
     document.body.addEventListener(e, preventDefaults, false);
+    imageLoader.style.height = "12vh";
 });
 
 // Handle dropped files
@@ -49,6 +50,7 @@ var colour_palette_count = 0;
 var menuVisible = false;
 var list_of_themes;
 var themes_keys;
+var dithering = false;
 
 // Fetch data from themes.json
 fetch("./assets/themes.json")
@@ -61,6 +63,7 @@ fetch("./assets/themes.json")
 
 // Loads image onto canvas
 function handleImage(source) {
+    imageLoader.style.height = "1vh";
     ogimage = source;
     var reader = new FileReader();
 
@@ -166,66 +169,107 @@ function createCustomPalette() {
     displayPalette();
 }
 
+function dither() {
+    dithering = !dithering;
+    document.getElementById("dither-checkbox").checked = dithering;
+}
+
 function initialize() {
     if (theme.length == 0) {
         scrollTheme();
     }
     if (customMenu.style.display === "block") {
         createCustomPalette();
     }
-    loadingScreen.style.opacity = "100";
     loadingScreen.style.visibility = "visible";
-    loadingScreen.style.transition = "0s";
+    loadingScreen.style.opacity = "100";
+    loadingScreen.style.display = "block";
     setTimeout(function () {
         convertImage();
-        loadingScreen.style.transition = "0.5s";
         loadingScreen.style.opacity = "0";
         loadingScreen.style.visibility = "hidden";
-    }, 0);
+    }, 100);
+}
+
+function nearestColour(targetColour) {
+    let minDistance = Infinity;
+    let closestColor = theme[0];
+
+    for (let i = 0; i < theme.length; i += 3) {
+        let color = [theme[i], theme[i + 1], theme[i + 2]];
+        // Euclidean distance in RGB space
+        let distance = Math.sqrt(
+            Math.pow(targetColour[0] - color[0], 2) +
+                Math.pow(targetColour[1] - color[1], 2) +
+                Math.pow(targetColour[2] - color[2], 2)
+        );
+
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestColor = color;
+        }
+    }
+    return closestColor;
 }
 
 /*
 This is the function that processes the image.
 It works by scanning every pixel and finding the nearest colour.
 After finding the nearest colour, it uses that data to reconstruct the image.
+If we are dithering, we calculate the quantization error and distribute it using the Sierra Lite kernel.
 */
 function convertImage() {
     downloadButton.style.visibility = "hidden";
     resetButton.style.visibility = "hidden";
     // Assigning variables
     var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     var pixels = imageData.data;
-    var numPixels = pixels.length;
-    var lens = [];
-    var minimum = 0;
-    var x = 0;
-
-    // For every pixel in the image
-    for (var i = 0; i < numPixels; i += 4) {
-        minimum = 0;
-        // For the amount of colours there are in the theme
-        for (var j = 0; j < theme.length; j += 3) {
-            // 3d distance formula
-            lens[x] = Math.sqrt(
-                Math.pow(pixels[i] - theme[j], 2) +
-                    Math.pow(pixels[i + 1] - theme[j + 1], 2) +
-                    Math.pow(pixels[i + 2] - theme[j + 2], 2)
-            );
-            x += 1;
-        }
-        x = 0;
-        // Sort to find the smallest value (closest distance)
-        for (var k = 1; k < lens.length; k++) {
-            if (lens[k] < lens[minimum]) {
-                minimum = k;
-            }
-        }
 
-        // Assign the R,G, and B values based on the smallest value
-        for (var k = 0; k < 3; k++) {
-            pixels[i + k] = theme[minimum * 3 + k];
+    for (let y = 0; y < canvas.height; y++) {
+        for (let x = 0; x < canvas.width; x++) {
+            const index = (y * canvas.width + x) * 4;
+
+            // Get the original pixel colour
+            let oldPixel = [
+                pixels[index],
+                pixels[index + 1],
+                pixels[index + 2],
+            ];
+
+            // Find the closest color from the palette
+            let newPixel = nearestColour(oldPixel);
+
+            // Replace the pixel with the new colour
+            pixels[index] = newPixel[0];
+            pixels[index + 1] = newPixel[1];
+            pixels[index + 2] = newPixel[2];
+
+            if (dithering) {
+                // Calculate quantization error
+                let quantError = [
+                    oldPixel[0] - newPixel[0],
+                    oldPixel[1] - newPixel[1],
+                    oldPixel[2] - newPixel[2],
+                ];
+
+                // Distribute the error using Sierra Lite kernel
+                if (x + 1 < canvas.width) {
+                    const rightIndex = index + 4;
+                    pixels[rightIndex] += (quantError[0] * 1) / 2;
+                    pixels[rightIndex + 1] += (quantError[1] * 1) / 2;
+                    pixels[rightIndex + 2] += (quantError[2] * 1) / 2;
+                }
+
+                if (y + 1 < canvas.height) {
+                    const belowIndex = index + canvas.width * 4;
+                    pixels[belowIndex] += (quantError[0] * 1) / 2;
+                    pixels[belowIndex + 1] += (quantError[1] * 1) / 2;
+                    pixels[belowIndex + 2] += (quantError[2] * 1) / 2;
+                }
+            }
         }
     }
+
     // Reconstruct the image and make the download/reset buttons visible
     ctx.putImageData(imageData, 0, 0);
     downloadButton.style.visibility = "visible";
@@ -281,4 +325,4 @@ document.addEventListener("click", function (event) {
             createCustomPalette();
         });
     }
-});
+});

assets/style.css

@@ -21,6 +21,7 @@ h1 {
     word-spacing: 7px;
     font-weight: 100;
     display: inline-table;
+    margin: 0.3em 0;
 }
 
 a {
@@ -66,7 +67,7 @@ button {
 }
 
 button:hover {
-    background-color: #222;
+    background-color: var(--darkest-grey);
 }
 
 .main-button {
@@ -80,6 +81,49 @@ button:hover {
     visibility: hidden;
 }
 
+.dither-options {
+    margin: auto;
+    padding: 0.5em;
+    text-align: center;
+    width: fit-content;
+    user-select: none;
+}
+
+input[type="checkbox"] {
+    display: none;
+    --webkit-appearance: none;
+    width: 1.1em;
+    height: 1.1em;
+    margin: 0.5em;
+    cursor: pointer;
+    font-size: 1em;
+    display: inline;
+}
+
+input[type="checkbox"]:checked {
+    accent-color: var(--blue-grey);
+}
+
+#dither-checkbox-label {
+    font-size: 1em;
+}
+
+.tooltip-text {
+    display: none;
+    position: absolute;
+    background-color: var(--dark-grey);
+    color: var(--white);
+    border-radius: 5px;
+    padding: 0.5em;
+    z-index: 1;
+    font-size: 0.8em;
+    left: 43vw;
+}
+
+.dither-options:hover .tooltip-text {
+    display: block;
+}
+
 #drop-zone {
     background-color: var(--darkest-grey);
     text-align: center;
@@ -106,10 +150,15 @@ button:hover {
     background-color: var(--dark-grey);
     border-radius: 3px;
     color: var(--white);
+    border: 2px solid var(--light-grey);
     margin: 0.5em;
     cursor: pointer;
 }
 
+#image-loader::file-selector-button:hover {
+    background-color: var(--darkest-grey);
+}
+
 #image-canvas {
     border: 3px solid var(--light-grey);
     max-height: 50vh;
@@ -140,7 +189,7 @@ button:hover {
     display: inline-block;
     height: 1em;
     width: 1em;
-    border: 1px solid #aaa;
+    border: 1px solid var(--light-grey);
 }
 
 .options-container {
@@ -205,6 +254,7 @@ input[type="color"] {
     text-align: center;
     font-size: xx-large;
     background-color: rgba(30, 30, 30, 0.8);
+    transition: 0.5s;
 }
 
 #loading-screen p {
@@ -224,6 +274,10 @@ footer a {
 }
 
 @media screen and (max-width: 800px) {
+    h1 {
+        font-size: 1.5em;
+    }
+
     header {
         margin-left: 0vw;
         margin-right: 0vw;
@@ -247,8 +301,8 @@ footer a {
     }
 
     #image-canvas {
-        max-height: 40vh;
-        min-height: 20vh;
+        width: 84vw;
+        min-height: 10vw;
     }
 
     .download-buttons {
@@ -268,4 +322,8 @@ footer a {
         height: 0.8em;
         width: 0.8em;
     }
+
+    #custom-menu {
+        width: auto;
+    }
 }

index.html

@@ -16,7 +16,6 @@ <h1>Wallpaper Theme Converter</h1>
   <body>
     <div id="loading-screen">
       <p>Loading...</p>
-
     </div>
     <hr />
     <br/>
@@ -76,16 +75,17 @@ <h3>Select a theme</h3>
           <button id="opt-down" onclick="scrollTheme(1)">▼</button>
           <button id="custom-theme-button" onclick="openCustomMenu()"> + Custom Theme </button>
         </div>
-
-      <br/>
-
+        <div class="dither-options" onclick="dither()">
+          <input type="checkbox" id="dither-checkbox" />
+          <label id="dither-checkbox-label" for="checkbox">More Accurate Colours</label>
+          <span class="tooltip-text">Adds dithering to reduce colour-banding</span>
+        </div>
       <div id="custom-menu">
         <button onclick="addColour()">+</button>
         <button onclick="removeColour()">-</button>
         <div id="colours">
         </div>
       </div>
-
         <button class="main-button" id="convert" type="button" onclick="initialize()">Convert</button>
       </div>