UserFilter for canvas

先週ちょっとclのlocal-timeについて調べてたら素敵なfaviconを発見。
The Long, Painful History of Time
ちっちゃくて分かりにくいけど多分R=G=B = x xor yの模様。

むかーしPhotoshop(確かver.3の頃)のFilterFactoryで遊ばせてもらった事があってその時にビット演算という物を知り、以後C言語を知るまでビット演算は「何の役に立つのか良く分からないけど綺麗な模様が出るアレ」という認識でした。

そういやjs+canvasでそれっぽいの簡単に作れそうだな、って事でhtmlの勉強がてら作ってみた。
UserFilter for canvas DEMO
youz/ufjs · GitHub

GoogleChrome, Safari(win, iPod touch, iPad), Firefoxで動作確認。(ただしFirefox等ではスライドコントロールが普通のテキストボックスに)
式の仕様はGIMP UserFilter参照。

オリジナルと異なる点は

計算が整数ベースではない
けどsin, cosの返り値の範囲はオリジナルに合わせて-1024 〜 1024 (の浮動小数点数)
アニメーション (というか一定間隔でフィルタを掛け続ける機能)
追加の定数 PI (円周率), f, t (アニメーション用)
追加の関数 ceil, floor, log, exp, pow, rad2d, deg2d

既存のフィルタの式を使おうと思ったら小数への対応でめんどうになる事があるかもしれない。
ちなみにcanvas.getContext('2d').getImageData.dataに突っ込む画素値は整数でなくても良いようで、NaNとかInfinityは0や255になるし、数値以外のオブジェクトを突っ込もうとすると0になるみたい。

以下いくつかサンプル