fix: use Xiaolin Wu's algorithm for

line anti aliasing

Author: HarshKhandeparkar

src/kernels/interpolate.ts

@@ -61,36 +61,34 @@ export function getInterpolateKernel(
       const graphColor = graphPixels[this.thread.y][this.thread.x];
 
       if (
-        (
-          lineDist <= lineThickness + 1 &&
-          x <= Math.max(x1, x2) + (lineThickness + 1) * lineSine &&
-          x >= Math.min(x1, x2) - (lineThickness + 1) * lineSine &&
-          y <= Math.max(y1, y2) + (lineThickness + 1) * lineCosine &&
-          y >= Math.min(y1, y2) - (lineThickness + 1) * lineCosine
-        )
+        lineDist >= lineThickness &&
+        lineDist <= lineThickness + 1 &&
+        x <= Math.max(x1, x2) + (lineThickness) * lineSine &&
+        x >= Math.min(x1, x2) - (lineThickness) * lineSine &&
+        y <= Math.max(y1, y2) + (lineThickness) * lineCosine &&
+        y >= Math.min(y1, y2) - (lineThickness) * lineCosine
       ) {
-        let intensity = 0;
-
-        // The following code basically blurs the line by convolving a simple average kernel
-        // Very crude implementation of https://developer.nvidia.com/gpugems/gpugems2/part-iii-high-quality-rendering/chapter-22-fast-prefiltered-lines
-        for (let i = x - 1; i <= x + 1; i++) {
-          for (let j = y - 1; j <= y + 1; j++) {
-            let lineEqn = i * (y1 - y2) - x1 * (y1 - y2) - j * (x1 - x2) + y1 * (x1 - x2);
-            let lineDist = Math.abs(lineEqn) / Math.sqrt((y1 - y2) * (y1 - y2) + (x1 - x2) * (x1 - x2));
-
-            intensity += (1 / 9) * Math.min(
-              1,
-              Math.floor(lineThickness / lineDist)
-            )
-          }
-        }
+        let intensity = Math.max(0, 1 - (lineDist - lineThickness));
 
         return [
           lineColor[0] * intensity + graphColor[0] * (1 - intensity),
           lineColor[1] * intensity + graphColor[1] * (1 - intensity),
           lineColor[2] * intensity + graphColor[2] * (1 - intensity)
         ]
       }
+      else if (
+        lineDist < lineThickness &&
+        x <= Math.max(x1, x2) + (lineThickness) * lineSine &&
+        x >= Math.min(x1, x2) - (lineThickness) * lineSine &&
+        y <= Math.max(y1, y2) + (lineThickness) * lineCosine &&
+        y >= Math.min(y1, y2) - (lineThickness) * lineCosine
+      ) {
+        return [
+          lineColor[0],
+          lineColor[1],
+          lineColor[2]
+        ]
+      }
       else return graphColor;
     }`,
     {