두 지점(두 레이어)간의 거리를 구하는 식

두 지점의 거리를 구하는 방법에는 여러 가지가 있을 수 있습니다.
a지점의 좌표에서 b지점의 좌표를 빼는 방법
거리를 직접 구할 수 있는 함수를 사용하는 방법
삼각함수를 이용해 빗변의 길이를 구할수도 있을 것입니다.

작업 용도에따라 적당한 방식을 사용하면 됩니다.
굳이 어려운 방식을 사용해야만 좋은 것이 아닙니다.
필요한 만큼의 값을 구할 수 있는 식을 쉽고 빠르게 사용하는 것이 더욱 중요합니다.

자 그럼 시작해 보겠습니다.
먼저 400*400 사이즈의 콤프를 만들고, 100*100사이즈의 솔리드를 2개 만듭니다.
(색상을 다르게 하시면 더욱 좋습니다.)
두 개의 솔리드의 이름을 layer A, layer B 로 각각 수정합니다. (대소문자 구분합니다.)
layer A 의 위치(포지션)를 (0.0)으로 이동합니다.
layer B는 (400.400)으로 이동합니다.
끝으로 텍스트 툴을 사용해 콤프의 중앙에 “temp” 라고 입력합니다.



텍스트 레이어의 속성 중에 Source Text 에 아래의 익스프레션을 추가합니다.

point1=thisComp.layer("layer A").transform.position;
point2=thisComp.layer("layer B").transform.position;
add(point1, point2)

입력이 끝나면 숫자 키패드의 엔터키를 눌러 빠져나옵니다.
텍스트에 표시되는 수치를 보면 400,400 을 표시합니다.
다시 말해 X축 거리가 400,  Y축 거리또한 400 입니다.



이제 layer B를 화면에서 이리저리 움직이면 두 레이어간 거리가 자동으로 계산되어 표시됩니다.
layer A보다 왼쪽으로 이동하면 X축이 음수로 표시되며, layer A보다 위쪽으로 이동하면 Y축이 음수로 표시됩니다.

문제는 이제 부터입니다.
layer B를 다시 400,400 위치에 가져다 놓습니다.
이번에는 layer A를 이동해보면 수치가 정확하지 않다는 것을 알수 있을 것입니다.

이유인즉 위의 식에서 add 함수를 사용했기 때문입니다.
add는 두 지점의 좌표를 더하는 함수입나다. 다시 말해 layer A의 좌표에 layer B의 좌표를 더한결과를 출력합나다.
따라서 layer A의 위치가 (0,0) 일 경우는 문제가 없지만 임의의 위치에 있다면 두 좌표를 합한 결과를 출력하기 때문에
두 지점간의 거리를 구하는데는 사용 할 수 없습니다.
그럼 이번에는 sub 함수(빼기 함수)를 사용해 보도록 하겠습니다.

두 레이어를 다시 초기 위치로 가져다 놓습니다.
위의 식에서 마지막 줄을 다음과 같이 수정합니다.
sub(point1, point2)



결과는 두 축이 모두 음수로 표시됩니다.
이제 두 레이어 중 아무 레이어나 마구 마구 움직여도 두 지점간 거리를 정확이 표시합니다.
음수라는 점만 배제하면 두 지점간의 거리를 정확히 구할 수 있게 되었습니다.

두 지점간 좌표를 빼는 것이므로 a-b 혹은 b-a에 따라 양수/음수가 결정되는 것입니다.
sub(point1, point2)
sub(point2, point1)
두 식의 결과를 직접 확인해 보시면 아실 겁니다.(레이어를 마구 마구 이리저리 움직여 보세요)
------------------------------------------------------------------------------------

이번에는 두 지점의 대각선의 길이를 구해보도록 하겠습니다.(요넘이 우리가 필요한 것이죠)

위 방법은 X,Y축을 구분해서 결과가 나옵니다.
경우에따라 축 구분없이 대각선의 길이(실제 두 지점간의 거리가 되겠죠!)를 직접 구하고자 할 경우가 있습니다.
이 경우는 length(vec) 함수를 사용하면 됩니다.

텍스트 레어의 익스프레션을 아래와 같이 수정합니다.

point1=thisComp.layer("layer A").transform.position;
point2=thisComp.layer("layer B").transform.position;
delta=sub(point1, point2);
length(delta)

표시되는 결과는 너무도 정확한 대각선의 길이가 표시됩니다.(소숫점까지)
또한 length 함수는 실제 거리를 구하는 함수이므로 음수 값이 없습니다.(편하죠^^)

만약 소수점을 없애고 싶다면 Math.round(value) 함수를 사용하면 됩니다.
위 식에서 마지막 줄을 아래와 같이 수정합니다.
Math.round(length(delta))



스테이지에서 두 레이중 아무것이나 마구 마구 이리저리 움직여 보세요
정확히 두지점의 거리(대각선의 길이)값을 얻을 수 있습니다.