JavaScript transform関数で空間上で回転した平面を描画する

Canvas Confettiというライブラリをつかってwebページ上に紙吹雪を描画しました。ちょっとした事情があってCanvas Confettiを使わずに紙吹雪のようなものを描画する必要に迫られたため、別の方法で紙吹雪のようなものを描画する方法を考えます。

今回はCanvasRenderingContext2D: transform関数を使います。この関数はcanvasのフォームを変更するのに行列を使用します。これによってcanvasを伸縮、回転、移動、傾斜することができます。引数は6つあり、以下の行列のa～fに対応しています。

一方、紙吹雪は四角形の平面で回転しています。3次元の回転体はX軸、Y軸、Z軸を中心にした3つの回転にわけて考えます。

Contents

1 行列と回転処理
- 1.1 行列を計算するクラスの定義
2 X軸を中心とした回転画像の描画
3 回転をシミュレーションする

行列と回転処理

行列を使うと回転処理をおこなう行列は以下のようになっています。

画面は2次元であるなので回転処理をしたあとこれを平面 z = 0 に平行投影した図形を画面に表示させればよいことになります。そのためには行列の積を計算して①～④を引数a～dにすればよいです。eとfは平行移動のためのものなので別に考えます。

行列を計算するクラスの定義

3×3行列を計算する処理をするのでMat3クラスを定義します。Multi関数は2つの行列の積を計算するためのものです。なんか変な計算ですが、これが行列の積の計算方法です。

class Mat3 {
    constructor(v00, v01, v02, v10, v11, v12, v20, v21, v22){
        this.Values = [
            [v00, v01, v02],
            [v10, v11, v12],
            [v20, v21, v22],
        ];
    }

    GetArray(){
        return this.Values;
    }

    static Multi(mat1, mat2){
        const arr1 = mat1.GetArray();
        const arr2 = mat2.GetArray();
        const v00 = arr1[0][0] * arr2[0][0] + arr1[0][1] * arr2[1][0] + arr1[0][2] * arr2[2][0];
        const v01 = arr1[0][0] * arr2[0][1] + arr1[0][1] * arr2[1][1] + arr1[0][2] * arr2[2][1];
        const v02 = arr1[0][0] * arr2[0][2] + arr1[0][1] * arr2[1][2] + arr1[0][2] * arr2[2][2];

        const v10 = arr1[1][0] * arr2[0][0] + arr1[1][1] * arr2[1][0] + arr1[1][2] * arr2[2][0];
        const v11 = arr1[1][0] * arr2[0][1] + arr1[1][1] * arr2[1][1] + arr1[1][2] * arr2[2][1];
        const v12 = arr1[1][0] * arr2[0][2] + arr1[1][1] * arr2[1][2] + arr1[1][2] * arr2[2][2];

        const v20 = arr1[2][0] * arr2[0][0] + arr1[2][1] * arr2[1][0] + arr1[2][2] * arr2[2][0];
        const v21 = arr1[2][0] * arr2[0][1] + arr1[2][1] * arr2[1][1] + arr1[2][2] * arr2[2][1];
        const v22 = arr1[2][0] * arr2[0][2] + arr1[2][1] * arr2[1][2] + arr1[2][2] * arr2[2][2];

        return new Mat3(v00, v01, v02, v10, v11, v12, v20, v21, v22);
    }
}

