The Cooper Hewitt Design Museum has an exhibit featuring Dot Piano by Alexander Chen. The user interacts with it through a MIDI keyboard hooked up to a giant screen:
- https://collection.cooperhewitt.org/objects/1141959641/
- https://twitter.com/alexanderchen/status/920263702158434305
I was pleasantly surprised that I could run it from home in Google Chrome!
The web site features circular visualization that was not on display at Cooper Hewitt:
I liked it a lot, but wanted to make some changes. Alexander Chen's video description mentioned that he used p5.js:
Luckily, I'd taken "Creative Programming for Digital Media & Mobile Apps" on Coursera and had familiarity with the "Processing" language on which p5.js is based:
Dot Piano is very featureful - including a playable piano using the QWERTY keyboard. I wanted something simple that's easier for the casual JavaScript programmer (like myself) to tinker with.
The first (and only - for the moment) visualization is "Radar Simple". Here's a video of it rendering "Airwolf":
Hope you can hack on it and have some fun!
The browsers that support the Web MIDI API are listed here:
Browsers that work:
- Google Chrome
Browseres that don't work:
- Microsoft Edge
- Mozilla Firefox
Devices that worked with Windows 10 after installing the appropriate driver:
- Roland Digital Piano
- Korg synthesizer
- CME WIDI BUD paired with Yamaha MD-BT01
- Load the
radar-simple.htmlinto Google Chrome. - Hit F11 for full screen.
- Start sending MIDI events from your instrument.
- (Optional) Hit F12 to look for errors or log messages.