WebDesign Dackel

CreateJSでぶわぁ〜ってなるやつを作ってみた

CreateJSでぶわぁ〜ってなるやつを作ってみた

Hatena0
Google+0
Pocket0
Feedly0

乗り遅れた感がありますが、ちょっと前にCreateJSを始めて触ってみました。

学生の頃にFlashが好きで、デザインの授業をサボってFlashばっかりやっていた時期がありました。動くものが好きみたいです。笑
CreateJSといえばFlashのように手軽に使える事が特徴ですよね。
まだまだ、触りたてで容量がよくわからないところが多いのですが、せっかくなのでFlashで作ったことのあるものをCreateJSを使って書きなおしてみました。

DEMO (Chrome,Safari推奨)

カラフルな球体がぶわぁ〜っとなります。この動きはブラウン運動というものだそうです。
Flashで作った時に以下のブログを参考(丸パクリ)に作ったものです。
とても参考になる記事、ありがとうございます。勉強になります。

ブラウン運動 | とんぶろ

で、今回使用したコードは以下です。
ごちゃごちゃとしないように必要最低限に絞って載せています。

まずはHTML。

index.html

<!doctype html>
<html lang=”ja”>
    <head>
    <meta charset=”UTF-8″>
    <title>WebDesign Dackel | Brownian motion</title>
    <link rel=”stylesheet” type=”text/css” href=”css/style.css”>
    <script src=”http://code.createjs.com/createjs-2013.05.14.min.js” type=”text/javascript”></script>
    <script type=”text/javascript” src=”js/jquery.js”></script>
    <script type=”text/javascript” src=”js/apps.js”></script>
</head>
<body>

    <div id=”container”>
    <div id=”canvasWrapper”>
    <canvas id=”StageCanvas” width=”700″ height=”600″></canvas>
    </div>
    </div>

</body>
</html>

次にJS。一応jQueryを読み込んでおきます。

apps.js

/*          jQuery "Resized" events.
--------------------------------------------------------*/
;(function($){
    var default_delay = 300,
    timer = false;
    $.fn.resized = function(callback, delay){
        delay = delay && delay != "undefined" ? delay : default_delay;
        this.on("resize",function(e){
            if(timer) clearInterval(timer);
            timer = setTimeout(function(){
                if(callback) callback(e);
            }, delay);
        });
        return this;
    }
}(jQuery));


/*          Application Code.
--------------------------------------------------------*/
$(function(){

    var cj = createjs,
            stageName = "StageCanvas",
            $stage = $("#"+stageName),
            stage,
            canvas = $stage.get(0),
            sw = $(window).width(),
            sh = $(window).height();

    var total = 2000,//ドットの総数
            f = 0.9,//抵抗
            max_r = 10,//初期配置の円半径
            dx = 1.3,//ドットの最大移動量
            size = 1,//ドットのサイズ
            list = [],
            i,
            dot,
            r,
            angle;

    // 初期化処理
    function Init(){
        setStageSize( $stage );
        stage = new cj.Stage(stageName);

        // リサイズ
        $(window).resized(onResizeHandler, 200);

        // パーティクルの配置
        for( i = 0; i < total; i++ ){
            dot = createDot( Math.random() * 0xFFFFFF );
            r = Math.sqrt( Math.random() ) * max_r;
            angle = Math.random() * ( 2 * Math.PI );
            dot.x = sw / 2 + Math.cos( angle ) * r;
            dot.y = sh / 2 + Math.sin( angle ) * r;
            list[i] = dot;
            stage.addChild(dot);
        }

        // onEnterFrame的な
        cj.Ticker.setFPS(60);
        cj.Ticker.addEventListener("tick", onTickHandler);

    }

    // パーティクルの生成(引数には16進数のカラーを指定)
    function createDot( color ){
        var dot = new cj.Shape();
        dot.vx = 0;
        dot.vy = 0;
        dot.graphics.beginFill("#"+Math.floor(color).toString(16)).drawCircle(0,0,size);
        return dot;
    }

    // onEnterFrame的な
    function onTickHandler(e){

        for( i = 0; i < total; i++ ){
            dot = list[i];
            dot.vx += Math.random() * dx * 2 - dx;
            dot.vy += Math.random() * dx * 2 - dx;
            dot.vx *= f;
            dot.vy *= f;

            dot.x += dot.vx;
            dot.y += dot.vy;

            if( dot.x < 0 ){
                dot.x = sw;
            } else if ( dot.x > sw ) {
                dot.x = 0;
            }
            if( dot.y < 0 ){
                dot.y = sh;
            } else if( dot.y > sh ) {
                dot.y = 0;
            }
        }

        // ステージを更新
        stage.update();

    }

    // リサイズ
    function onResizeHandler(e){
        setStageSize( $stage );
    }

    // Canvasのサイズを調整
    function setStageSize( stage ){
        sw = $(window).width();
        sh = $(window).height();
        stage.attr("width",sw);
        stage.attr("height",sh);
    }

    // ランダムな整数値を生成
    function rand(min, max){
        return Math.floor(Math.random()*(max-min+1))+min;
    }

    // window addEventListener
    $(window).bind("load",function(){
        Init();
    });

});

