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

このページでは「P5.js 日本語リファレンス」 の applyMatrix関数を説明します。

applyMatrix()

説明文

現在の行列にパラメータで指定された行列を乗算します。これは、平行移動、拡大縮小、剪断、回転をすべて同時に実行できる強力な操作です。ウィキペディアで変換マトリックスの詳細を学ぶことができます。

ここでの引数の命名は、WHATWG仕様の命名に従い、次の形式の変換行列に対応します。

2次元変換マトリックス

\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{pmatrix}

2次元平行移動

• e: x方向の平行移動量
• f: y方向の平行移動量

\begin{pmatrix}
0 & 0 & e \\
0 & 0 & f \\
0 & 0 & 1
\end{pmatrix}

2次元拡大縮小

• a: x方向の拡大縮小率
• d: y方向の拡大縮小率

\begin{pmatrix}
a & 0 & 0 \\
0 & d & 0 \\
0 & 0 & 1
\end{pmatrix}

2次元回転

a: cos(回転角度)
b: sin(回転角度)
c: -sin(回転角度)
d: cos(回転角度)

\begin{pmatrix}
a & c & 0 \\
b & d & 0 \\
0 & 0 & 1
\end{pmatrix}

3次元変換マトリックス

\begin{pmatrix}
m11 & m21 & m31 & m41 \\
m12 & m22 & m32 & m42 \\
m13 & m23 & m33 & m43 \\
0 & 0 & 0 & 1
\end{pmatrix}

3次元平行移動

m41: x方向の平行移動量
m42: y方向の平行移動量
m43: z方向の平行移動量

\begin{pmatrix}
1 & 0 & 0 & m41 \\
0 & 1 & 0 & m42 \\
0 & 0 & 1 & m43 \\
0 & 0 & 0 & 1
\end{pmatrix}

３次元拡大縮小

m11: x方向の拡大縮小率
m22: y方向の拡大縮小率
m33: z方向の拡大縮小率

\begin{pmatrix}
m11 & 0 & 0 & 0 \\
0 & m22 & 0 & 0 \\
0 & 0 & m33 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}

3次元x軸回転

m22: cos(回転角度)
m23: -sin(回転角度)
m32: sin(回転角度)
m33: cos(回転角度)

\begin{pmatrix}
1 & 0 & 0 & 0 \\
0 & m22 & m32 & 0 \\
0 & m23 & m33 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}

３次元y軸回転

m11: cos(回転角度)
m13: sin(回転角度)
m31: -sin(回転角度)
m33: cos(回転角度)

\begin{pmatrix}
m11 & 0 & m31 & 0 \\
0 & 1 & 0 & 0 \\
m13 & 0 & m33 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}

３次元z軸回転

m11: cos(回転角度)
m12: sin(回転角度)
m21: -sin(回転角度)
m22: cos(回転角度)

\begin{pmatrix}
m11 & m21 & 0 & 0 \\
m12 & m22 & 0 & 0 \\
0 & 0 & 0 & 0 \\
0 & 0 & 0 & 1
\end{pmatrix}

構文

applyMatrix(a, b, c, d, e, f)

applyMatrix(m11, m12, m13, m21, m22, m23, m31, m32, m33, m41, m42, m43)

パラメタ

• a - f
  Number：乗算する2x3行列を定義する数値

• m11 - m43
  Number：乗算する3x4行列を定義する数値

例1　2次元の平行移動

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  background(200);

  // 2次元の平行移動
  applyMatrix(        1,         0,
                      0,         1,
              40 + step, 30 + step);

  rect(0, 0, 50, 50);
}

実行結果

例2　2次元の拡大縮小

function setup() {
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  background(200);
  translate(50, 50);

  // 2次元の拡大縮小
  applyMatrix(1 / step,         0,
                     0,  1 / step,
                     0,         0);

  rect(0, 0, 50, 50);
}

実行結果

