레퍼런스 translate()

translate()

좌표계를 이동시킵니다.

기본적으로 2D 모드에서 원점 (0, 0)은 스케치의 왼쪽 상단에 있으며 WebGL 모드에서는 중앙에 있습니다. translate() 함수는 원점을 다른 위치로 이동시킵니다. translate()를 호출한 후에 그려지는 모든 것은 이동된 것처럼 보입니다. 원점의 위치를 설정하는 매개변수를 사용하여 translate()를 호출하는 두 가지 방법이 있습니다.

translate()를 호출하는 첫 번째 방법은 이동하는 양을 설정하는 데 숫자를 사용합니다. 첫 번째 매개변수인 xy는 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
Number:

x축의 양의 방향에 따라 이동할 양.

y
Number:

y축의 양의 방향에 따라 이동할 양.

z
Number:

z축의 양의 방향에 따라 이동할 양.

vector
p5.Vector:

이동할 만큼의 벡터.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/transform.js and open a pull request!

관련 레퍼런스