Help us understand the problem. What is going on with this article?

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

このページでは「P5.js 日本語リファレンス」 の 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);  
}

実行結果

https://editor.p5js.org/bit0101/sketches/PI43OkNFn

例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);
}

実行結果

https://editor.p5js.org/bit0101/sketches/tVYVP1BjY

著作権

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) に従います。

bit0101
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away