CanvasでLiquid10000

さて、Canvasでどこまでの事が出来るのか。
ます手始めにLiquid10000をforkして
Canvasの描画性能を見てみようかと思う。

html（別ウインドウ）

10000はさすがにムリがあるが1000程度ならまぁ何とか。
オリジナル版との違いは大きく以下の通り。

PerlinNoiseの描画

• オリジナル版
  ノイズ用のビットマップをperlinNoiseで生成。
• Canvas版
  予め外部ファイルを用意。

ビットマップからRとGの値を抽出しxy軸の加速度に変換

• オリジナル版
  getPixelでRとGの値を抽出しxy軸の加速度に変換する。
• Canvas版
  外部ファイルの色情報をgetImageDataで配列化。

残像処理

• オリジナル版
  ColorTransformで着色しながら暗くする。
• Canvas版
  全領域に半透明(alpha0.1)の黒を重ね塗りする。

やってみてわかったがCanvasのアニメーションはwonderflのパーティクル系と
非常に相性が良い。
というより、他に向いていないというべきか。

参考
http://wonderfl.net/c/4yyT