CSSは適当に指定しておきます。

ざっとですが、コードの説明です。(CreateJSの読み込みなどは省きます)

1.まずCreateJSで使用するステージを初期化する

Init()の中で、CreateJSでステージを作成してstage変数に代入します。
stageNameには、HTMLにあるcanvasタグのID名が入っています。(サンプルではStageCanvas)

stage = new cj.Stage(stageName);

初期化処理をするInit()関数は、windowのロードが完了したら呼び出します。

$(window).bind("load",function(){
    Init();
});

2.リサイズイベントを定義して、ステージのサイズを画面一杯に可変させる(要らない場合は飛ばす)

canvasはCSSでwidthを指定しても100%表示が出来ないのでJSで操作します。

function setStageSize( stage ){
    sw = $(window).width();
    sh = $(window).height();
    stage.attr("width",sw);
    stage.attr("height",sh);
}

3.パーティクルのオブジェクトを配置

Init()の中で、ランダムに作成したshapeを配置していきます。
この時、後でオブジェクトが操作しやすいように、配列に入れておいています。
このShapeがとてもFlashっぽくてなんだか懐かしく感じました。笑
ちょっと前の事ですが…。

// パーティクルの配置
for( i = 0; i < total; i++ ){
    dot = createDot( Math.random() * 0xFFFFFF );
    r = Math.sqrt( Math.random() ) * max_r;
    angle = Math.random() * ( 2 * Math.PI );
    dot.x = sw / 2 + Math.cos( angle ) * r;
    dot.y = sh / 2 + Math.sin( angle ) * r;
    list[i] = dot;
    stage.addChild(dot);
}
…
// パーティクルの生成(引数には16進数のカラーを指定)
function createDot( color ){
    var dot = new cj.Shape();
    dot.vx = 0;
    dot.vy = 0;
    dot.graphics.beginFill("#"+Math.floor(color).toString(16)).drawCircle(0,0,size);
    return dot;
}

4.Tickerを設定してオブジェクトを動かす

FlashでいうonEnterFrame的なやつです。あんまり詳しくはわかりません。笑
このTickerを使って、実際に動かしている関数onTickHandlerを呼び出します。

cj.Ticker.setFPS(60);
cj.Ticker.addEventListener("tick", onTickHandler);

5.ステージを更新して描画を反映

onTickHandler()の最後で、ステージを再描画させています。
これを忘れてしまうと何も表示されません。

stage.update();

apps.jsの上の方で定義しているコメントの付いた変数をいじるとオブジェクトが移動する際の抵抗や、パーティクルの数などが変わりますので、いい感じな動きを試して見て下さい。
以上、ざっとですがCreateJSを使ってぶわぁ〜っとなるやつ(ブラウン運動)の作り方でした。

(関係無いけど、インデントが消えてしまってコードがみづらいぃ〜)