feat: build with esbuild

view/src/components/Analyzer.svelte

@@ -40,8 +40,8 @@
     {#each result as color, i}
       <p>
         {Math.floor(
-          (correctDistortion ? color.value : color.distortedValue) * 1000
-        ) / 10}%
+          (correctDistortion ? color.value : color.distortedValue) * 10000
+        ) / 100}%
       </p>
       <div
         transition:scaleX={{ duration: 500, delay: i * 200 }}

view/src/components/Editor/Painter.svelte

@@ -196,9 +196,17 @@
     //Caclulate y position of pixel
     const y = Math.floor(my * wrapperHeightRatio);
     debugY = y;
+    const height = image.height;
 
     // KarlKilian Formel
-    debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
+    //debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
+
+    // New new formel
+    debugValue = Math.cos(
+      (((360 / height ** 2) * y ** 2 + (-360 / height) * y + 90) / 360) *
+        2 *
+        Math.PI
+    );
 
     if (isDown) {
       if (activeTool === "pan") {

view/src/components/Editor/TopBar.svelte

@@ -4,7 +4,7 @@
   const minRadius = 1;
   const maxRadius = 100;
   export let brushRadius = 10;
-  export let layerOpacity = 50;
+  export const layerOpacity = 50;
 
   const colors = ["ff0000", "00ff00", "0000ff", "ffff00", "00ffff", "ff00ff"];
 
@@ -58,9 +58,6 @@
     grid-template-columns: 1fr auto;
   }
 
-  .color-wrapper {
-  }
-
   .color {
     display: inline-block;
     height: 20px;

view/src/helpers/AI.ts

@@ -1,6 +1,6 @@
 import { bufToImageUrl } from ".";
 
-const worker = new Worker("build/ai-worker.js");
+const worker = new Worker("build/workers/ai-worker.js");
 
 let i = 0;
 

view/src/helpers/CountPixels.ts

@@ -1,6 +1,6 @@
 import { images } from "../stores";
 
-const worker = new Worker("worker.js");
+const worker = new Worker("build/workers/pixel-worker.js");
 
 let i = 0;
 

view/src/routes/list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Cross } from "../icons";
-  import { fly, fade } from "svelte/transition";
+  import { fly, fade, slide } from "svelte/transition";
   import { images as imageData, route } from "stores";
   import { bufToImageUrl, AI, downloadImage } from "../helpers";
   import type { Writable } from "svelte/store";
@@ -88,7 +88,7 @@
     </div>
 
     {#if i === showAnalyzerIndex}
-      <div transition:fly={{ x: -50 }}>
+      <div in:slide out:slide>
         <Analyzer {img} />
       </div>
     {/if}

view/src/workers/pixel-worker.ts

@@ -0,0 +1,85 @@
+export { };
+
+self.addEventListener('message', function (e) {
+
+
+  const { data: { i, pixels, correctDistortion = true, width, height } } = e;
+
+  // This is the old method just by counting pixels
+  const oldStore = {};
+
+  //This method applies some weight to the pixels
+  const store = {};
+  let totalPixelValue = 0;
+
+  let total = pixels.length / 4;
+
+  const threshold = 200;
+
+  for (let i = 0; i < total; i++) {
+
+
+    const r = pixels[i * 4 + 0] > threshold ? 1 : 0;
+    const g = pixels[i * 4 + 1] > threshold ? 1 : 0;
+    const b = pixels[i * 4 + 2] > threshold ? 1 : 0;
+    const id = r + "-" + g + "-" + b;
+
+    //Caclulate y position of pixel
+    const y = Math.floor(i / width);
+
+    // KarlKilian Formel
+    //const pixelValue = Math.cos(360 / (Math.pow(height, 2)) * Math.pow(y, 2) + (-360 / height) * y + 90);
+
+
+    //const pixelValue = (2 * Math.sqrt(y * (height - y))) / height;
+
+    // 0.2
+    // 0.133
+    const calibrationFaktor = 0.133;
+
+    const pixelValue = Math.cos(
+      (((360 / height ** 2) * y ** 2 + (-360 / height) * y + 90) / 360) *
+      (2 + calibrationFaktor) *
+      Math.PI
+    );
+
+    oldStore[id] = oldStore[id] + 1 || 1;
+
+    if (id in store) {
+      store[id] += pixelValue;
+    } else {
+      store[id] = pixelValue;
+    }
+
+    totalPixelValue += pixelValue;
+
+  }
+
+  const finalResult = {};
+
+
+  // Normalize stores
+  Object.keys(oldStore).forEach(k => {
+    finalResult[k] = {
+      distortedValue: oldStore[k] / total
+    }
+  });
+
+  Object.keys(store).forEach(k => {
+    finalResult[k].value = store[k] / totalPixelValue;
+  });
+
+  // Conver to array for easier 
+  const result = Object.keys(finalResult).map(key => {
+    const [r, g, b] = key.split("-").map((n) => parseInt(n) * 255);
+    return {
+      id: key,
+      color: `rgb(${r},${g},${b})`,
+      value: finalResult[key].value,
+      distortedValue: finalResult[key].distortedValue
+    }
+  }).sort((a, b) => a.value > b.value ? -1 : 1)
+
+  //@ts-ignore
+  self.postMessage({ result, i });
+}, false);