DEV Community

Cover image for I Built a Physics Simulator + Color Mixer in One HTML File
universal-cyber
universal-cyber

Posted on

I Built a Physics Simulator + Color Mixer in One HTML File

Star the repo on GitHub! ⭐

Live:


I wanted to understand three things game developers need to know: physics simulation, graphics rendering, and performance. So I built a single-file web app that does all three.

No npm. No build tools. No dependencies. Just ~500 lines of JavaScript in one HTML file.


What It Does

Drop objects from different planets — Watch gravity, drag, and terminal velocity in real-time as objects fall from Earth, Mars, Jupiter, and more.

Mix colors mathematically — Blend RGB values and instantly see the closest named color using distance calculations.

Test color accessibility — Check if your text color meets WCAG standards (4.5:1 contrast ratio) so everyone can read it.


Key Takeaway

You don't need frameworks to build cool things. Vanilla JavaScript + Canvas can handle physics, graphics, and complex math.

And shipping one HTML file (no build step, no npm install) is actually elegant.

If you're learning game development, start here. Understand the fundamentals before frameworks.

Building something small and real teaches more than tutorials.


Happy coding! 🚀

Top comments (1)

Collapse
 
universalcyber profile image
universal-cyber

The hardest part of this project for me was getting the terminal velocity math right while keeping everything in a single file without libraries.
I'm still new to this and learning every day, so I’d love to hear your thoughts! If you have any tips on how I could make the physics loop more efficient or if you see a way to clean up the code, please let me know. Feedback is always welcome! 🙏"