barmamutha.net - パーティクル

Canvas パーティクル + shadowBlur

CanvasにはShadows、いわゆるドロップシャドウを付けるプロパティがある。

指定できるのは
・shadowColor （色）
・shadowOffsetX （横位置）
・shadowOffsetY （縦位置）
・shadowBlur （ぼかしのサイズ）
の4つ。

キャンパスに対して一律の指定しかできないので、
同一キャンパス内これは影付きでこっちは影無しとかはできない。
さらに処理負荷もかかる。

wonderfl fork第2弾。

canvas11
html（別ウインドウ）
マウスに追随するオブジェクトとパーティクルオブジェクトの
クラスはばっさりと簡略化した。

毎描画毎に表示オブジェクトを格納した配列を更新している。
この辺はaddChild/removeChildライクに出来るようなライブラリ作ったら
ActionScripterは幸せになれるかな。
visibleとかscaleとかをASライクに使える疑似Spriteクラスとか。

ちなみに今日は破の発売日らしいのでこんなのも作った。

h+=10;
var col='hsla('+h+',100%, 50%,1)';
context.strokeStyle  =col ;
if(h == 360){
	h = 0;
}

こんな感じ。

あー破が見てぇ。けどオレは劇場版BOXセット var.3Dが出るまで我慢するんだｗ

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

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

PerlinNoiseの描画

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

残像処理

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