さて、第1回目で作ったサインカーブのパスをクラス化してみました。
Canvas クラスに Path クラスのインスタンスを登録することで描画されるようにしてみました。
また、ループで直接関数を呼ばず、 tick イベントの監視によるイベントドリブンな感じにしてみました。
ソースはこちら
試作後記
まぁそこそこ整理できたかなって感じで、このあたりまでくればカスタマイズで実戦にも使えそうな感じです。
ちょっと残念なのは、
- 一部 jQuery に依存している
- 一部 underscore.js に依存している
- WavePath クラスの実装が不十分
ってとこでしょうか。
WavePath クラスについては、もっとシンプルなクラスを作って継承とかもできそうな感じがします。
とりあえず、基本的な描画とアニメーションする機構ができたので、次回はパーティクルでも試作してみようかな。