JavaScript で canvas に書いた点を移動する

前回は canvas にランダムな点を描画したけど、今回はその点を移動させてみようと思う。 おおまかな構造は前回からほとんど変わっていない。主にいじった箇所は Vertex あたりか。今回は点が移動するので、移動速度を格納する velocityX, velocityY を追加した。それと動かない点も欲しかったから isStatic も追加。これをもとにその点を動かすかどうかを判定する。velocityX, velocityY, isStatic はすべて Vertex 生成時に初期化する。 各点を移動するために Vertex に update を追加。isStatic が偽になるものは velocityX, velocityY をもとに座標を更新する。update は draw する前にコールする。 今回は点を移動させるので一度だけ描画して終わりってわけにはいかない。描画処理を一定時間で繰り返すために drawVertexList を setInterval で括る。 こんなとこでしょうか。結果は Result から。 以下、JavaScript だけ。

$(document).ready(function () {

    var SAMPLE = {};

    SAMPLE.Main = (function () {

        // 頂点
        function Vertex(x, y, vx, vy) {

            this.x = x;
            this.y = y;

            // 固定頂点かどうか（true:固定、false:移動）
            this.isStatic = ((vx == undefined || vy == undefined) ? true : false);
            // X 軸の移動速度
            this.velocityX = ((vx == undefined) ? Math.random() * 0.7 - 0.35 : vx);
            // Y 軸の移動速度
            this.velocityY = ((vy == undefined) ? Math.random() * 0.7 - 0.35 : vy);

            // 頂点を描画
            this.draw = function () {

                // 固定は黒、移動は赤
                ctx.fillStyle = (this.isStatic ? "rgb(66, 66, 66)" : "rgb(255, 66, 22)");

                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, 360, true);
                ctx.fill();

            };

            // 頂点を更新
            this.update = function () {

                // 移動する頂点の場合
                if (!this.isStatic) {

                    // canvas の端で跳ね返す（X）
                    if (0 > this.x || canDom.width < this.x) {
                        this.velocityX *= -1;
                    }

                    // canvas の端で跳ね返す（Y）
                    if (0 > this.y || canDom.height < this.y) {
                        this.velocityY *= -1;
                    }

                    // 座標を更新
                    this.x += this.velocityX;
                    this.y += this.velocityY;
                }

            };
        }

        var canJqObj = $("#can"),
            canDom = document.getElementById('can'),
            ctx = document.getElementById('can').getContext("2d"),
            vertexList = [];

        // 頂点リストを初期化
        function initializeVertexList(list) {

            // 四隅に頂点を追加
            list.push(new Vertex(0, 0));
            list.push(new Vertex(canDom.width, 0));
            list.push(new Vertex(0, canDom.height));
            list.push(new Vertex(canDom.width, canDom.height));

            // ランダムに頂点を追加（固定）
            for (i = 0; i < 10; i++) {
                list.push(new Vertex(
                Math.floor(Math.random() * canDom.width),
                Math.floor(Math.random() * canDom.height)));
            }

            // ランダムに頂点を追加（移動）
            for (i = 0; i < 10; i++) {
                list.push(new Vertex(
                Math.floor(Math.random() * canDom.width),
                Math.floor(Math.random() * canDom.height),
                Math.random() * 0.7 - 0.35,
                Math.random() * 0.7 - 0.35));
            }

        }

        // canvas をクリア
        function clearCanvas() {

            ctx.clearRect(0, 0, canDom.width, canDom.height);
            ctx.globalAlpha = 1;

        }

        // 描画リストを描画
        function drawVertexList(list) {

            // canvas をクリア
            clearCanvas();

            for (i = 0; i < list.length; i++) {

                // 頂点を更新
                list[i].update();

                // 頂点を描画
                list[i].draw();

            }
        }

        // 開始
        function init() {

            // canvas のサイズを指定        
            canDom.width = 400;
            canDom.height = 350;

            // 頂点リストを初期化
            initializeVertexList(vertexList);

            // 一定時間で繰り返す
            setInterval(function () {

                // 頂点リストを描画
                drawVertexList(vertexList);

            }, 33);
        }

        // 開始
        init();

    })();

});