특정 좌표가 선 위에 있는지 감지하기

FPS 게임에서 총으로 사격했을 때 총알의 궤적 안에 있는 적에게 대미지를 입히고자 한다. 어떻게 구현할 수 있을까?

 

 

이는 직선의 방정식을 이용하여 구현할 수 있다.

 

/// 두 함수 모두 동일한 동작을 한다.

// 직선의 방정식.
// 방정식은 ax + by + c = 0이며, 점의 좌표를 대입하여 계산된 값은 직선과 점 사이의 관계를 나타낸다.
function isPointInLine(pointX: number, pointY: number, x1: number, y1: number, x2:number , y2: number) {
  const a = y2 - y1;
  const b = x1 - x2;
  const c = x2 * y1 - x1 * y2;
  return a * pointX + b * pointY + c === 0;
}

// 기울기, Y절편을 이용한 방정식.
// 방정식은 y = mx + b이며, 이중 m은 기울기를,  b는 y의 절편을 의미한다.
function isPointInLine(pointX: number, pointY: number, x1: number, y1: number, x2: number, y2: number) {
  const slope = (y2 - y1) / (x2 - x1);
  const yIntercept = y1 - slope * x1;

  return pointY === slope * pointX + yIntercept;
}

 

직선의 방정식은 값이 0이면 점은 선 위에 위치함을 나타내고,  양수(+)면 점이 선의 한쪽에, 음수(-)면 점이 선의 다른쪽에 위치함을 알 수 있다.

 

console.log(isPointInLine(10, 10, -5, -5, 5, 5)); // true

하지만 위 함수들은 선 위에 존재하는지 확인하는 게 아닌, 기울어짐에 따른 결과만을 반환한다.

예시로 주어진 점의 위치가 두 선의 좌표를 벗어남에도 궤도가 같음으로 true를 반환한다.

 

이는 게임 상에서 일직선으로 발사되는 로켓 등의 투사체 궤도를 예상할 때 유용하게 쓰일 수 있지만 지금은 주어진 선 위에 존재하는지 확인하고자 함으로 아래와 같이 조건을 추가한다.

 

function isPointOnLine(pointX, pointY, x1, y1, x2, y2) {
  const a = y2 - y1;
  const b = x1 - x2;
  const c = x2 * y1 - x1 * y2;
  return (
    a * pointX + b * pointY + c === 0 &&
    pointX >= Math.min(x1, x2) &&
    pointX <= Math.max(x1, x2) &&
    pointY >= Math.min(y1, y2) &&
    pointY <= Math.max(y1, y2)
  );
}

조건을 통해 점이 선분의 좌표 범위 안에 있는지 확인하기만 하면 점이 주어진 선 위에 존재하는지 감지할 수 있게 된다.