How to create basic physic effects in JavaScript game: gravity, collisions, friction, restitution, impulse, compound objects and their destruction. Examples: http://pavel-klimiankou.github.io/physics-talk/ Sources: http://github.com/pavel-klimiankou/physics-talk

1. GAME PHYSICS
IN
JAVASCRIPT

2. WHAT’S THE PLAN
• 2D: PhysicsJS, p2.js
• Main components
• Forces and interaction
• Compound objects and constraints
• Explosions and destruction

3. MAIN COMPONENTS
• World
• Bodies
• Interaction rules/behaviors
• Renderer
• tick()

4. WORLD, BODIES

5. RENDERER

6. RENDERER IN
P2.JS & PHYSICS
• p2.js – none
• PhysicsJS – embedded, extensible

7. HELLO “WORLD”

8. HELLO “RENDERER”

9. DEMO: HELLO WORLD

10. FORCES AND INTERACTION
• Gravitation
• Impulse
• Collision
• Friction
• Restitution

11. GRAVITATION

12. GRAVITATION IN
P2.JS & PHYSICS.JS

13. COLLISION

14. COLLISIONS IN
P2.JS & PHYSICS.JS
p2.js – comes for free
PhysicsJS – needs to be enabled

15. DEMO: COLLISION

16. DEMO: COLLISION
WHAT’S INSIDE

17. FRICTION

18. DEMO: FRICTION

19. DEMO: FRICTION
WHAT’S INSIDE

20. RESTITUTION

21. DEMO: RESTITUTION

22. DEMO: RESTITUTION
WHAT’S INSIDE
relaxationstiffness

23. IMPULSE

24. DEMO: EXPLOSION

25. DEMO: EXPLOSION
WHAT’S INSIDE

26. DEMO: CANNON

27. JOINTS AND
CONSTRAINTS
Lock
Gear
Distance/Prismatic
Revolute

28. JOINTS/CONSTRAINTS IN
P2.JS & PHYSICS.JS
physics.js – NONE!
p2.js: all mentioned; destroyable

29. DEMO:
DISTANCE CONSTRAINT

30. DISTANCE CONSTRAINT.
WHAT’S INSIDE

31. DEMO: VEHICLE

32. DEMO: VEHICLE
WHAT’S INSIDE

33. VEHICLE: WHAT ELSE’S INSIDE
pivot points
+
2 constraints

34. …AND ONE MORE VEHICLE.
YIPPEE!

35. DEMO: CANNON WITH
CONSTRAINTS DESTRUCTION

36. CONSTRAINTS DESTRUCTION.
WHAT’S INSIDE

37. THANK YOU!
QUESTIONS?
About me:
/pasha.klimenkov
Examples:
/ /pavel-klimiankou/physics-talk.git