Interactive Particle Playground

HTML5 Canvas Experiment

For my Rich Media Web Application Development I class, our first project was a HTML5 canvas project. I chose to create a experimental experience using particle systems and the web audio API. This was a chance for me to get into the nitty gritty of object-oriented javascript and prototypal inheritance.


Create a galaxy of particles that react to field effectors, and the frequency of an audio sample. Allow the user to interact with the environment and experiment on their own.

Development Cycle

Javascript Development

There's a lot more I wish I could have done with the user experience, but I learned a ton about the technology involved in the project and it was a really great exercise in rapid learning.

comp matching


I used requireJS for module dependency management, which was my first experience with AMD

comp matching

Object-Oriented Javascript

The program is structured in pieces, some of which follow the Singleton pattern, others the Module pattern

comp matching

Web Audio API

The attraction of the fields is dependent on the average frequency of the music

comp matching

Interactive Elements

Users can create new Fields and Emitters to adjust the output of the particles

Final Thoughts

I learned so much from this project! This was the first pure js-driven application I've written. I learned a lot about Canvas, vanilla javascript, AMD, and designing an application structure.

The interface is lacking, however, though functional. I may try to provide a nicer UI when I have some extra time. I'd also like to include a beat detection library and do more with the Web Audio API.