Starry Night Sequencer: A MIDI Visualizer
🧑‍🎨

Starry Night Sequencer: A MIDI Visualizer

Published
December 31, 2016
Tags
Projects
Author
Stephen Wu
🎹
For a Design class, I built a MIDI data visualization on top of a GIF of Vincent van Gogh's Starry Night.
notion image
This was my first foray into working with MIDI files and interactive data visualization. I used MIDI.js and jQuery to build this! The website looks best on desktop.
Each square represents one of the 88 piano note keys. Colors were picked from the background. 5 different songs were selected.
notion image
There are two visualization schemes: ephemeral (notes disappear as soon as the keys are let go) and perpetual (notes stay on for the duration of the song).