class Mat3 {

constructor(v00, v01, v02, v10, v11, v12, v20, v21, v22){

this.Values = [

[v00, v01, v02],

[v10, v11, v12],

[v20, v21, v22],

];

}

GetArray(){

return this.Values;

}

static Multi(mat1, mat2){

const arr1 = mat1.GetArray();

const arr2 = mat2.GetArray();

const v00 = arr1[0][0] * arr2[0][0] + arr1[0][1] * arr2[1][0] + arr1[0][2] * arr2[2][0];

const v01 = arr1[0][0] * arr2[0][1] + arr1[0][1] * arr2[1][1] + arr1[0][2] * arr2[2][1];

const v02 = arr1[0][0] * arr2[0][2] + arr1[0][1] * arr2[1][2] + arr1[0][2] * arr2[2][2];

const v10 = arr1[1][0] * arr2[0][0] + arr1[1][1] * arr2[1][0] + arr1[1][2] * arr2[2][0];

const v11 = arr1[1][0] * arr2[0][1] + arr1[1][1] * arr2[1][1] + arr1[1][2] * arr2[2][1];

const v12 = arr1[1][0] * arr2[0][2] + arr1[1][1] * arr2[1][2] + arr1[1][2] * arr2[2][2];

const v20 = arr1[2][0] * arr2[0][0] + arr1[2][1] * arr2[1][0] + arr1[2][2] * arr2[2][0];

const v21 = arr1[2][0] * arr2[0][1] + arr1[2][1] * arr2[1][1] + arr1[2][2] * arr2[2][1];

const v22 = arr1[2][0] * arr2[0][2] + arr1[2][1] * arr2[1][2] + arr1[2][2] * arr2[2][2];

return new Mat3(v00, v01, v02, v10, v11, v12, v20, v21, v22);

}

X軸を中心とした回転画像の描画

まずは、X軸を中心とした回転画像を描画することにします。

動作確認はこちらから

HTML部分は以下のようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
</head>

<body>

<canvas id = "canvas"></canvas>
<script src= "./index.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

JavaScript部分は上記のMat3クラスの定義に加えて、

index.js

const CANVAS_WIDTH = 360;
const CANVAS_HEIGHT = 360;
const BLOCK_SIZE = 150;

const $canvas = document.getElementById('canvas');
const ctx = $canvas.getContext('2d');

let angleX = 0;

window.onload = () => {
    $canvas.width = CANVAS_WIDTH;
    $canvas.height = CANVAS_HEIGHT;

    update();
}

function update(){
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    angleX += 0.02;

    const mat = new Mat3(1, 0, 0, 0, Math.cos(angleX), -Math.sin(angleX), 0, Math.sin(angleX), Math.cos(angleX));
    const arr = mat.GetArray();

    ctx.textBaseline = 'top';
    ctx.save();
    ctx.transform(arr[0][0], arr[1][0], arr[0][1], arr[1][1], 150, 150);
    ctx.fillStyle = '#00f';
    ctx.fillRect(-BLOCK_SIZE/2, -BLOCK_SIZE/2, BLOCK_SIZE, BLOCK_SIZE);

    ctx.fillStyle = '#fff';
    ctx.font = '150px "ＭＳ ゴシック"';
    ctx.fillText('鳩', -BLOCK_SIZE/2, -BLOCK_SIZE/2);
    ctx.restore();

    requestAnimationFrame(update);
}

const CANVAS_WIDTH = 360;

const CANVAS_HEIGHT = 360;

const BLOCK_SIZE = 150;

const $canvas = document.getElementById('canvas');

const ctx = $canvas.getContext('2d');

let angleX = 0;

window.onload = () => {

$canvas.width = CANVAS_WIDTH;

$canvas.height = CANVAS_HEIGHT;

update();

}

function update(){

ctx.fillStyle = '#000';

ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

angleX += 0.02;

const mat = new Mat3(1, 0, 0, 0, Math.cos(angleX), -Math.sin(angleX), 0, Math.sin(angleX), Math.cos(angleX));

const arr = mat.GetArray();

ctx.textBaseline = 'top';

ctx.save();

ctx.transform(arr[0][0], arr[1][0], arr[0][1], arr[1][1], 150, 150);

ctx.fillStyle = '#00f';

ctx.fillRect(-BLOCK_SIZE/2, -BLOCK_SIZE/2, BLOCK_SIZE, BLOCK_SIZE);

ctx.fillStyle = '#fff';

ctx.font = '150px "ＭＳゴシック"';

ctx.fillText('鳩', -BLOCK_SIZE/2, -BLOCK_SIZE/2);

ctx.restore();

requestAnimationFrame(update);

}

これでX軸を中心に正方形が回転する描画ができるようになりました。

回転をシミュレーションする

これでは面白くないのでX軸、Y軸、Z軸を中心に回転させたりさせなかったり回転速度を変更できるようなものをつくります。

動作確認はこちらから

HTML部分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>回転のテスト</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<link rel = "stylesheet" href = "./style.css" type = "text/css" media = "all">
</head>

<body>

<canvas id = "canvas"></canvas>

<div id = "x"><input type="checkbox" id = "checkX"><label for="x">X</label><input type="range" id = "rangeX" min="0" max="0.100" step="0.002"><span id = "valueX"></span></div>
<div id = "y"><input type="checkbox" id = "checkY"><label for="y">Y</label><input type="range" id = "rangeY" min="0" max="0.100" step="0.002"><span id = "valueY"></span></div>
<div id = "z"><input type="checkbox" id = "checkZ"><label for="z">Z</label><input type="range" id = "rangeZ" min="0" max="0.100" step="0.002"><span id = "valueZ"></span></div>

<script src= "./index.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>回転のテスト</title>

</head>

<body>

</body>

</html>

style.css

#canvas {
    display:block;
}

