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

about medameleon

(自称)Application Engineer

twitter: @damele0n!

2013～: 渋谷

～2012: 面白法人KAYAC

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

• OoOO.js実装アレコレ

美少女演出にキク！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

OoOO.js実装アレコレ

https://github.com/dameleon/oppai.js

OoOO.js実装アレコレ

OoOO.js実装アレコレ• Oppai

• メインクラス

• エントリーポイント, 演出アニメーションメソッド, イベントハンドリング

• Breast • 1乳あたりの制御をおこなうクラス

• AABB(Axis Aligned Bounding Box), メッシュ生成, テクスチャレンダリング, 描画

• RenderBufferHandler • Breastの描画サポートクラス

• ソースキャンバス, バッファリングキャンバスのハンドリング

• Animation • アニメーションの制御クラス

• アニメーション, イージングの制御

• MotionHandler • モバイル端末の動きの制御クラス

• devicemotionイベントと値の制御

OoOO.js実装アレコレ

実演

• http://dameleon.github.io/oppai.js/sample.html

OoOO.js実装アレコレmain canvas buffer canvas

描画が終わったものを main canvasへ転写

• image source canvas • buffer canvas x 2

OoOO.js実装アレコレ

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

OoOO.js実装アレコレ

デバッグ実演

• http://dameleon.github.io/oppai.js/sample_debug.html

おわり