P5.js 日本語リファレンス(translate)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の translate 関数を説明します。

translate()

説明文

表示ウィンドウ内のオブジェクトを移動する量を指定します。 x パラメータは左/右への移動を指定し、y パラメータは上/下への移動を指定します。

変換は累積的であり、関数への後続の呼び出しが効果を累積した後に発生するすべてに適用されます。たとえば、translate(50, 0) を呼び出してから translate(20, 0) を呼び出すことは translate(70, 0) と同じです。 draw() 内でtranslate() が呼び出された場合、ループが再び始まると変換がリセットされます。この関数は push() および pop() を使用してさらに制御できます。

構文

translate(x, y, [z])

translate(vector)

パラメタ

• x
  Number：左/右変換

• y
  Number：アップ/ダウン変換

• z
  Number：順方向/逆方向変換(webglのみ)(オプション)

• vector
  p5.Vector：変換するベクトル

例1

function setup() {
  createCanvas(400, 400);

  stroke("red");
  rect(0, 0, 55, 55);
  
  stroke("green");
  translate(30, 30);
  rect(0, 0, 55, 55);
  
  stroke("blue");
  translate(30, 30);
  rect(0, 0, 55, 55);  
}

実行結果

例2

function setup() {
  createCanvas(200, 200);
}

function draw()  {
  background(200);

  rectMode(CENTER);
  translate(width / 2, height / 2);

  // ミリ秒を1000で割った数を角度とし長さ60のベクトルを作成する。
  // (回転する半径が60になる)
  translate(p5.Vector.fromAngle(millis()  / 1000, 60));
  rect(0, 0, 20, 20);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。