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.

Clear Cache on the Web Store

Shine.js

This library creates dynamic shadows using JavaScript and CSS. It started as a little code-design experiment together with Naim Sheriff and eventually became a personal exercise in designing and releasing an easy-to-use open source library.

Launch the Demo Source on GitHub

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.

Super Shape Audio

Candy Cane

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.

Launch Candy Cane (requires flash)

Typographic Sound

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.

Launch Typographic Sound (requires flash)

Sound Force

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.

Launch Sound Force (requires flash)