Ohotech 特盛 #11で発表したもの 別途資料： http://box2dweb-doc.rtfd.org

1. Box2DWebを触ってみよう

2. Box2DWebを触ってみよう
とにかく動くものを！

3. 自己紹介

4. 自己紹介
Twitter: @tututen
PythonとかC言語を主に使用
CodeJP 2014でショートコーディ
ングの出題しました

5. http://jsfiddle.net/29o6bwe7/7/

6. python -c "exec('try:import SimpleHTTPServer as m
nexcept:import http.server as
m');m.test(HandlerClass=m.SimpleHTTPRequestHandler)"
https://github.com/jsakamoto/MarkdownPresenter

7. Box2DWebとは

8. Box2DWebとは
JavaScriptで動く物理演算ライブラリ
ActionScriptのBox2DFlash 2.1a のコードを
JavaScriptで書きなおしたもの
2011年6月以降更新が滞ってる

9. 準備
http://box2dweb-doc.rtfd.org
ここのページの「準備」→「スケルトンコード」をコ
ピペしましょう

12. index.htmlを見てみよう

13. 何も出ません！

14. 初期化を書こう

15. Worldの初期化

16. 800px
600px

17. 800px 約27px
600px
20px

18. 800px 約27px
600px 約9.8px/s^2
20px

19. debug表示の設定

20. 床の設置

21. Body
Fixture
Shape

22. Body
Body.b2_staticBody
Body.b2_dynamicBody

23. Fixture
density(密度)
friction(摩擦係数)
restitution(反発係数)

24. Shape
b2.PolygonShape
b2.CircleShape

25. run関数

26. init関数

27. Demo

28. Demo
うっすら緑の板

29. オブジェクトを置こう
（円形編）

30. 円形オブジェクト作成

31. r
(x, y)
dynamicBody
Circle

32. 円形オブジェクト設置

33. Demo

34. オブジェクトを置こう
（長方形編）

35. 長方形オブジェクト作成

36. w
(x, y)
dynamicBody
Polygon
h

37. 長方形オブジェクト設置

38. Demo

39. イベント駆動で
オブジェクト配置

40. HTMLにボタン設置

41. Random関数

42. 「円形」ボタンイベント追加

43. 「四角形」ボタンイベント追加

44. 出現イメージ
x座標：Random

45. イベント駆動で
オブジェクト削除

46. HTMLにボタン設置

47. リセット関数

48. Body
World
Body
Body
…
Body
Body
Body

49. Body
World
Body
Body
Body
Body
Body
Delete
…
Delete
Delete

50. Body
World
Body
Body
Delete
…
Delete
Delete

51. オブジェクトに
画像をはりつける

52. 適当な画像準備

53. ディレクトリ構造

54. 画像読み込み

55. UserDataの使用

56. 動的オブジェクトの座標取得

57. SlideX
SlideY
Canvasの原点に動かす

58. Canvasの原点に動かす

59. Canvasを回す

60. Image描画（座標は左上）

61. Canvasを元の角度に戻す

62. SlideX
SlideY
Canvasを元の位置に戻す

63. ハンズオンは
以上となります

64. 投げ銭は
＋Node.jsで動いてます

65. 投げ銭のPRを
お待ちしております！

66. 対戦しましょ？

67. 対ご戦し静まし聴ょ？
ありがとう
ございました
Presented By momo_*(@tututen)