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

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

## applyMatrix() 

### 説明文

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

ここでの引数の命名は、[WHATWG仕様](https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-transform)の命名に従い、次の形式の変換行列に対応します。

#### 2次元変換マトリックス

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


#### 2次元平行移動

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

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

#### 2次元拡大縮小

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

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

#### 2次元回転

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

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

#### 3次元変換マトリックス

```math
\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方向の平行移動量

```math
\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方向の拡大縮小率

```math
\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(回転角度)

```math
\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(回転角度)

```math
\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(回転角度)

```math
\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次元の平行移動

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/hnW37L2tv

### 例2　2次元の拡大縮小

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/hqHo8r7DW


### 例3　2次元の回転

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/AxKDBbXgO


### 例4　3次元の平行移動

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/aHQKDWt8r


### 例5　3次元の拡大縮小

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/Bz2HX45eP


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

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/rIg-BgThL


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

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/Sd8nJItVe


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

```javascript
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);
}
```

### 実行結果
https://editor.p5js.org/bit0101/sketches/OexDrcluT



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

```javascript
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);
}
```
### 実行結果
https://editor.p5js.org/bit0101/sketches/TQM4XFV1W


### 著作権

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