자바스크립트로 세 점이 동일선상에 있는지 확인하는 방법

동일선상의 점(Collinear Points)이란?

세 개 이상의 점이 하나의 직선 위에 놓여 있을 때, 이 점들을 동일선상의 점(collinear points)이라고 부릅니다.

세 점이 한 직선 위에 있는지 판단하는 기준은 간단합니다. 세 점으로 만들 수 있는 모든 선분 쌍의 기울기(slope)가 서로 같으면 됩니다.

예를 들어 2차원 평면 위에 임의의 세 점 A, B, C가 있다고 가정해 봅시다. 다음 조건이 성립하면 세 점은 동일선상에 있습니다.

slope of AB = slope of BC = slope of CA

직선의 기울기 구하기

직선의 기울기는 일반적으로 해당 직선이 x축의 양의 방향과 이루는 각도의 탄젠트(tangent) 값으로 정의됩니다.

또한 직선 위의 두 점 A(x1, y1)와 B(x2, y2)가 주어졌다면, 다음 공식을 이용해 기울기를 계산할 수 있습니다.

Slope of AB = (y2 - y1) / (x2 - x1)

자바스크립트 코드 구현

이제 위 개념을 자바스크립트 함수로 구현해 보겠습니다. 두 좌표를 받아 기울기를 계산하는 slope 함수와, 세 점이 동일선상에 있는지 판별하는 areCollinear 함수로 구성됩니다.

예제 코드

const a = {x: 2, y: 4};
const b = {x: 4, y: 6};
const c = {x: 6, y: 8};

const slope = (coor1, coor2) => (coor2.y - coor1.y) / (coor2.x - coor1.x);

const areCollinear = (a, b, c) => {
    return slope(a, b) === slope(b, c) && slope(b, c) === slope(c, a);
};

console.log(areCollinear(a, b, c));

실행 결과

콘솔에는 다음과 같은 결과가 출력됩니다.

true

위 예제에서 세 점 (2, 4), (4, 6), (6, 8)은 모두 기울기가 1인 직선 위에 위치하므로 true가 반환됩니다.

참고: 부동소수점 오차 주의

좌표값이 소수인 경우 부동소수점 연산 오차로 인해 기울기 비교가 정확하게 이루어지지 않을 수 있습니다. 실무에서는 두 기울기의 차이가 아주 작은 값(예: Math.abs(slope1 - slope2) < 1e-9) 이내인지 확인하는 방식을 사용하는 것이 더 안전합니다.