캣멀롬 스플라인(Catmull-Rom spline) 사용하여 곡선을 그립니다.
스플라인 곡선은 부드럽게 기울어지는 모양과 곡선을 만들 수 있습니다. 이는 케이블이 여러 포인트에 연결된 것과 유사합니다. 스플라인은 두 앵커 포인트(anchor point)와 두 컨트롤 포인트(control point)로 정의됩니다.
첫 번째 두 매개변수인 x1 와 y1, 은 첫 번째 컨트롤 포인트를 설정합니다. 이 점은 그려지지 않으며, 곡선의 시작점으로 생각할 수 있습니다.
다음 네 매개 변수인 x2, y2, x3, y3, 는 두 앵커 포인트를 설정합니다. 앵커 포인트는 곡선의 가시적인 부분의 시작점과 끝점을 나타냅니다.
일곱 번째와 여덟 번째 매개변수인 x4 와 y4, 는 마지막 컨트롤 포인트를 설정합니다. 이 점은 그려지지 않으며 곡선의 끝점으로 생각할 수 있습니다.
스플라인 곡선은 WebGL 모드를 사용하여 3D로도 그릴 수 있습니다. curve() 함수의 3D 버전은 각 점이 x, y, z좌표를 가지기 때문에 12개의 인수를 가집니다.
예제
구문
curve(x1, y1, x2, y2, x3, y3, x4, y4)curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)매개변수
첫 번째 컨트롤 포인트의 x 좌표입니다.
첫 번째 컨트롤 포인트의 y 좌표입니다.
첫 번째 앵커 포인트의 x 좌표입니다.
첫 번째 앵커 포인트의 y 좌표입니다.
두 번째 앵커 포인트의 x 좌표입니다.
두 번째 앵커 포인트의 y 좌표입니다.
두 번째 컨트롤 포인트의 x 좌표입니다.
두 번째 컨트롤 포인트의 y 좌표입니다.
첫 번째 컨트롤 포인트의 z 좌표.
첫 번째 앵커 포인트의 z 좌표.
두 번째 앵커 포인트의 z 좌표.
두 번째 컨트롤 포인트의 z 좌표.