bonsai.jsで遊びました。

Bonsai.jsってやつがHackerNewsに出てて、ちょっと気になったのでどんなものか確認するため使ってみました。

Bonsai.jsはCanvasやSVGなんかをラップして、ブラウザへの描画を簡単に出来るらしいです。
また、イベントを拾ってインタラクティブなことも出来るっぽい。

Bonsai.js

• 公式サイト
• http://bonsaijs.org/
• 分かりやすげな紹介スライド
• http://docs.bonsaijs.org/slides/webtechcon2012/#/
• よくできてるので、コレ読めばこのブログエントリ読まなくて良い。

• 以下のような特徴があるらしい
• SVGをラップしてお絵かき
• 動きのあるコンテンツが作れる(Path Morphingとかアニメーション)
• WebWorkerによる並列化
• RunnerとRendererの分離

How To Use

使い方には幾つかのパターンがある。

• ローカルにライブラリを置く
• 僕はこの方法で遊びました。
• 「DOWNLOAD BONSAI JS」を叩いてgithubへ
• ダウンロード、あとは普通に読み込んで使う

• ライブラリを外から読み込む
• ここに最新のbonsai.jsが落ちているらしい。
• これを読み込んでも良いらしい。

• PlayGround
• ここに手軽に試せるプレイグラウンドがある。
• 試用ならコレで充分だったなー。

Functions

• 基本
• bonsai.run()
• Runnerを生成する。
• 描画を行うHTML要素(=stage)とランナーの処理を渡す
• RunnerはWebWorkerで非同期実行される
• Rect(), Circle()など
• 図形オブジェクトの生成
• 単純図形だけでなく、ビットマップとかムービーのオブジェクト作る関数も
• これらはRunnerの中で作る
• 大体こんな感じ。

• アニメーション
• 色とか位置とか変えられる。時間と変更パラメータ
• なんかSVGのアニメーションの生っぽい指定
• 大体こんな感じ。

• イベント
• イベントを拾える。
• クリックとかホバーとか
• だいたいこんな感じ。

• メッセージ
• runnerは非同期実行されている
• runnerに外から動きを伝える手段

Exsamples

• 公式サンプル
• http://demos.bonsaijs.org/
• 不親切な事にソース付いてない
• HTMLの中を見ればあるけど
• Runnerを複数使うようなものは無いっぽい
• Runnerを幾つかに分けるのがbonsai流かなと思ってたんだけれど。
• 特にオモシロイとおもうヤツ
• Pi Chart
• Pong

At last

• bonsai.jsはより汎用的なenchant.jsちっくな何か。
• 特段目新しくは無いが、まぁSVG要素をそのまま触るよりは楽。
• 動きのある図形ツールをサクサク作るなら楽しそう。
• 不正入力してもなにも吐かなかったり中で死ぬのでデバッグの苦しみはありそう。