Visualizing the Drake Equation with Three.js

I’m excited to share another project I’ve been working on recently! This time, at the recent OpenNHI Hackathon, I participated on a team that made a visuzliation of the famous Drake Equation.

The Project: Estimating the Neighbors

The Drake Equation is a probabilistic argument used to estimate the number of active, communicative extraterrestrial civilizations in our Milky Way galaxy. It involves multiplying several factors, from the rate of star formation to the fraction of planets that develop intelligent life and release detectable signals.

I wanted to create an interactive web experience that visually represents these factors and the scale of the galaxy involved. This project seemed like the perfect opportunity to finally dive into a technology I’ve been wanting to learn more about: Three.js.

Learning Three.js

Working with Three.js was super easy. It allowed me to generate 3D graphics directly in the browser quickly. I was surprised by how easy it was to build a cool-looking website using Three.js, especially for a first attempt. A lot of credit goes to Claude Code, which allowed us to generate a prototype within minutes.

Acknowledgements

This project wouldn’t have been possible without the support from several people. Julia Lee and John Yong lead the team effort. I also want to give a shout-out to all the OpenNHI Hackathon Attendees – the creative atmosphere and seeing what others were building was super fun!

Check it Out

Since the whole page was static, it was easy to host using Github Pages. You can see the current version of the website at https://ariwebb.com/drake-galaxy-sim/. The code is also public, and can be found here at my Github.