このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の 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) に従います。