Physics: Newton's Laws of motion
Tags: physics, simulation, javascript, webgl
Published: 2023-11-27 13:53:10

## Physics

1. Force of gravity = mass * gravity acceleration
2. Force of slide = force(gravity)*cos(plane angle)
3. Force of friction(opposite to slide) = friction coefficient *force(gravity) * sin(plane angle)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z78p0rqorgvpc8md8odd.png)

Additional force(custom push) from top of view:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek88zoiy84taqc74fptl.png)

```
//horizontal application(from top of view) of setted in ui the force
cube.force_x = force.magnitude*Math.cos(Math.PI*force.angle/180+Math.PI)*-1;
cube.force_result = cube.force_slide + cube.force_friction + cube.force_x; 
cube.acceleration_x = cube.force_result/ cube.mass; // from F = m*a
cube.init_velocity_x = 0; // set start point
    
//vertical(from top of view) application of setted in ui the force
cube.force_y = force.magnitude*Math.sin(Math.PI*force.angle/180);
cube.acceleration_y = cube.force_y/ cube.mass; // from F = m*a
cube.init_velocity_y = 0; // set start point
```
Start the simuluation by moving with the initial speed equal to zero, then with `Δd=V(init)*time + (1/2)*acceleration*time^2` move points to delta and increase the init speed through acceleration. 
The time is frame iteration, 1000/24, for example.

---

## Code
**Idea:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4n25trh9ddzvnmeemcn.png)
**Sketch of UI:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg7ufbkjogkcfhcutche.png)
**Real screenshot:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brscl4jcpt363e5f7q4j.png)
**Structure:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbim7gdpeyw23o70nxth.png)
- _objects_render_ is for buffers, program, shaders of WebGL
- _glmjs_ are helping files, glmjs library(matrix operations) and helper file, where code for rotate object, move by glmjs.
- _objects_logic_ files of plane, cube, time, force...

```
plane {
   vertices; //array positions, colors
   angle; //degree
   inclane(angle) {
      //inclane plane and cube
      cube.inclane()
   } 
}
cube {
   vertices;
   mass; //kg
   build_physics(); //calculate forces and accelerations 
   inclane(); //also
}
force {
   vertices; //vizualiation, blue line
   angle; //degree
   magnitude; //newton
   inclane();
}  
time {
   //some coefficients and iter of time
}
```
for example plane object:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mb3lz6b8vbzhvmh6atm.png)
As possible to see in the screenshot this simulation is using additional arrays for vertices, in example of the plane it is just a "backup" of original vertices, but for the cube: more easy just move cube in x,y(top of view),store this position and render it in another array with x,y + inclane... 

Tried to test with real physics(I mean in the room with paper and matches) looks the similar. Also I added acceleration coefficient for "slow motion" because all happening so fast. But it is my philosophy interpretations... 

Code here:
[https://github.com/fakelaboratory/publish/tree/main/Newton's%20laws%20of%20motion](https://github.com/fakelaboratory/publish/tree/main/Newton's%20laws%20of%20motion)
Test through browser:
[https://fakelaboratory.github.io/publish/Newton's laws of motion/](https://fakelaboratory.github.io/publish/Newton's laws of motion/)