CanvasでParticles(Sand)

「HTML5のcanvasで作る画像フィルター」は自分ならこう書く - by edvakf in hatenaとCanvasでローレンツアトラクタ - by edvakf in hatenaに刺激されてCanvasネタを1つ。といっても以前やったOperaのCanvasでParticles(Sand/Snow) - 0xFFの焼き直しです。

canvas sand (例によって劇重注意)

Chromeで見ると良い感じだと思います(ただし、Chromeは容赦なくマシンリソースを使うのでPCが不安定になるかも…)。一応、uupaa-excanvas.jsを読み込んでいますが、IEのcreateImageDataはサポートされていないので、動作しません。Operaでも動くはずなんですが、基本動かないっぽいです…。リロードしてるとたまに動きます。よくわからない…。ただのキャッシュ問題でした…

すごくベタな方法ですが、キラキラした感じを再現できたので結構満足しています。

拡大するとこんな感じになっていて、1pxの点を一瞬だけ(RGB値を2倍にしつつ)上下左右に伸張させることで、キラっとした感じを出しています。ネタ元も仕組みとして同じです。

余談:ネタ元のFlashはあんなに綺麗で、しかもそこまで重くない。それに比べてcanvasときたら…。HTML5で、Flashがなくなるって? ご冗談を。

ちょっとチューニングしたので、Firefoxでもそこそこ動くようになったような気がする。