#x, #y, #z {
    margin-top: 20px;
}

#rangeX, #rangeY, #rangeZ {
    margin-left: 20px;
    width: 250px;
    vertical-align: middle;
}

#valueX, #valueY, #valueZ {
    margin-left: 20px;
}

#canvas {

display:block;

}

#x, #y, #z {

margin-top: 20px;

}

#rangeX, #rangeY, #rangeZ {

margin-left: 20px;

width: 250px;

vertical-align: middle;

}

#valueX, #valueY, #valueZ {

margin-left: 20px;

}

Mat3クラス

index.js

Mat3クラスは変更ありません。

class Mat3 {
    constructor(v00, v01, v02, v10, v11, v12, v20, v21, v22){
        this.Values = [
            [v00, v01, v02],
            [v10, v11, v12],
            [v20, v21, v22],
        ];
    }

    GetArray(){
        return this.Values;
    }

    static Multi(mat1, mat2){
        const arr1 = mat1.GetArray();
        const arr2 = mat2.GetArray();
        const v00 = arr1[0][0] * arr2[0][0] + arr1[0][1] * arr2[1][0] + arr1[0][2] * arr2[2][0];
        const v01 = arr1[0][0] * arr2[0][1] + arr1[0][1] * arr2[1][1] + arr1[0][2] * arr2[2][1];
        const v02 = arr1[0][0] * arr2[0][2] + arr1[0][1] * arr2[1][2] + arr1[0][2] * arr2[2][2];

        const v10 = arr1[1][0] * arr2[0][0] + arr1[1][1] * arr2[1][0] + arr1[1][2] * arr2[2][0];
        const v11 = arr1[1][0] * arr2[0][1] + arr1[1][1] * arr2[1][1] + arr1[1][2] * arr2[2][1];
        const v12 = arr1[1][0] * arr2[0][2] + arr1[1][1] * arr2[1][2] + arr1[1][2] * arr2[2][2];

        const v20 = arr1[2][0] * arr2[0][0] + arr1[2][1] * arr2[1][0] + arr1[2][2] * arr2[2][0];
        const v21 = arr1[2][0] * arr2[0][1] + arr1[2][1] * arr2[1][1] + arr1[2][2] * arr2[2][1];
        const v22 = arr1[2][0] * arr2[0][2] + arr1[2][1] * arr2[1][2] + arr1[2][2] * arr2[2][2];

        return new Mat3(v00, v01, v02, v10, v11, v12, v20, v21, v22);
    }
}