JSおじさん #3 コードレビューおじさん「美少女演出にキク！OoOO.js」

1. 美少女演出にキク！
OoOO.js

2. about me
dameleon
(自称)Application Engineer
twitter: @damele0n
!
2013～: 渋谷
～2012: 面白法人KAYAC

3. agenda
• 美少女演出にキク！OoOO.js
• OoOO.js実装アレコレ

4. 美少女演出にキク！OoOO.js
• #2「JavaScriptでおっぱいを動かす」
tech.kayac.com Advent Calendar 2012
• #16 Leap Motionでおっぱいを揉む
tech.kayac.com Advent Calendar 2013
• 今回→http://dameleon.github.io/oppai.js/
sample.html

5. OoOO.js実装アレコレ
https://github.com/dameleon/oppai.js

6. OoOO.js実装アレコレ

7. OoOO.js実装アレコレ
• Oppai
• メインクラス
• エントリーポイント, 演出アニメーションメソッド, イベントハンドリング
• Breast
• 1乳あたりの制御をおこなうクラス
• AABB(Axis Aligned Bounding Box), メッシュ生成, テクスチャレンダリング, 描画
• RenderBufferHandler
• Breastの描画サポートクラス
• ソースキャンバス, バッファリングキャンバスのハンドリング
• Animation
• アニメーションの制御クラス
• アニメーション, イージングの制御
• MotionHandler
• モバイル端末の動きの制御クラス
• devicemotionイベントと値の制御

8. OoOO.js実装アレコレ
実演
• http://dameleon.github.io/oppai.js/sample.html

9. OoOO.js実装アレコレ
main canvas buffer canvas
• image source canvas
• buffer canvas x 2
描画が終わったものを
main canvasへ転写

10. OoOO.js実装アレコレ
頂点と周囲の座標から大きなトライアングルをとり、
設定乳解像度の値(標準は2)で分割して細かいトライアングルを生成
(ほかドロネー図などのアルゴリズムもあるが今回は見送り)
!
各点毎に調整値を設定し、自然な動き(?)に近づけるように

11. OoOO.js実装アレコレ
デバッグ実演
• http://dameleon.github.io/oppai.js/sample_debug.html

12. おわり