変換

translate() 関数は、オブジェクトをウィンドウ内の任意の位置に移動させることができます。 1番目のパラメーターは x 軸のオフセットを設定し、 2番目のパラメーターは y 軸のオフセットを設定します。この例では、変換を累積していく方法を示しています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let x = 0;
let y = 0;
let dim = 80.0;
function setup() {
  createCanvas(720, 400);
  noStroke();
}
function draw() {
  background(102);
  // x の値を増やすことでアニメーションします。
  x = x + 0.8;
  // 形状がキャンバス外に出た場合は位置をリセットします。
  if (x > width + dim) {
    x = -dim;
  }
  // rect 関数が、原点を中心とした形状を描画していますが、
  // translate で
  // 新しい x 座標と y 座標に移動しています。
  translate(x, height / 2 - dim / 2);
  fill(255); 
  rect(-dim / 2, -dim / 2, dim, dim);
  // 変換を累積してます。
  // この四角形が移動する速度は、他の四角形の2倍です。
  // ですが、x 軸のパラメーターは同じであることに着目してください。
  translate(x, dim);
  fill(0);
  rect(-dim / 2, -dim / 2, dim, dim);
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

言語設定

変換