How I Built a 10,000 Particle Physics Engine in Vanilla JS (As a High Schooler)

Hey everyone! 👋 I’m currently a Class 11 student diving into front-end development.

While studying for my physics exams, I was struggling to visualize some heavier concepts like quantum tunneling, alpha decay, and neutrino oscillations. I looked around for interactive web visualizers, but most were either clunky or locked behind paywalls.

So, I decided to build my own from scratch.

🎮 Try the Live Demo: https://jap0109.github.io/quastro-sim/

💻 Check out the Source Code: https://github.com/JAP0109

The Goal: No Frameworks, Just Pure JS
I wanted to challenge myself, so I established a strict rule: No React, no Three.js, and no external physics libraries. Everything had to be built using pure Vanilla JavaScript, HTML, CSS, and the native HTML5 API.

Here is a breakdown of how I tackled the architecture and the performance bottlenecks.

Challenge 1: Architecture & Modularity
Because I was simulating entirely different phenomena, I couldn't just throw everything into one massive animate() loop.

I structured the engine using ES6 Classes to keep things clean. I built a ScenarioManager class that listens to a UI dropdown. When a user switches from "Alpha Decay" to "Neutrino Oscillations," the manager halts the current simulation, completely clears the canvas, reassigns the variables, and boots up the specific math module for the new scenario.

Challenge 2: Rendering 10,000 Particles at 60fps
This was the hardest part. Calculating the quantum probability and movement vectors for 10,000 independent particles 60 times a second absolutely murdered my browser at first.

My initial mistake was using ctx.arc() to draw perfect little circles for every particle. The geometry math was too heavy.

The Fix: I switched entirely to basic pixel manipulation using ctx.fillRect(). Drawing a 1x1 or 2x2 square bypasses the complex arc calculations. I also pre-allocated my arrays where possible to stop the Javascript garbage collector from freezing the frame rate.

Challenge 3: The Real-Time Analytics Dashboard
I wanted users to actually see the math, not just watch colors flash. I added a secondary canvas at the bottom of the screen that draws a real-time line graph tracking total energy and particle states.

To make it interactive, I wrote a custom event listener that tracks the mouse coordinates over the graph. When you hover over the canvas, it draws a vertical crosshair and displays the exact numerical values (Time vs. Particle Count) for that specific frame using a dynamic tooltip.

Since I am still learning, I would absolutely love some feedback from the senior devs here!

Is there a more efficient way to handle the requestAnimationFrame loop when dealing with this many objects?

How could I better manage memory to prevent slight frame drops on older hardware?

Feel free to roast my code or fork the repo. Thanks for reading!