Recently, the recommendation system of a video hosting site suggested me to watch a video of several cubes colliding. It appeared to be an intriguing concept. After viewing the video, I was inspired to create a simulation of that process and explain its underlying principles.
There are numerous reasons why this project is relevant, as well as a wide range of potential applications. The following will outline the primary reasons and applications:
- It can be used in the educational process. For instance, it can be used to illustrate some principles of mechanics to students and to visualize some physics problems.
Firstly, it is essential to comprehend how the velocity of the body after collision is calculated. We will solve the problem in the elastic collision model (one-dimensional Newtonian).
Consider two bodies, designated as bodies `1` and `2`, with respective masses $m_1$ and $m_2$. Before the collision, the velocities of bodies 1 and 2 are $v_1$ and $v_2$, respectively. After the collision, the velocities of bodies 1 and 2 are $v_1'$ and $v_2'$, respectively.
In any collision, momentum is conserved. A collision between to bodies is said to be elastic if it involves no change in their internal state. Accordingly, when the law of conservation of energy is applied to such a collision, the internal energy of the bodies may be neglected.[^2]
Consider the body and the wall with respective masses $m$ and $m_w \rightarrow \infty$. Before the collision, the velocities of the body and the wall are $v$ and $v_w = 0$, respectively. After the collision, the velocities of the body and the wall are $v'$ and $v_w'$, respectively.
To create the simulation (animation), it was determined that `Processing` technology, specifically `p5.js`[^3], would be the most suitable.
We will assume that the bodies have the form of two squares of different sizes and colors. The smaller body will be placed to the left of the larger body.
4. The initial velocity of the bodies and their mass are set by the user, so for the time being, we will leave them as constants.
Another step is to describe the algorithm of their movement:
1. If the first smaller body makes contact with the wall ($x_1 <= 0$), adjust its velocity in accordance with the formula described in section **3.2**.
2. If the bodies collide with each other, then set each of them velocity according to the formulas given in **3.1**.
The next step is to determine the best method for animating the object and moving it with a specified velocity.
To enhance the smoothness of animations and reduce load times, the following steps were taken:
- It was decided to create a loop in the `move` function (`p5.js`) that will perform a given number of operations ($10^6$).
- The user-specified initial velocity will also be br divided by $10^6$.
For the convenience of users, the velocity and mass of each body can be set according to the user's preferences.
To streamline the user experience and avoid overwhelming the page of the simulator with unnecessary buttons and technical complexities, it was decided to use apply new settings and restart an animation when user reloads the browser page.
So, once the user has entered data into the designated fields, it is automatically saved to the localStorage. [^4]
[^1]: Galperin, G. A., _[PLAYING POOL WITH π (THE NUMBER π FROM A BILLIARD POINT OF VIEW)](http://rcd.ics.org.ru/RD2003v008n04ABEH000252/)_, _Regular and Chaotic Dynamics_, 2003, vol. 8, no. 4, pp. 375-394.