MIDI Particles

An extremely customizable application that takes MIDI input and creates particle visualizations. Because it uses the experimental Web MIDI API, it is only supported in Chrome at the moment. The project is open source and maintained on GitHub.

The app includes an onscreen keyboard to mimic the user’s real life MIDI input device. The speed of the particles is determined by the input velocity that the MIDI device registers (between 0-127).

Its many customizable features are all listed on the GitHub repo. All customizable settings are saved in localStorage with the aid of lowDB and, because of the large amount of settings, the project also uses Vuex for state management.

For the actual animation, the app uses requestAnimationFrame paired with Canvas2D rendering. All of the JavaScript and Vue code was written completely from scratch. The particles and particle systems were also created from scratch using an Object Oriented Approach which utilizes modern ES6 classes.