リファレンス translate()

translate()

座標系を平行移動します。

デフォルトでは、原点(0, 0)は2Dモードではスケッチの左上隅に、 WebGLモードでは中央にあります。translate()関数は原点を 別の位置に移動させます。translate()が呼び出された後に 描画されるものはすべて移動したように見えます。原点の位置を設定する パラメータを使ってtranslate()を呼び出す方法は2つあります。

translate()を呼び出す最初の方法は、数値を使用して 平行移動量を設定します。最初の2つのパラメータxyは、 正のx軸とy軸に沿って平行移動する量を設定します。例えば、 translate(20, 30)を呼び出すと、原点がx軸に沿って20ピクセル、 y軸に沿って30ピクセル平行移動します。3番目のパラメータzはオプションです。 これは正のz軸に沿って平行移動する量を設定します。例えば、 translate(20, 30, 40)を呼び出すと、原点がx軸に沿って20ピクセル、 y軸に沿って30ピクセル、z軸に沿って40ピクセル平行移動します。

translate()を呼び出す2番目の方法は、 p5.Vectorオブジェクトを使用して 平行移動量を設定します。例えば、translate(myVector)を呼び出すと、 myVectorのx、y、z成分を使用して、x軸、y軸、z軸に沿って 平行移動する量を設定します。これはtranslate(myVector.x, myVector.y, myVector.z) を呼び出すのと同じです。

デフォルトでは、変換は累積されます。例えば、translate(10, 0)を 2回呼び出すことは、translate(20, 0)を1回呼び出すのと 同じ効果があります。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!

関連するリファレンス