カテゴリー: その他

/**
 * ざわ・・・メーカー
 * @param {obj} cs: canvas object
 * @param {number} zawaNum: 生成する「ざわ・・・」の数
 * @param {boolean} isBordering: 縁取りするかどうか
 *     黒文字の場合は白フチに、白文字の場合は黒フチに
 * @param {boolean} isColorBlack: 黒文字にするかどうか（falseで白文字）
 * @param {boolean} isRightFlow: 右から流れるようにするか
 */
var zawaMaker = function(cs, zawaNum, isBordering, isColorBlack, isRightFlow ) {
    var ctx      = cs.getContext('2d');
    var csWidth  = cs.width;
    var csHeight = cs.height;
    var zawas    = [];

    /**
     * ランダムな整数を返す
     * @param max 最大値
     * @param min 最小値
     * @return min ~ max
     */
    var getRandomInt = function(max, min) {
        return Math.floor(Math.random() * (max - min)) + min;
    };

    /**
     * @constructor
     */
    var ZawaZawa = function() {
        this.initialize();
    };

    ZawaZawa.prototype = {
        initialize: function() {
            this.scale     = getRandomInt(10, 5) / 10; // 1 ~ 0.5の倍率
            this.width     = this.scale * 160;  // 元サイズを大体150pxくらいと規定
            this.height    = this.scale * 60;   // 元サイズを大体60pxくらいと規定
            this.moveX     = getRandomInt(csWidth  - this.width, 0);
            this.moveY     = getRandomInt(csHeight - this.height, 0);
            this.addMoveX  = this.scale * 5;  // 奥行きを出すために、小さい要素は移動量を少なくする
            this.alpha     = 1;
        },
        setStatus: function() {
            /* 変換マトリクスを初期化 */
            ctx.setTransform(1, 0, 0, 1, 0, 0);

            ctx.scale(this.scale, this.scale);
            ctx.translate(this.moveX, this.moveY);
            ctx.globalAlpha = this.alpha;
        },
        update: function() {
            /* scaleで座標軸がズレているので、scaleした分を割った値をCanvasサイズとする */
            var _csWidth = csWidth / this.scale;

            /* 流れる向きの条件分岐 */
            if (isRightFlow) {
                if (this.moveX + this.width + 50 < 0 ) {
                    this.alpha = 0;
                    this.moveX = _csWidth + this.width;

                    /* scaleを変えるため再設定 */
                    this.scale    = getRandomInt(10, 5) / 10;
                    this.width    = this.scale * 160;
                    this.height   = this.scale * 60;
                    this.moveY    = getRandomInt(csHeight - this.height, 0);
                    this.addMoveX = this.scale * 5;
                } else {
                    this.moveX -= this.addMoveX;
                    this.alpha += 0.01;
                }
            } else {
                if (this.moveX >_csWidth) {
                    this.alpha = 0;
                    this.moveX = - this.width;

                    /* scaleを変えるため再設定 */
                    this.scale    = getRandomInt(10, 5) / 10;
                    this.width    = this.scale * 160;
                    this.height   = this.scale * 60;
                    this.moveY    = getRandomInt(csHeight - this.height, 0);
                    this.addMoveX = this.scale * 5;
                } else {
                    this.moveX += this.addMoveX;
                    this.alpha += 0.01;
                }
            }

            /* 透明度が1以上の場合は透明度の増加を止める */
            if (this.alpha > 1) {
                this.alpha = 1;
            }
        },
        draw: function() {
            /**
             * @param {number} width: 線の太さ
             * @param {string} color: 線の色
             */
            function createZawaPath(width, color) {
                ctx.lineWidth = width;
                ctx.strokeStyle = color;
                ctx.beginPath();
                ctx.lineCap = "round";
                ctx.lineJoin = "round";

                // ざ
                ctx.moveTo(10, 45);
                ctx.lineTo(50, 45);

                ctx.moveTo(25, 35);
                ctx.lineTo(50, 60);
                ctx.lineTo(20, 60);
                ctx.bezierCurveTo(5, 60, 5, 75, 20, 75);
                ctx.lineTo(50, 75);

                ctx.moveTo(38, 30);
                ctx.lineTo(38, 36);

                ctx.moveTo(46, 30);
                ctx.lineTo(46, 36);

                // わ
                ctx.moveTo(70, 35);
                ctx.lineTo(70, 75);

                ctx.moveTo(60, 45);
                ctx.lineTo(80, 45);
                ctx.lineTo(60, 75);
                ctx.bezierCurveTo(80, 25, 120, 70, 85, 75);

                // ・・・
                ctx.moveTo(110, 60);
                ctx.lineTo(115, 60);

                ctx.moveTo(125, 60);
                ctx.lineTo(130, 60);

                ctx.moveTo(140, 60);
                ctx.lineTo(145, 60);

                ctx.closePath();
                ctx.stroke();
            }

            /* 縁取と黒・白文字の条件分岐 */
            if (isBordering && isColorBlack) {
                createZawaPath(15, 'white');
                createZawaPath(6, 'black');
            }
            if (isBordering && !isColorBlack) {
                createZawaPath(15, 'black');
                createZawaPath(6, 'white');
            }
            if (!isBordering && isColorBlack) {
                createZawaPath(6, 'black');
            }
            if (!isBordering && !isColorBlack) {
                createZawaPath(6, 'white');
            }

        },
        render: function() {
            this.setStatus();
            this.draw();
            this.update();
        }
    };


    /**
     * ざわインスタンスの作成
     * @return zawas[instance, instance...];
     */
    function createZawas(num) {
        var i = 0;
        for (; i < num; i++) {
            zawas[zawas.length] = new ZawaZawa();
        }
    }

   /**
     * 描画
     */
    function render() {
        var i = 0;
        var l = zawas.length;
        ctx.setTransform(1,0,0,1,0,0);
        ctx.clearRect(0, 0, csWidth, csHeight);
        for (; i < l; i++) {
            zawas[i].render();
        }
        requestAnimationFrame(render);
    }

    /* 実行 */
    createZawas(zawaNum);
    render();
};

var cs = document.getElementById('myCanvas1');

/* args: canvasオブジェクト, ざわの数, 縁取りか, 黒文字か, 右から流すか */
zawaMaker(cs, 10, false, true, false);