Ever since I first got my hands on Flash 4 back in middle school I’ve been hooked with interweaving animation and code. I soon went from handcrafted timeline animations to more and more intricate and dynamic visualizations and games. Experimenting and exploring on my own time has laid the foundation for what I do professionally today.
This page highlights some of my favorite side projects that have helped me grow and shaped me as a coder all the way from school to skill-set development initiatives that I’ve spearheaded at Big Spaceship.
Clear Cache Chrome Extension
Clear Cache is a Chrome Extension I wrote to help with development in my team and now has grown to a user base of 200,000.
Transitioning from Firefox to Chrome I missed the possibilty of quickly clearing the cache to load modified assets on the fly. After looking into the prerelease documentation of the Chrome Extension API, I discovered the new cache API.
Being one of the first extensions to leverage this feature and focusing on a small footprint and simplicity has made Clear Cache one of the most popular developer extensions in the Chrome Web Store.
Super Shape Audio
My biggest passion for side projects has been to write code that marries visuals with sound. Sometimes I’d hear a specific song or be inspired by a certain type of motion. I would spend countless late nights tweaking parameters and fill numerous notebooks with sketches and concepts for new visualizations.
After pitching a concept involving super shapes to Google for their I/O conference branding and experiment in 2014, I got curious about how super shapes could react to sound and explored this on a recent night. It’s intriguing to see the shape come to life by itself.
This is a visualization I wrote during my internship at Big Spaceship to both get a hang of 3D in Flash and exploring generative meshes.
The audio spectrum is split up into visual frequency bands that twist around each other and swing to the amplitude of their frequency ranges. A custom control panel allowed me to tweak all parameters and save presets in an XML file.
At a time where I was exploring drawing vectors dynamically, I wanted to create an animation that generates words along to music. For that I created a simple editing tool that allowed me to create curves for each letter in the alphabet. I would then connect each letter through a single line, forming words.
Since the lines were generated programmatically, I was able to deform the words and letters as they faded out. This only gave users a quick glimpse of their original form before dissolving into their atomic building blocks.
This work was also featured in the Do You Mind exhibition in New Zealand as part of an installation by Rita Godlevskis.
As the name implies, Sound Force was the result of writing my first simulations of forces and gravity. Using a custom particle engine that I had written and maintained over the years on the side, this visualization featured three particle generators, each bound to a frequency range.
If a generator’s frequency range was active, it would generate particles and create a repulsive force. Generators that didn’t generate particles had an attractive force. That way particles would move from active generators to inactive ones.
Each generator also had a color assigned to it. Particles would start with the color of their respective generator, but as they would move closer to other generators, they would gradually transition their color towards the closest generator, creating a gradient in the particle streams.