Pressure is a WIP (looks like lots of work)

examples/paint/src/paint.ts

@@ -24,7 +24,6 @@ export function setupPaint(canvasElement: HTMLCanvasElement | null) {
     "airfingermove",
     airfingerMove(canvasCtx as CanvasRenderingContext2D)
   );
-  document.addEventListener("airfingerend", airfingerEnd);
   setupPallete(canvasCtx as CanvasRenderingContext2D, colorIdx);
 }
 
@@ -50,10 +49,14 @@ function airfingerMove(canvasCtx: CanvasRenderingContext2D) {
   return function (event: Event) {
     const detail = (event as AirfingerEvent).detail;
     const { hand } = detail;
-    const { x, y } = detail.airpoint;
+    const { x, y, z } = detail.airpoint;
     if (hand === "right") {
       canvasCtx.save();
-      continueStroke(normalizedToPixelCoords([x, y]), canvasCtx);
+      continueStroke(
+        normalizedToPixelCoords([x, y]),
+        canvasCtx,
+        interpolate(z)
+      );
       canvasCtx.restore();
     }
     if (hand === "left") {
@@ -67,7 +70,23 @@ function airfingerMove(canvasCtx: CanvasRenderingContext2D) {
   };
 }
 
-function airfingerEnd(event: Event) {
-  const detail = (event as AirfingerEvent).detail;
-  //console.log(detail);
+function interpolate(z: number) {
+  //console.log("z", z);
+  const x1 = -0.45;
+  const x2 = 0;
+  const y1 = 0;
+  const y2 = 1;
+  const raw = y1 + ((z - x1) * (y2 - y1)) / (x2 - x1);
+  return 1 - clamp(raw, y1, y2);
+}
+
+function clamp(raw: number, min: number, max: number) {
+  //console.log(raw, min, max);
+  if (raw < min) {
+    return min;
+  }
+  if (raw > max) {
+    return max;
+  }
+  return raw;
 }