In the traditional HSC (Higher Secondary Certificate) curriculum in Bangladesh, physics is often reduced to a memorization contest. Students cram equations like $v = u + at$ without ever visualizing what those variables actually look like in the real world. They memorize the definition of projectile motion but have never seen how changing the launch angle by just 2 degrees completely alters the trajectory.
At Virtual Science Club Bangladesh (VSC.BD), we fundamentally oppose rote learning. To combat this, we engineered an interactive Web-Based Physics Simulation Engine. Used by over 500 HSC students, this platform allows users to manipulate gravity, velocity, and mass in real-time, instantly visualizing the outcomes. This log details how we built the engine using React and Node.js.
1. Why Web Technologies for Physics?
We could have built this using Unity or C++, but accessibility was our top priority. We wanted any student with a smartphone or a low-end laptop to be able to run these simulations directly in their browser without downloading heavy software.
- The Frontend (React): React's component-based architecture and robust state management (`useState`, `useEffect`) make it perfect for a simulation dashboard. When a student slides the "Velocity" bar, React instantly updates the state without reloading the page.
- The Rendering Engine (HTML5 Canvas): For drawing the actual projectiles, waves, and pendulums, manipulating the DOM is too slow. We utilized the HTML5
<canvas>API alongside JavaScript'srequestAnimationFrameto render objects at a smooth 60 Frames Per Second (FPS). - The Backend (Node.js & Express): We implemented a Node.js backend to allow teachers to save specific simulation states and share them via unique URLs with their students.
// LOGICAL_ENGINEERING_NOTE
The beauty of programming a physics engine is that the computer doesn't know what "gravity" is. It only knows pixels and refresh rates. As an engineer, your job is to translate real-world physics equations into frame-by-frame pixel manipulation.
2. Module 1: Projectile Motion (The Math)
To simulate a projectile, we must apply the exact mathematical formulas taught in the HSC syllabus. The trajectory of a projectile is given by the parabolic equation:
$$ y = x \tan(\theta) - \frac{gx^2}{2u^2 \cos^2(\theta)} $$
However, in a rendering engine, we don't plot the entire curve at once. Instead, we calculate the object's $X$ and $Y$ coordinates individually for every single frame based on time ($t$).
// Custom React Hook for Projectile Physics Loop
import { useState, useEffect } from 'react';
export const useProjectile = (initialVelocity, angleDeg, gravity) => {
const [position, setPosition] = useState({ x: 0, y: 0 });
const [time, setTime] = useState(0);
useEffect(() => {
let animationFrameId;
// Convert degrees to radians for JS Math functions
const angleRad = angleDeg * (Math.PI / 180);
const vX = initialVelocity * Math.cos(angleRad);
const vY = initialVelocity * Math.sin(angleRad);
const renderLoop = () => {
setTime(prevTime => {
const t = prevTime + 0.016; // Approx 60fps delta time
// The core physics translation
const currentX = vX * t;
const currentY = (vY * t) - (0.5 * gravity * t * t);
// Stop simulation if it hits the "ground"
if (currentY <= 0 && t > 0.1) return prevTime;
setPosition({ x: currentX, y: currentY });
return t;
});
animationFrameId = requestAnimationFrame(renderLoop);
};
animationFrameId = requestAnimationFrame(renderLoop);
return () => cancelAnimationFrame(animationFrameId);
}, [initialVelocity, angleDeg, gravity]);
return position;
};3. Module 2: Wave Interference & Superposition
One of the hardest concepts for HSC students to grasp is the Superposition Principle of waves—how two waves pass through each other to create constructive or destructive interference. Textbooks show static 2D images, which fail to convey the dynamic nature of waves.
In our engine, we created a module where students can generate two independent sine waves. They can independently control the Amplitude, Frequency, and Phase Shift. The Canvas engine then mathematically adds the two waves ($Y = Y_1 + Y_2$) in real-time. Students can literally watch a "node" (zero amplitude) form dynamically when they set the phase difference to 180°.
Fig 2.0 - Integrating React state variables with HTML5 Canvas drawing functions.
4. Scaling with Node.js
As the platform grew in popularity among HSC candidates, we introduced a backend using Node.js and MongoDB. This allowed us to build a feature called "Simulation Scenarios".
A physics teacher can now set up a specific scenario (e.g., "Find the initial velocity required to hit a target 50 meters away with an angle of 30 degrees") and generate a unique link. When students open the link, the engine initializes with those exact parameters locked in, turning the simulation engine into a dynamic homework and testing platform.
5. The Final Takeaway
The Physics Simulation Engine is a testament to what happens when software development meets education. By allowing students to play with the variables of the universe inside their browsers, we replace the fear of complex equations with the joy of logical discovery. At VSC.BD, we will continue to build tools that empower the next generation of engineers in Bangladesh.
