May 22nd, 2023
Our main project was not only by learning the physics behind physics simulations, but to also use our research and coding skills to create an accurate simulation. We followed the software development life cycle, which includes: Requirements, Planning, Designing, Building, Testing, and Deployment.
Requirements
We wanted to include some major features like:
Adding Multiple Objects
To create a realistic physics simulation, we needed to incorporate multiple objects. Each object should have its own mass, dimensions, and initial conditions. By implementing appropriate algorithms, we can calculate and update the position, velocity, and acceleration of each object based on the forces acting upon them.
Velocity Vectors
To visualize the motion of objects in our simulation, we included velocity arrows that indicate both the magnitude and direction of the objects' velocities. These lines provide a clear representation of how objects move and allow us to comprehend the dynamics of the simulation more easily.
Graph for Flight Paths
To analyze and interpret the motion of objects, we included graphs that display the flight paths of different objects. These graphs can represent the position-time, velocity-time, and acceleration-time relationships for each object, specifically in terms of their x and y vector components. The time was captured in milliseconds and the displacement was in cm, where 1 cm = 1 pixel.
Interaction with Objects
To enhance user engagement, we enabled the ability to drag and move objects within the simulation. This feature allows users to explore different scenarios, experiment with object collisions, rotation of objects and observe the impact of relative walls and the ground.
Plan
We decided to use HTML and CSS for the frontend designing of the simulation, and Javascript as the main backend language to handle the physics behind the movement of objects. We also decided to integrate a few online APIs for drawing charts and to handle the time simulation to accommodate variations in frames per second speed on different computers, which can be influenced by their memory consumption.
Design
We prototyped our simulation program with an online designer tool to provide a visual representation of the interface and interactions. Our focus was to create a design that offers easy navigation, interactivity, and a sleek design.
![](./assets/img/blogs/blog-4-1.jpg)
Build
![](./assets/img/blogs/blog-4-2.jpg)
![](./assets/img/blogs/blog-4-3.png)
In the development of our simulation, we implemented several key functionalities to enhance its realism and interactivity. First and foremost, we created objects by defining their length, width, mass, and initial x and y coordinates. Each object also stores a list of vertices representing its edges, allowing for precise calculations and rendering.
To graph the movement of objects, we employed a line graph approach. Using time as the y-axis and position, velocity, or acceleration as the x-axis, we generated comprehensive graphs that visually depict the dynamics of the simulated objects.
![](./assets/img/blogs/blog-4-4.png)
![](./assets/img/blogs/blog-4-5.gif)
The simulation uses a collision detection mechanism that checks if the vertices of two objects overlap. If a collision occurs, the objects exert equal and opposite forces to push each other apart, simulating the physical interaction accurately.
Moreover, we incorporated mouse interaction into our simulation. When the mouse is used, the magnitude of the collision is determined by combining the velocity of the mouse movement with the sensitivity of the input device. This allows users to interact with the objects directly, influencing their motion and experiencing a greater sense of control.
Lastly, we implemented rotational velocity for objects in our simulation. By considering rotational physics, we were able to simulate the spinning and rotation of objects, adding another layer of realism to their behavior.
![](./assets/img/blogs/blog-4-6.jpg)
Testing
To ensure the greater reliability and accuracy of our simulation, we conducted comprehensive testing across all aspects. Our testing process encompassed a wide range of scenarios, including multiple objects, object collisions, and various edge cases. Through these rigorous tests, we identified and fixed many bugs, errors, and inconsistencies. By scrutinizing these details, we created a simulation that operates flawlessly and delivers precise results.
Deployment
After the completion of our simulation, we decided to launch it on the internet on our project website. This simulation was built with responsive screens such that they are compatible with most devices with simple internet. But to ensure a seamless online experience for users, we decided to run our app locally on the users device to avoid delays or interruptions due to slow network speeds. Our final product is accessible to users at https://vishwaspuriofficial.github.io/Physics-Simulation/simulation.html.