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

rotate()

説明文

角度パラメータで指定された量だけ形状を回転させます。この関数はangleModeを考慮しているため RADIANS または DEGREES のいずれかで角度を指定します。

オブジェクトは常に原点に対する相対位置を中心に回転し、正の数はオブジェクトを時計回りに回転させます。変換は関数への後続の呼び出しが効果を蓄積した後に発生するすべてに適用されます。たとえば rotate(HALF_PI) を呼び出してから rotate(HALF_PI) を呼び出すことは rotate(PI) と同じです。 draw() が再び開始するとすべての変換がリセットされます。

技術的には rotate() は現在の変換行列に回転行列を乗算します。この関数は push() および pop() によってさらに制御できます。

構文

rotate(angle, [axis])

パラメタ

angle
Number：現在の angleMode(RADIANS、DEGREES) に応じてラジアンまたは度で指定される回転角度
axis
p5.Vector | Number []：(3d)回転する軸(オプション)

例1

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

function draw() {
  background(220);

  stroke("red");
  rect(100, 0, 52, 52);

  rotate(PI / 6.0);  // 30°時計回りに回転
  stroke("green");
  rect(100, 0, 52, 52);

  rotate(PI / 6.0);  // 更に30°時計回りに回転
  stroke("blue");
  rect(100, 0, 52, 52);
}

実行結果

著作権

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