This is a submission for the MLH x DEV Writing Challenge
What I Built
For HackPHS's "Into the Skies" hackathon, my team and I built Ozone Inc, an interactive educational game where players explore Earth's atmosphere and the ozone layer and watch temperature and climate change in a simulation.
Physics, earth, and atmospheric science felt too interesting to just read about in a book. Instead of telling people the facts, we built an experience where users can play with a model of the Earth and see how they affect the planet.
My favorite part is the 3D globe at the center of the game. We built it with Three.js, with countries colored by temperature, and it rotates so you can view it from any angle. Instead of just numbers on a screen, you can see how temperature differs across the world.
The main challenge was turning real climate science into code. The simulation is an energy balance model: sunlight comes in, some of it is reflected, heat radiates back out to space, and greenhouse gases like CO2, methane, and CFCs trap some of it. For the trapped heat we used published formulas from the same research the IPCC uses. A simple two layer ocean makes the surface warm quickly and the deep ocean slowly, and feedbacks like water vapor, clouds, and melting ice add to the warming. Emissions from things like fossil fuels, livestock, and landfills feed a model that turns them into the gas levels in the atmosphere.
Getting the formulas right was harder than getting them to run. Every scientific value lives in one file with its source (IPCC AR6, NASA, NOAA/WMO, the Global Carbon Budget), and we tested our forcing code by reproducing AR6's published 2019 values.
We built the project with TypeScript, HTML, CSS, JavaScript, Vite, and Three.js, alongside npm, Vitest, ESLint, and Prettier. TypeScript handled the game logic, while HTML and CSS handled the frontend.
The underlying calculations were just as critical as the presentation. This project also gave me the chance to work with 3D graphics and build a tool that makes powerful scientific ideas accessible.
Demo
Try Ozone Inc: https://ozone-inc.vercel.app/
Visit the GitHub: https://github.com/theofficialtruck/project-hackphs
Click and drag the 3D globe, explore the countries, and watch their colors change with temperature.
Partner Technologies
We used ElevenLabs to generate the sound effects that play when you click certain buttons in the game. We wanted it to feel more real than just a visual simulation, and audio helped bring that to life.
Adding sound let me experiment with audio as a mode of interaction. It opened my eyes to the power of sound in game design. Sound can make a game feel more complete, whether the app is educational or if it is just for fun, sound really helps make the game more engaging for the user.
Hackathon Experience
Working with Three.js on the interactive globe was fascinating, especially watching countries animate their color as their temperature changed. I also enjoyed merging the technical and scientific aspects of the project.
I'm proud that our team turned a complicated science topic into a full, playable experience. This project reminded me how much I love tackling complex technical challenges and communicating complex ideas through code.
Thanks to HackPHS for the opportunity to build, experiment, and learn this past weekend!
Top comments (0)