In 2019, YouTuber and creative coder CodeParade released a video demonstrating a C++ application which visualized chaotic equations as beautiful swirls of color. He also released the source code for his app on GitHub.

I was struck by the elegance and complexity of this visualization, but one thing occurred to me: did it have to be written in C++ and compiled only for Windows? As a frontend engineer, my impulse was to rewrite it as a web application. That way, anyone with an internet connection could run it regardless of operating system and without compiling it.

Using his source code as a reference, I rewrote the simulation engine in JavaScript using Three.js. I added a new layer of React.js based UI controls for easy manipulation of the timeline, playback controls, and parameter settings.

CodeParade's original C++ implementation was very powerful but it lacked easy UI controls to configure the visualization. All interaction was done via keyboard with no mouse input whatsoever. This led to a very awkward interactive experience.

I improved this with configuration options and UI build right into the web application, with full mouse support and additional configuration options not present in the original, such as mouse panning and zooming.

Special thanks to CodeParade for the inspiration and source code.

Check out the source code for my version on GitHub or view it live in the browser.

Ask any space, science, or astronomy enthusiast about NASA's Asronomy Picture of the Day and they will probably gush about it. Launched in 1995, APOD has served the public with a new beautiful astronomy-related picture every day for the last 21 years. APOD is one of the most popular government websites, drawing over 1.5 million visitors per month.

For being such a beloved government service, the visual design and UI of Astronomy Picture of the Day is outdated to say the least. The interface has not been significantly updated in decades, and visiting the site is like going back to a time when dial-up modems ruled the land and Google hadn't been invented yet.

I decided to apply my skills as a UX designer and frontend developer to update the APOD website for the modern web. My goal was to make browsing the image gallery more streamlined, intuitive, and accessible. I call my new and improved version "APOD 2.0". Many improvements have been made, including:

• Dark color scheme better showcases space imagery
• Keyboard arrow key navigation enables rapid browsing
• Scrollable filmstrip gives a preview of dozens of images
• Intelligent image preloading increases speed
• Dropdown selection makes it easy to select a specific date
• Nonessential info is hidden in hover states to keep focus on the imagery

The heavy lifting in the project is done by React.js, Facebook's amazing UI library. I chose React.js because it let me easily encapsulate interactive components like the filmstrip, thumbnails, and date picker. jQuery was also used for its convenient AJAX capabilities, and GreenSock Animation Platform (GSAP) provides some animation muscle.

Special thanks goes to NASA for making their APOD API public, without which this project would not be possible.

APOD 2.0 is open source under the GNU GPL 3.0 license, and is available on github.com. It is an ongoing project which I am constantly trying to improve upon. Future feature TODO list includes search, tagging, slideshow, and alternate navigation modes.

2026 Update

After 30 years of service, in September of 2026, NASA finally updated their APOD website to a new, clean, more modern look. While this did not entirely render APOD 2.0 obsolete, unfortunately NASA also deprecated the old API I used for this project. In November 2026 I revisted this project to fix breaking issues and ensure it continues to serve as a (now rather historical) showcase of my work and to serve the public.

• Updated to the new NASA APOD API for data fetching
• Updated NPM dependencies to modern versions
• Added automatic deployment to Firebase via GitHub Actions