Node学園祭2012でLTしてきた資料です。 @nazomikan

1. NUDE KNOCK OUT
@nazomikan
Node
学園祭
2012
12年11月18日日曜日

2. ABOUT ME
twitter: @nazomikan
github: nazomikan
mail: nazomikan@gmail.com
site: http://nazomikan.com
普段はjsだったりrubyだったりかいてます
※コンプライアンスに抵触する恐れがあるので会社名は控えてます。
12年11月18日日曜日

3. 今日のお話
この間のnode knockoutにいってきた話
12年11月18日日曜日

4. 男4人でおっぱいをつくってきました
12年11月18日日曜日

5. おっぱいをつくってきました
12年11月18日日曜日

6. おっぱいをつくってきました
12年11月18日日曜日

7. 大事なことなので３回
RY
12年11月18日日曜日

8. NODE KNOCKOUT 一ヶ月前
12年11月18日日曜日

9. 一人の天才を補足
12年11月18日日曜日

10. 世紀性器の大発見
12年11月18日日曜日

11. というわけで作ってきました
12年11月18日日曜日

12. DEMO
Double Mountain
http://kusattamikan.nko3.jitsu.com/
※JITSUが落ちるの怖いのでデモはlocalhostでやります
12年11月18日日曜日

13. おっぱいの描画
@nazomikan
12年11月18日日曜日

14. おっぱいの描画
webGL(lib: Three.js)を使用
おっぱい方程式
(-2.5 < x < 2.5) (-2.5 < y < 3)
の範囲で感覚0.02ごとにプロットして面を作る
(簡単に見えるけど結構苦戦)
y
x
12年11月18日日曜日

15. 音声の共有
合成の音声生成ツール OpenJtalk(♀)にセクシーな言葉を
与えて音源を作成 → HTML5 Audio APIで再生
おっぱいがクリックされたことをカメラの向きベクトル
とおっぱいを構成してる面の法線ベクトルの衝突で感知
し、Socket.ioを通じて他画面にブロードキャスト
@yokoyahhman
12年11月18日日曜日

16. 後は感度にあわせて再生
それにしても実装者はノリノリである
12年11月18日日曜日

17. ミルクビームの作成
Three.jsで無数のパーティクルを順序よく作成し、まるで
ミルクビームに重力がかかっているかのようにしたたり
落ちるアニメーションを作成
@to_muu_mas
12年11月18日日曜日

18. ミルクビームの共有
クリックの共有にフックさせて規定感度になった時に発射
12年11月18日日曜日

19. カメラアングルの共有
われわれの中では他者のカメラアングルのことを
おっぱいハンターと呼んでいる
Three.jsが提供するカメラ座標をsocket.ioでブロードキャストし
て共有
@kuwabarahiroshi
12年11月18日日曜日

20. カメラアングルの共有
実装者は超ノリノリ
12年11月18日日曜日

21. そして審判の時
12年11月18日日曜日

22. 評判は概ね良好・・・
12年11月18日日曜日

23. ばかりでもなく・・・
12年11月18日日曜日

24. 海外の辛口おっぱいマイスター
達から激辛のコメントが相次ぐ
12年11月18日日曜日

25. あぁ、わかってるさ、お前たち
のいいたいことくらい・・・
12年11月18日日曜日

26. 揉めないおっぱいには何の価
値もないっていいたいんだろ
う！！！
12年11月18日日曜日

27. そんな時一人の研究員がある資料を発見
12年11月18日日曜日

28. 面を構成する点の座標をばねのよう
に遷移させれば面も波うってみえ
る！！
参考
http://www.netmagazine.com/tutorials/create-interactive-liquid-metal-ball-webgl
12年11月18日日曜日

29. LET’S PLUNE PLUNE
DEMO
12年11月18日日曜日

30. おっぱいがふきとんじゃったのでここでおしまい。
ごせいちょうありがとうございました！！
@nazomikan
@yokoyahhman
@to_muu_mas
@kuwabarahiroshi
12年11月18日日曜日