fix: implement simple distortion fix

view/public/worker.js

@@ -28,7 +28,9 @@ self.addEventListener('message', function (e) {
     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 = Math.cos(360 / (Math.pow(height, 2)) * Math.pow(y, 2) + (-360 / height) * y + 90);
+
+    const pixelValue = (2 * Math.sqrt(y * (height - y))) / height;
 
     oldStore[id] = oldStore[id] + 1 || 1;
 

view/src/components/Editor/OrbView.ts

@@ -1,6 +1,6 @@
 import { Renderer, Camera, Transform, Texture, Sphere, Program, Mesh } from "ogl"
 import { Orbit } from "./CustomOrbit"
-import { bufToImageUrl } from "helpers";
+import { bufToImageUrl } from "../../helpers";
 
 
 import VertexShader from "./Orb.vert";

view/src/components/Editor/Painter.svelte

@@ -46,6 +46,7 @@
   let downX, downOffset;
 
   let debugValue = 0;
+  let debugY = 0;
 
   let isStrPressed = false;
   let isSpacePressed = false;
@@ -155,14 +156,11 @@
     isOriginal = e.target.id === "cx1";
 
     //Caclulate y position of pixel
-    const y = my / wrapperHeightRatio;
+    const y = Math.floor(my * wrapperHeightRatio);
+    debugY = y;
 
     // KarlKilian Formel
-    debugValue = Math.cos(
-      (360 / Math.pow(image.height, 2)) * Math.pow(y, 2) +
-        (-360 / image.height) * y +
-        90
-    );
+    debugValue = (2 * Math.sqrt(y * (image.height - y))) / image.height;
 
     if (isDown) {
       if (activeTool === "pan") {
@@ -303,7 +301,7 @@
     }%)); opacity: ${(layerOpacity / 100) * 0.5};`}
   />
 
-  <p>{debugValue}|{my}</p>
+  <p>h:{image.height} | y:{debugY} | value:{debugValue}</p>
 
   <canvas class:visible={mode === "3d"} bind:this={canvas3D} />
 </div>