Piano Spots is a Processing.js sketch influenced by Brian Eno's Bloom app. Clicking/tapping on the screen draws a spot with an accompanying piano note. The spot and note echo repeatedly, decreasing slightly in opacity and volume with each echo until they finally fade out.
See a working demo at http://pianospots.com. (It requires a browser that supports WebAudioAPI properly -- see http://caniuse.com/audio-api for a list.) Click anywhere to begin. The notes are mapped to where you click, with octaves increasing from left to write in a minor Blues scale. The colors are also determined by where you click: red maps to the x-axis, blue to the y-axis, and green to the distance from the center of the screen.
Because I'm not mathematically capable of generating the scales I wanted for this sketch, I used the Player, Sound and Scale classes from a Creative Commons-licensed sketch by Gregory Bush called Spark Chimes. All code by Bush is in the file SoundBank.pde.
Piano Spots also uses a fork of Mick Grierson's Maxim cross-platform JavaScript digital signal processing library. My fork fixes some issues rising from changes in the webkitAudioContext code (see Porting webkitAudioContext code to standards based AudioContext).
The base piano note sample is the Manthey-C3.WAV by Meg from FreeSound.org.
I started writing this as an assignment for the Creative Programming for Digital Media & Mobile Apps course on Coursera in 2013, which I didn't finish but I recommend if you're interested in playing around with Processing.js to write interactive creative apps.
If you're interested in playing around with the code, you can do the following:
- Go to http://processing.org/download and installing the appropriate version for your machine.
- Run the Processing IDE.
- Install the JavaScript mode. (On Mac OS X, click the Java mode button in the upper-right of the Processing window; click Add Mode...; then choose the JavaScript mode.) You may need to reboot to switch to this mode.
- Clone the PianoSpots repository to your machine.
- Open the PianoSpots.pde file in your Processing IDE.
- Press the "Play" button to start the web server and run the sketch. (You'll get a warning message in the IDE about the applet size, because it's dynamically determined by the browser window at runtime. Just click OK.)
For more information, see the Processing.js Quick Start guide.
The PianoSpots code (except for the maxim.js file) is distributed under the Creative Commons Attribution-ShareAlike license.
The maxim.js file is distributed under the MIT license.