読者です 読者をやめる 読者になる 読者になる

Perfume × GitHub

http://www.perfume-global.com/

http://inajob.no-ip.org:10080/perfume/perfume.html

なんかよくわからないけどPerfumeのモーションデータを使っていいということなので、遊んでみました。
配られているモーションデータをJavaScriptでパースして、行列計算して座標を求めて HTML5Canvasの描画しました。

行列演算って苦手意識持ってたんだけど、やっぱり苦手だw。
完成したっ とおもったら不可解な動きをしていて、デバッグが非常に困難でした。でもちゃんと動いた時の感動は格別だね!
こういう小粒のプロジェクトというか、お遊びプログラムは 楽しいのでもっとやっていきたいなぁと思った。

モーションブラーは 半透明の四角形で塗りつぶすといい感じになりましたw。

更新!

http://inajob.no-ip.org:10080/perfume/perfume.html

せっかく動的に描画しているので、なにか面白いことをしようということで、顔部分にTwitterのアイコンを表示するようにしてみました!

なんか昔「天才テレビくん」でこんなのみたなw

ソースコードの解説書きました!

せっかくなので、何をやったか書いてみようってことで、こっちじゃなくて 開発中のCMSの上で書いてみました。

Perfume×Canvasを支える技術」
http://inajob.no-ip.org:10080/twlogin/data/5643382%3A%252Fprojects%252Fperfume%252Finside.html
コードレビューっぽくソースコードを逐一解説してみました。

荒削りなので妙なところあったら教えてください。