Use a more robust triangle test

src/marks/raster.js

@@ -316,14 +316,15 @@ export function interpolatorBarycentric({random = randomLcg(42)} = {}) {
           if (x < 0 || x >= width || y < 0 || y >= height) continue;
           const xp = x + 0.5; // sample pixel centroids
           const yp = y + 0.5;
-          const ga = ((By - Cy) * (xp - Cx) + (yp - Cy) * (Cx - Bx)) / z;
-          if (ga < 0) continue;
-          const gb = ((Cy - Ay) * (xp - Cx) + (yp - Cy) * (Ax - Cx)) / z;
-          if (gb < 0) continue;
-          const gc = 1 - ga - gb;
-          if (gc < 0) continue;
+          const s = Math.sign(z);
+          const ga = (By - Cy) * (xp - Cx) + (yp - Cy) * (Cx - Bx);
+          if (ga * s < 0) continue;
+          const gb = (Cy - Ay) * (xp - Cx) + (yp - Cy) * (Ax - Cx);
+          if (gb * s < 0) continue;
+          const gc = z - (ga + gb);
+          if (gc * s < 0) continue;
           const i = x + width * y;
-          W[i] = mix(va, ga, vb, gb, vc, gc, x, y);
+          W[i] = mix(va, ga / z, vb, gb / z, vc, gc / z, x, y);
           S[i] = 1;
         }
       }

test/plots/index.ts

@@ -132,6 +132,7 @@ export * from "./industry-unemployment.js";
 export * from "./infinity-log.js";
 export * from "./integer-interval.js";
 export * from "./intern-facet.js";
+export * from "./interpolate-barycentric.js";
 export * from "./interval-aware.js";
 export * from "./intraday-histogram.js";
 export * from "./kitten.js";

test/plots/interpolate-barycentric.ts

@@ -0,0 +1,31 @@
+import * as Plot from "@observablehq/plot";
+
+export async function interpolateBarycentric4() {
+  const I = [0, 1, 2, 3];
+  const X = [297, 295, 80, 59];
+  const Y = [269, 266, 275, 265];
+  return Plot.plot({
+    color: {scheme: "greys", domain: [-0.1, 8]},
+    x: {domain: [53, 314]},
+    y: {domain: [265, 276]},
+    marks: [
+      Plot.frame({fill: "red"}),
+      Plot.raster(I, {pixelSize: 1, x: X, y: Y, fill: I, interpolate: "barycentric", imageRendering: "pixelated"}),
+      Plot.delaunayMesh(I, {x: X, y: Y, stroke: "black"}),
+      Plot.dot(I, {x: X, y: Y, r: 2, fill: "black"})
+    ]
+  });
+}
+
+export async function interpolateBarycentric4k() {
+  const {x, y, v} = await fetch("data/4kpoints.json").then((d) => d.json());
+  return Plot.plot({
+    color: {scheme: "rdbu", range: [0.2, 0.8]},
+    x: {domain: [0.5, 580.5]},
+    y: {domain: [0, 350]},
+    marks: [
+      Plot.frame({fill: "black"}),
+      Plot.raster({length: x.length}, {x, y, fill: v, interpolate: "barycentric", imageRendering: "pixelated"})
+    ]
+  });
+}

test/plots/raster-penguins.ts

@@ -15,6 +15,10 @@ export async function rasterPenguinsBarycentric() {
   return rasterPenguins({interpolate: "barycentric"});
 }
 
+export async function rasterPenguinsBarycentricBlur() {
+  return rasterPenguins({interpolate: "barycentric", blur: 7});
+}
+
 export async function rasterPenguinsRandomWalk() {
   return rasterPenguins({interpolate: "random-walk"});
 }