not good but great

プログラミング、アート、映画・本の感想について書きます。

CreateJSでパーティクルをアニメーションさせてオリンピックのロゴをつくってみた

demo


ソチ冬季オリンピックなんで何か作ってみようかと思いました。以前に下のサイトを見たことがあり、こういう感じで五輪を描画できないかなと思い、やってみることにしました。

Chrome Experiment #500

工夫したところ

RAFでアニメーションの高速化

cj.Ticker.timingMode = cj.Ticker.RAF;
cj.Ticker.addEventListener("tick",tick);

アニメーションにはRequestAnimationFlame(RAF)を使ったほうが良いので、それを自動更新のTickerに指定しました。デフォルトはsettimeoutになります。

・参考
FN1310002 | EaselJS 0.7.0のTickerクラスでrequestAnimationFrameのAPIを使う - Ticker.timingModeプロパティ | HTML5 : テクニカルノート

パーティクルが重なるところの描画

//重なったところの合成方法
this.compositeOperation = "darker";  

パーティクル同士が密集しているので、重なり合うことが多いです。どれをどのように描画するのかをcompositeOperationで定義しています。「darker」にすると重なったところは暗くなります。

・参考
JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト » 重なったEaselJSエレメントの合成方法まとめ

三角関数でゆらぎを演出

//回転の軌跡上を三角関数の軌跡を描く
    this.x = this.rotateCenterX + this.radius * Math.cos(this.angle / 360) * Math.cos(this.angle);
    this.y = this.rotateCenterY + this.radius * Math.sin(this.angle / 360) * Math.sin(this.angle);

円を描く式に三角関数をもう一度かけることによって、ゆらぎながら円周上を回ります。