Canvas Library (Effect & Animetion) の構造を一新

Canvas Library (Effect & Animetion) *1をバージョンアップしました。

Canvas Library (Effect & Animetion) とは?

HTML5canvas にエフェクトをかけるライブラリです。
まだ数は少ないですが、結構きれいなエフェクトがかかります!
ぜひ、下記のページからサンプルをご覧ください。


Ver0.2の変化点

  • 名称変更(egg -> Canvas Library (Effect & Animetion))
  • 設計を一新 (エフェクトとアニメーションに分割)
  • アニメーションのパラメータをストラテジーに変更
  • 粒子の挙動に「回転(Spin)」を追加
  • モザイクエフェクトを削除

ダウンロードとサンプルは こちら(Canvas Library (Effect & Animetion)) からどうぞ!

今回の修正で、だいぶ構造を変えました。

処理の分割

いままでは、キャンバスへの描画と、それを連続して行う処理が一体化していました。でも、この二つを分離すれば「描画だけ(静止画にエフェクトをかける)」ということ*2もできるようになると考えました。
そこで、設計を根本から見直して、描画を行う「エフェクト」ライブラリと、それを連続して行う「アニメーション」ライブラリに分割しました。
ファイルは1つのまままですが、いずれ分割する予定です。

パラメータのストラテジー

いままでは、たとえば「特定の動きをする粒子エフェクト」を用意していました。これだと、さらにパラメータが複数になったときに組み合わせがすごい増えてしまうという問題がありました。
そこで、今回のバージョンアップによって「粒子エフェクト+各種関数」というストラテジーの組み合わせで動くようにしました。
これにより、今までより柔軟な設定(例えば、粒子の回転移動+スケール変更)を可能にしました。

でも、まだ複雑です。

だいぶ設計を見直して、分かりやすく、使いやすくなったんですが、いかんせん自分の JavaScript の知識が不足しているので、いまいちなところが残っています。
というか、JavaScript のライブラリを「使った」ことはあっても「設計」をしたことはないので、どう書けばいいのかがちんぷんかんぷんです。


というわけで、現在 JavaScriptパターン(O'Reilly本) を勉強中。
これを読んで、もう一度設計を変更する予定です*3

*1:旧名は「egg」。分かりやすい方がいいかなってことで、単純な名前に変更しました。

*2:Photoshopのフィルタみたいなこと

*3:すでに半分読んだんですが、もう書き直したくなりましたw