SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ウェブの最新技術が魅せる「Firefoxの灯」

Canvas&Processing
~ ウェブの最新技術が魅せる「Firefoxの灯」(2)


  • X ポスト
  • このエントリーをはてなブックマークに追加

Processing & Flash

 以前は、灯のほとんどをFlashで実装していましたが、今回は主にSVGとCanvasを用いて実装しています。特に、灯のアニメーションを伴った描画についてはCanvasを優しく包むProcessing.jsで実装しています。本章では、ProcessingとFlashをプログラムの面から比較してみます。

フレームごとの描画:Processing編

 Processing.jsでもFlashでも、フレームごとに描画することが可能となっており、スムースなアニメーションが実現されます。それぞれ以下のように実装します(HTMLはJavaScriptの読み込み先をpf_1.jsに変更しただけなので割愛します)。

JavaScript: pf_1.js
$(document).ready(function(){
    //Processing でラップする Canvas を取得
    var canvas = document.getElementById("main_canvas");
    //Processing オブジェクトを作成し、初期化
    new Processing(canvas, Main.init); 
});

var Main = {
    init: function(processing) {
        //draw メソッドは、フレームごとに呼ばれる
        processing.draw = Main.draw;
        //フレームレートを 30 にする。(1秒を30コマで分割、1コマごとに draw を呼び出す)
        processing.frameRate(30);

        //draw の引数には processing インスタンスが渡されないので確保しておく
        Main.processing = processing;
    },
    
    draw: function() {
        //各フレーム、このメソッドが呼ばれる
    }
}
上記ソースコードを実装したサンプル

 このサンプルではフレームレートに30を設定しました。これは、1秒間を30コマで描画することを表し、各コマの描画にはdrawメソッドが呼ばれることになります。

簡単なアニメーションの実装:Processing編

 せっかくなので、アニメーションさせてみます(HTMLはJavaScriptの読み込み先をpf_2.jsに変更しただけなので割愛します)。

JavaScript: pf_2.js
//jQuery によるドキュメントの読み込みと Processing を new するところは同様なので中略

var CIRCLE_SIZE = 50;
var CIRCLE_HALF_SIZE = CIRCLE_SIZE/2;
var Main = {
    init: function(processing) {
        //Processing のキャンバスサイズを 400x400 にする
        processing.size(400, 400);
        //draw メソッドは、フレームごとに呼ばれる
        processing.draw = Main.draw;
        //フレームレートを 30 にする。(1秒を30コマで分割、1コマごとに draw を呼び出す)
        processing.frameRate(30);

        //draw の引数には processing インスタンスが渡されないので確保しておく
        Main.processing = processing;
        
        //現在の X 座標
        Main.current_x = Main.processing.width/2;
        //X方向のベクトル
        Main.vector_x = 10;
    },
    
    draw: function() {
        //このアニメーションは、左右に動く円が壁面に当たったら跳ね返るようにするもの。
        //以前の描画が残っているため、Canvas を綺麗にする。
        Main.background(0, 0);

        //現在の座標に、ベクトルを足す
        Main.current_x += Main.vector_x;
        if (0 > Main.current_x-CIRCLE_HALF_SIZE || Main.processing.width < Main.current_x+CIRCLE_HALF_SIZE) {
            //円の左端が 0 より小さいか、右端が描画領域より大きい場合は、ベクトルを逆にする
            Main.vector_x = -Main.vector_x;
        }
        //円を描く
        Main.processing.fill(0, 0, 255);
        Main.processing.ellipse(Main.current_x, 200, CIRCLE_SIZE, CIRCLE_SIZE);
    }
}
上記ソースコードを実装したサンプル

 アニメーションは時間をまたぐので、必要なデータは確保しておく必要があります。サンプルでは、Main.current_xに現在のX座標を、Main.vector_xに現在の進むべきベクトルを保持するようにしています。各コマでの描画ではまず、clearメソッドによって、Canvas内容をクリアしています。これを呼ばないと前回までの描画内容の上に重ねて描画するようになり、サンプルでは最終的に青い横棒のような絵になることが予想できます。Processingに関して特筆すべき点はこれぐらいで、後はアプリケーションの領域になります。

フレームごとの描画:Flash編

 Flashでは、onEnterFrameを用いてフレームごとに描画を行います。ソースだけ抜粋すると以下のようになります。

this.addEventListener(Event.ENTER_FRAME, draw);
function draw(e) {
    //フレームごとに呼ばれる
}
上記ソースコードを実装したサンプル

 このようにフレームが切り替わるごとに呼ばれるイベントonEnterFrameのイベントリスナを登録すれば良いわけです。フレームレートは、Flashドキュメントのプロパティで変更が可能です。

簡単なアニメーションの実装:Flash編

 同様のアニメーションを行ってみます。

this.addEventListener(Event.ENTER_FRAME, draw);

var CIRCLE_SIZE = 50;
var CIRCLE_HALF_SIZE = CIRCLE_SIZE/2;

//現在の X 座標
var current_x = 100;
//X方向のベクトル
var vector_x = 10;

function draw(e) {
    //描画のクリア
    this.graphics.clear();
    
    //現在の座標に、ベクトルを足す
    current_x += vector_x;
    if (0 > current_x-CIRCLE_HALF_SIZE || 400 < current_x+CIRCLE_HALF_SIZE) {
        //円の左端が 0 より小さいか、右端が描画領域より大きい場合は、ベクトルを逆にする
        vector_x = -vector_x;
    }

    //色
    this.graphics.beginFill(0x0000ff);
    //描画 ここでの指定は半径なので、半分に
    this.graphics.drawCircle(current_x, 200, CIRCLE_SIZE/2);
}
上記ソースコードを実装したサンプル

 これまで説明したように、ProcessingとFlashではそれぞれの方言はあるものの、基本的には同じような考えに沿ってコードを書くことができます。

次のページ
RequestAnimationFrameを使う

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ウェブの最新技術が魅せる「Firefoxの灯」連載記事一覧

もっと読む

この記事の著者

赤塚 大典(アカツカ ダイスケ)

1976年東京生まれ。都立航空工業高等専門学校を卒業後、4輪レーサーを目指すも断念。蕎麦屋、溶接屋を経てプログラマになる。プログラマとしては、京阪奈地区の研究所に7年従事し、その間、2003年IPA未踏ユース、2006年IPA未踏ソフトウェア創造事業に採択される。未踏において、Firefoxの拡張機...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Mozilla Japan(Mozilla Japan)

一般社団法人 Mozilla Japanhttp://mozilla.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6121 2011/09/06 13:16

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング