imageProcessing.js

// Functions for sampling and drawing

export function samplePixel(offCtx, x, y, flipGreen) {
  try {
    const pixel = offCtx.getImageData(x, y, 1, 1).data;
    let nx = pixel[0] / 255 * 2 - 1;
    let ny = pixel[1] / 255 * 2 - 1;
    if (flipGreen) ny = -ny;
    let nz = pixel[2] / 255 * 2 - 1;

    const length = Math.sqrt(nx*nx + ny*ny + nz*nz);
    return { nx: nx/length, ny: ny/length, nz: nz/length };
  } catch (err) {
    alert("⚠️ Cannot read pixels: the image server does not allow cross-origin access. Try uploading the file instead.");
    return { nx: 0, ny: 0, nz: 1 }; // fallback vector
  }
}

export function drawArrow(ctx, img, canvas, x, y, nx, ny, nz) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
  ctx.drawImage(img, 0, 0, img.width * scale, img.height * scale);

  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI * 2);
  ctx.fill();

  const arrowLength = 50;
  const endX = x + nx * arrowLength;
  const endY = y - ny * arrowLength;

  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(endX, endY);
  ctx.stroke();

  const angle = Math.atan2(endY - y, endX - x);
  ctx.beginPath();
  ctx.moveTo(endX, endY);
  ctx.lineTo(endX - 10 * Math.cos(angle - Math.PI / 6),
             endY - 10 * Math.sin(angle - Math.PI / 6));
  ctx.lineTo(endX - 10 * Math.cos(angle + Math.PI / 6),
             endY - 10 * Math.sin(angle + Math.PI / 6));
  ctx.closePath();
  ctx.fillStyle = "red";
  ctx.fill();
}