HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog

HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」で流体パーティクルのデモを作ってみました。 demo source EaselJSを使えばFlashのようにHTML5 Canvasを使うことができるので、ActionScriptから概念だけではなくコードの再利用性が高まります。今回は流体パーティクルの表現を通して、EaselJSとCanvasのテクニックを紹介していきます。 デモの作り方 冒頭のデモですが、私が以前作成したFlashの作品「Flashの高速化を試す、BitmapDataを配列に格納することで2〜3倍の高速化」から移植したものです。 さて、このデモをHTML5 Canvasに展開するにあたり、特に抑えておきたいのは次の点だと思いました。 フォースマップの作成 パーティクル情報を付与した表示クラスの作成 フォースマップ

[ProjectNya]

1000個いかないのか。しょぼーん

[a-24]

画像から加速度を割り出す手法、丁寧な解説で分かりやすい

[naga_sawa]

カラーマップをフォースマップに使ったパーティクルアニメーションの作成

[msh514]

canvas flash

[itsuki_kosen]

フォースマップを使ったテクニック．js版

[lanius]

流体パーティクル、フォースマップ。

[wasai]

ヌルヌル動いてるな

[teppeis]

フォースマップ

[hayakawatomoaki]

きもわる

[iR3]

良い記事♪

[hiroshi_revolution]

HTML5 Canvasを始めよう：EaselJSを使った流体パーティクル入門 | ClockMaker Blog

[yasu-log]

ブログを書きました - HTML5 Canvasを始めよう：EaselJSを使った流体パーティクルの入門