例3　2次元の回転

function setup()  {
  frameRate(10);
  rectMode(CENTER);
}

function draw()  {
  let step = frameCount % 20;
  let angle = map(step, 0, 20, 0, TWO_PI);

  background(200);
  translate(50, 50);

  // 2次元の回転
  applyMatrix( cos(angle), sin(angle),
              -sin(angle), cos(angle),
                        0,          0);

  rect(0, 0, 50, 50);
}

実行結果

例4　3次元の平行移動

function setup() {
  createCanvas(200, 200, WEBGL);
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let dx = frameCount % 30;
  let dy = frameCount % 30;
  let dz = frameCount % 30;
  background(200);

  // 3次元x、y、z方向の平行移動
  applyMatrix(  1,   0,   0,   0,
                0,   1,   0,   0,
                0,   0,   1,   0,
               dx,  dy,  dz,   1);

  box(50);
}

実行結果

例5　3次元の拡大縮小

function setup() {
  createCanvas(200, 200, WEBGL);
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let step = frameCount % 20;
  background(200);

  // 3次元のx、y方向の拡大縮小
  applyMatrix(1 / step,        0,  0,  0,
                     0, 1 / step,  0,  0,
                     0,        0,  0,  0,
                     0,        0,  0,  1);

  box(50);
}

実行結果

例6　3次元のx軸を中心とした回転

function setup() {
  createCanvas(100, 100, WEBGL);
  noFill() ;
}

function draw()  {
  background(200);
  rotateX(PI / 6);
  stroke(153);
  box(35);
  let rad = millis()  / 1000;

  // 3次元のx軸を中心とした回転
  applyMatrix( 1,        0,         0,  0,
               0, cos(rad), -sin(rad),  0,
               0, sin(rad),  cos(rad),  0,
               0,        0,         0,  1);

  stroke(255);
  box(50);
}

実行結果

例7　3次元のy軸を中心とした回転

function setup() {
  createCanvas(100, 100, WEBGL);
  noFill() ;
}

function draw()  {
  background(200);
  rotateY(PI / 6);
  stroke(153);
  box(35);
  let rad = millis()  / 1000;

  // 3次元のy軸を中心とした回転
  applyMatrix( cos(rad),  0.0,  sin(rad),  0.0,
                    0.0,  1.0,       0.0,  0.0,
              -sin(rad),  0.0,  cos(rad),  0.0,
                    0.0,  0.0,       0.0,  1.0);

  stroke(255);
  box(50);
}

実行結果

例8　3次元のz軸を中心とした回転

function setup() {
  createCanvas(100, 100, WEBGL);
  noFill() ;
}

function draw()  {
  background(200);
  rotateZ(PI / 6);
  stroke(153);
  box(35);
  let rad = millis()  / 1000;

  // 3次元のz軸を中心とした回転
  applyMatrix(  cos(rad),  sin(rad),  0,  0,
               -sin(rad),  cos(rad),  0,  0,
                       0,         0,  0,  0,
                       0,         0,  0,  1);

  stroke(255);
  box(50);
}

実行結果

例9　平行移動とx軸回転の組み合わせ

function setup() {
  createCanvas(200, 200, WEBGL);
  frameRate(10);
  rectMode(CENTER);
}

function draw() {
  let dx = frameCount % 30;
  let dy = frameCount % 30;
  let dz = frameCount % 30;
  let rad = millis()  / 1000;

  background(200);

  // 3次元x、y、z方向の平行移動
  applyMatrix(  1,   0,   0,   0,
                0,   1,   0,   0,
                0,   0,   1,   0,
               dx,  dy,  dz,   1);

  // 3次元のx軸を中心とした回転
  applyMatrix( 1,        0,         0,  0,
               0, cos(rad), -sin(rad),  0,
               0, sin(rad),  cos(rad),  0,
               0,        0,         0,  1);


  box(50);
}

実行結果

著作権

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