---
# System prepended metadata

title: Physics 2D in program

---

# Physics 2D in program

- it can be used in?
    - games (most)
    - micro interactions
    - creative code.


- 遊戲/模擬物理與真實物理不同
    - 在兼顧效能與模擬細節的考量下，許多真實運算或需考量的部分會被**省略**。
    - simulate is the keypoint in programming
    - Newton's laws of motion (古典力學)

- physics tips
    - gravity (重力)
    - speed/velocity (速度)
    - accelerate (加速度)
    - friction (摩擦力)
    - *collision (碰撞)

- push item in ground
    - 第一運動定律
        - 靜止的物體會保持靜止狀態，除非有外力施加於這物體。
        - 運動中的物體不會改變其運動速度，除非有外力施加於這物體。注意到速度是向量，物體運動速度的大小與方向都不會改變。
    - 第二運動定律
        - f = ma
           - 外力(F)與加速度(a)成正比，而 m 為物體的質量
           - https://www.youtube.com/watch?v=WHEeGO9HVPc
    - speed ＆ friction
    - ios scroll effect
        - touchStart: record mouse currentY 
        - time interval 500ms to update mouse currentY
        - touchEnd: endY - startY (speed) 

- drop or rain 
    - gravity: 雨水降落的速度 (or 9.8)
    - collision: 雨水碰撞到地面
        - tricky: just check if rain/drop over than ground position

- collision detection
    - penetrate
        - if body1 speed is 100, body2 speed is 10
    - why collision so hard?
        - https://qwe321qwe321qwe321.github.io/2021/01/11/%E5%88%9D%E5%AD%B8%E9%81%8A%E6%88%B2%E7%89%A9%E7%90%86-%E7%B0%A1%E4%BB%8B/
        - https://davidhsu666.com/archives/gamecollisiondetection/
        - https://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169
        - https://www.youtube.com/watch?v=7_nKOET6zwI
        - Box2D CCD (Continue Collision Detection)

---

- physics engine
    - why Box2D
        - performance is best
        - can do more complex case.
    - matter.js (easy to use but prefomrance & limited)

- Box2d
    - Vector
    - World
    - Body (and BodyDef)
      - RigidBody 剛體
    - Shape
      - circle
      - polygon (rect)
      - chain shape (complex ground)
    - Fitxture
      - density (密度)
      - friction (摩擦力)
      - restitution (恢復係數)
    - Constraint (& collision)
      - rule of physics world
      - contact constraint
        - 防止剛體被穿透, 以及模擬摩擦和恢復係數
    - Joint (關節)
        - b2DisatnceJointDef
            - O-----O
        - b2RevoluteJointDef
           |
           |
           |
           O


- Vector
    - https://juejin.cn/post/6844903859689619469

- World
``` js
const gravity = new b2Vec2(0, 10);
const world = new b2World(gravity)
```

- Body(BodyDef) & Shape 
  - create BodyDef (tell the box2d i have a obejct)
      - init position
      - define type: dynamic / static / kinematic
  - create a body object (geometry)
  - create shape (attach shape to body)
  - create fixture

``` js
// define a body
const bd = new b2BodyDef();
bd.set_type(b2_dynamicBody);
bd.set_position(new b2Vec2(0, 0));

// create a body via world
const body = world.CreateBody(bd);

// create a shape
const circle = new b2CircleShape();
circle.set_m_radius(1);

// create a fixture
const fixture = body.CreateFixture(circle, 1);
fixture.SetFriction(200)

body.SetLinearVelocity(new b2Vec2(2, 0));
body.SetAwake(1);
body.SetEnabled(1);
```
     

- box 2d tutorials
  - https://www.youtube.com/watch?v=MsRROjQJxuo&list=PLRqwX-V7Uu6Zy4FyZtCHsZc_K0BrXzxfE
  - https://zhuanlan.zhihu.com/p/452417496
  - https://gwb.tencent.com/community/detail/107985
  - https://blog.csdn.net/piglite/article/details/72730105
  - http://www.ladeng6666.com/blog/?paged=5&cat=8

others
- https://www.zhihu.com/question/56669299
- https://www.youtube.com/watch?v=sf4gtlM0mYs
