책장 넘기는 효과 구현하기 - 2.
여가생활/산수공부이번에는 앞에서처럼 페이지를 왕창 접지 말고 아래와 같이 약간만 접어놓는다.
좌상단을 원점으로 하는 좌표계를 떠올린 뒤 마음속에 아래와 같은 선을 그어보면 재미난 규칙이 보인다.
좌상단 모서리 이동점이 페이지상 임의 위치 MvTL (x: c, y: b) 에 있을 때, 접힘양 a 는 피타고라스 정의에 의해 다음과 같은 관계를 가진다.
제곱근도 빠진 아주 간단한 1차식으로 위쪽 접힘점의 위치를 계산할 수 있다.
이제 접힘점에서 수직으로 내려진 파란선과 C변의 교점을 K 라고 하자. 또한 MvTL 점을 지나는 수평선과 좌변의 교점을 M 이라고 하자.
접힘점1 - MvTL - K 가 이루는 삼각형은 MvTL - 접힘점2 - M 이 이루는 삼각형과 닮은꼴이 된다.
따라서 다음과 같은 비례식을 세울 수 있다.
접힘점2의 위치는 원점에서 d + b 만큼 떨어진 곳이 된다.
타원으로 풀었던 방식에 비해 뭐가 이래~ 이렇게 쉬워?? 싶다. 역시 구조를 바꾸면 코드도 간편해지는 법.
고민해야 할 상황이 두가지 더 있다.
첫번째는 접힘점2 가 페이지 좌변이 아닌 밑변에 있는 경우, 즉 d + b 값이 페이지의 높이값 ph 보다 클 때이다.
이 경우 O - 접힘점1 - L 이 이루는 삼각형은 N - 접힘점2 - L 이 이루는 삼각형과 닮음이다.
점L 과 점O 의 거리는 위에서 구한 d + b 값이고,
점L 과 점N 의 거리는 d + b 에서 높이 ph 를 뺀 값이다.
따라서 구하고자 하는 점 N 과 접힘점2 사이의 거리를 e 라고 하면 다음과 같은 비례식이 성립한다.
그리고 두번째는 MvTL 이 페이지 위쪽에 있을 때, 지금 좌상단을 기준으로 한 좌표계에서는 b가 음수값이 될 때인데...
반복되는 설명이니 이 부분은 나중에 시간날 때 업데이트 하기로 하고, 결론부터 말해 다음과 같은 식으로 하단 접힘점을 구할 수 있다.
이상의 수식을 가지고 실제 코드를 만들어보면 바로 눈치채겠지만, 페이지상에는 MvTL 이 위치할 수 있는 범위가 정해져있다. 기본적으로 페이지의 우상단 기준으로부터 거리가 pw인 원 이내지만, 이 조건에 맞는 MvTL 값만으로 페이지의 접힘점을 계산하면 때로는 페이지가 찢어진 것 처럼 될수가 있다. 실세계에서 MvTL은 또 다른 움직이는 좌표인 좌하단 모서리 이동값 (이하 MvBL) 에 의해 영향을 받고 있기 때문이다. 따라서 타원에 의한 해법이건 비례식에 의한 해법이건, 유저의 입력에 대해 이 값을 그대로 적용할 수 없고 상호구속적인 두 절점의 적절한 위치를 결정해주어야 한다.
이 방법에는 책장넘김 효과를 구현하는 개개인마다 여러가지 선택이 있겠지만... 아무튼 내가 사용한 방법에 대해서는 3편에서 계속하기로 하자.
