Function projectPathPoint

frontend/src/utils/waypointProjection.ts:192–263

(
  point: { x: number; y: number },
  robotPose: { x: number; y: number; theta: number },
  canvasWidth: number,
  canvasHeight: number,
  config: CameraConfig
)

 * the ground/road perspective - closer points at bottom, farther at middle.
 */
export function projectPathPoint(
  point: { x: number; y: number },
  robotPose: { x: number; y: number; theta: number },
  canvasWidth: number,
  canvasHeight: number,
  config: CameraConfig
): ProjectedPathPoint {
  // Calculate vector from robot to point
  const dx = point.x - robotPose.x;
  const dy = point.y - robotPose.y;
  const distance = Math.sqrt(dx * dx + dy * dy);

  // Get bearing angle from robot to point in map frame
  const pointBearing = Math.atan2(dy, dx);

  // Calculate relative bearing based on camera facing direction
  let robotHeading = robotPose.theta;
  if (!config.isFrontFacing) {
    // For back camera, flip the robot heading by 180 degrees
    robotHeading = normalizeAngle(robotHeading + Math.PI);
  }

  const relativeBearing = normalizeAngle(pointBearing - robotHeading);

  // Determine if point is in front (within +/- 90 degrees of camera direction)
  const isInFront = Math.abs(relativeBearing) < Math.PI / 2;

  // Determine if point is within camera FOV
  const halfFov = config.horizontalFov / 2;
  const isInView = Math.abs(relativeBearing) <= halfFov;

  // Calculate screen X position
  const centerX = canvasWidth / 2;
  let screenX: number;

  if (isInView) {
    // Linear mapping within FOV (negate bearing for correct screen mapping)
    screenX = centerX - (relativeBearing / halfFov) * (canvasWidth / 2);
  } else {
    // Clamp to edge for off-screen points
    screenX = relativeBearing > 0 ? 0 : canvasWidth;
  }

  // Calculate screen Y position based on distance
  // Path should appear on the ground level - closer points near bottom, farther toward horizon
  // Using a more limited range focused on the lower-middle portion of the screen
  const minDistance = 0.5;
  const maxDistance = 8;  // Reduced from 20m - only show nearby path
  const clampedDistance = Math.max(minDistance, Math.min(maxDistance, distance));

  // Use exponential mapping for more natural perspective (closer points spread out more)
  const normalizedDistance = (clampedDistance - minDistance) / (maxDistance - minDistance);
  const perspectiveDistance = Math.pow(normalizedDistance, 0.7); // Exponential for better depth

  // Position path in lower-center area: close = 90% height, far = 55% height (horizon line)
  const minY = canvasHeight * 0.55;  // Horizon line (farther points)
  const maxY = canvasHeight * 0.92;  // Near bottom (closer points)
  const screenY = maxY - perspectiveDistance * (maxY - minY);