좌표계를 이동시킵니다.
기본적으로 2D 모드에서 원점 (0, 0)
은 스케치의 왼쪽 상단에 있으며 WebGL 모드에서는 중앙에 있습니다. translate()
함수는 원점을 다른 위치로 이동시킵니다. translate()
를 호출한 후에 그려지는 모든 것은 이동된 것처럼 보입니다. 원점의 위치를 설정하는 매개변수를 사용하여 translate()
를 호출하는 두 가지 방법이 있습니다.
translate()
를 호출하는 첫 번째 방법은 이동하는 양을 설정하는 데 숫자를 사용합니다. 첫 번째 매개변수인 x
와 y
는 x축과 y축의 양의 방향에 따라 이동할 양을 설정합니다. 예를 들어, translate(20, 30)
을 호출하면 원점이 x축을 따라 20픽셀, y축을 따라 30픽셀 이동합니다. 세 번째 매개변수인 z
는 선택적입니다. z축의 양의 방향에 따라 이동할 양을 설정합니다.
translate(20, 30, 40)
을 호출하면 원점이 x축을 따라 20 픽셀, y축을 따라 30 픽셀, z축을 따라 40 픽셀 이동합니다.translate()
를 호출하는 두 번째 방법은 p5.Vector 객체를 사용하여 이동할 양을 설정합니다. 예를 들어, translate(myVector)
를 호출하면 myVector
의 x, y, z 구성 요소를 사용하여 x, y, z축에 따라 이동할 양을 설정합니다. 이는 translate(myVector.x, myVector.y, myVector.z)
를 호출하는 것과 같습니다.
기본적으로 변환은 누적됩니다. 예를 들어, translate(10, 0)
을 두 번 호출하는 것은 translate(20, 0)
를 한 번 호출하는 것과 같은 효과가 있습니다. push()와 pop() 함수를 사용하여 서로 다른 그룹 내에서 변환을 분리할 수 있습니다.
참고: 변환은 draw 루프의 시작 지점에서 재설정됩니다. draw() 함수 내에서 translate(10, 0)
를 호출해도 도형이 계속해서 이동하지 않습니다.
예제
구문
translate(x, y, [z])
translate(vector)
매개변수
x축의 양의 방향에 따라 이동할 양.
y축의 양의 방향에 따라 이동할 양.
z축의 양의 방향에 따라 이동할 양.
이동할 만큼의 벡터.