今更canvas使った描画やってみた

昔から画面に描画する系の事をやってみたかったので、ちょうど良かったからcanvas使って色々書いてみたよ。

hello world

その１

ハートのドット絵を根性で描いてみた。それを１コマ１コマ横と縦にずらしてアニメーションさせてる。
アニメーションさせるときは、setIntervalとか使うコードを良く見たけど、あとで出てくる最適化の話の通り、requestAnimationFrameと使ってみてる。

その２

それを画像として書きだして表示してみた。次に続く。

その３

画像をくるっと回してぴよんっと止めてみた。なんで画像かというと、Rectで矩形描いてきっちり並べたハートをそのまま回そうとしたら、斜めになった時隙間が空いちゃって、キレイなハートじゃなくなってしまったから。
後はプリレンダリング的な最適化処理にもなって良いらしい。

その４

回したり縮小〜拡大してみた！
回すのは画像座標の左上からぐるぐる回ってしまうので、座標を毎回中心で回るようにずらす必要がある。詳しくはソースコードを見てみてください！なるほどって感じ。

arcを使ったartっぽい描画やってみた

tumblrで似たようなGIFアニメ見つけて、試しに作ってみたら結構それっぽく動いた！jsdo.itのhot codeとかにもあがってちょっと嬉しかったよ(*´ω｀*)



ただまぁすごく重かったわけです。描画中はしばらく見てるとPCのファンが回りだしてしまったり、iPhoneとかで見るとホッカイロとして活用できるようになります。

で、HTML5 canvas のパフォーマンスの改善という記事を見つけ、これを見ながら頑張ってパフォーマンス改善してみました…！！

改善その１

まぁつまりは動かない背景までアニメ書いてたら大変てのと同じで、動いてない背景まで毎回書き出してたわけです。
それをcanvasタグを２つおいて、position: absoluteで重ねる事でcanvasのレイヤー化をやってみました。



これだけでかなりパフォーマンスは改善したのですが、まだなんか出来そう。
そして次です。

改善その２

次は、描画する指定座標に浮動小数点を使うを重くなるっていうのを直してみました。
ぐるぐる回る点は、単純にMath.cos, Math.sinで指定した座標なのでお構いなしに浮動小数点を使いまくっています。
なので、座標指定するところを

(浮動小数点座標 + 0.5) | 0

というビット演算を使って丸めてみました。あとから仕組みを調べたら頭の良い人は世の中に沢山いるんだなぁという感じでした。恩恵に預かります。。

で、直したのがこれ。



小数点を丸めちゃったらなんかガクガクしちゃったりしないかなーと思ったのですが、人間はそんなに目が良くなかったみたいで見た目も問題ありませんでした。
そして全然ファンが唸らないｗｗ

まとめ

色々描画すんのめっちゃたのしい！

最適化とかも、このあとしばらくやってみていて、教えてもらったLUTみたいな前処理をいれてみたり(ブラウザ落ちたｗ)、var sin = Math.sinみたいに参照が軽くなるみたいな細かい事をやってみたりしていました。

今回、円弧を描くようなアニメーションをさせるときに、sin, cosとかθとか数学でやったわーっていうのを久々に思い出して、それを扱えてるのがなんだか楽しかったです。

最近おすすめされたBeyond InteractionっていうOpenFrameworksの本を読んでるんですが、canvasではないが、これには図形の描き方の初歩から書いてあるので結構勉強になる。

何を目指してるんじゃｗｗって感じですが、まぁ現状は趣味程度に色々作って遊んでみますね＾＾