Perfume × GitHub

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

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

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

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

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

更新！

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

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

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

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

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

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

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