3 point Curve equation (bezier curve)
https://www.gpgstudy.com/forum/viewtopic.php?t=9715 두개의 끝점(P0, P2)과 하나의 콘트롤 포인트(P1)을 이용하여 quadratic Bezier spline 곡선을 그리는 매개변수 방정식은 다음과 같습니다. [1] P'(t) = (1-t)^2 * P0 + 2t(1-t)P1 + t^2 * P2 (0<= t <= 1) 그런데 이방정식을 이용하여 그려지는 곡선은 P1을 지나지 않으므로 이 방정식을 이용하여 아래와 같이 특정 t시간에 가운데점을 반드시 지나게하는 P1을 구한후 [1]식을 이용하여 곡선을 그리면 될듯 합니다. P1 = (P'(t) - (1-t)^2 * P0 - t^2 * P2) / 2t(1-t) 그리고 Bezier spline 곡선은 콘트롤 포인트가 많을수록 다양한 형태의 곡선을 만들수 있으니 점이 많을수록 부드러운 곡선을 그릴수 있다고 말할수도 있겠네요. https://blog.coderifleman.com/2017/03/19/bezier-curves-for-frontend-engineer-3/ 먼저 blender()는 점 A와 점 B 그리고 가중치 t를 전달받아 블랜딩한 결괏값을 반환하는 함수다. function blender ( A , B , t ) { if ( t === 0 ) { return A ; } if ( t === 1 ) { return B ; } return ( ( 1 - t ) * A ) + ( t * B ) ; // or A + t * (B - A) } 이때 blender()는 좌표 하나에 대한 연산만 책임지므로 x, y 좌표를 연산하기 위해 blend()를 작성한다. function blend ( x1 , x2 , y1 , y2 , t ) { const x = blender ( x1 , x2 , t ) ; const y = blender ...