For the past couple summers, people in Vancouver have been stumbling across pianos dropped into public spaces, free for anyone to sit down and play. The social experiment, born in City Studio, has been a big hit as a means of creating moments of positive connection between strangers. Many who have seen the pianos have anecdotes to share; some are lighthearted, and some quite moving.
This year, Keys to the Streets launches into its own entity. To help them in that journey, we teamed up with illustrator Tyler Dale to design and build their home on the web as a pro-bono project.
While not all the piano locations are in place yet, the site is live at keystothestreets.com.
We had a lot to work with: enthusiastic program leaders Becky Till and Aaron Tilston-Redican; loads of photos and videos from previous years; and, our own direct encounters with what made the experience special.
The site does a number of ordinary jobs: describe the project, tell people where the pianos are, show social evidence through photos and video, and encourage people to donate to keep the program running. But the main job is to deepen the connection with the experience that Keys to the Streets provides, whether or not someone has already seen the pianos in action.
So we built a compact piano into the website itself. With Tyler Dale’s bright, engaging illustrations showing each uniquely-painted piano and its location in the city (there will be ten, eventually, for 2015), the ‘street’ in each scene is made up of 20 piano keys that play a subset of notes from a regular piano. It works with a mouse, or tapping on a touchscreen, and especially well with a keyboard. Arian’s expertise in music helped a great deal in this area. Keys can be pressed one at a time, or together to create chords.
The structure of the site can serve the organization for years to come, as artwork can be changed year over year with different artists providing a signature look for any given season. At a deeper level, the site primes or revives memories of the full experience out in the community. The surprise and delight of playing with musical sounds on the website isn’t the Keys to the Streets experience, but a way to build connective tissue before or after that experience happens.
We found ourselves playing with the piano interaction in idle moments, and started talking about sharing songs. Now, that immediately sounds like a cool feature that’s a lot of work. So as a starting point, we worked in a simple way to specify a sequence of notes as part of the URL. It’s a bit geeky, but if you know your notes you can arrange a series of single notes and chords, played back at a pace of one note or chord every 500ms.
Here’s an example, created by Tylor as our proof of concept: http://keystothestreets.com/#c1,e1,g1,c1,e1,g1,d1,f1-g1,f1-g1,g1,f1-g1,f1-g1,f1,e1,f1,d1,f1-g1,f1-g1,g1,f1,g1,e1,c1-e1-g1,c1-e1-g1,c1,e1,g1,c1,e1,g1,d1,f1-g1,f1-g1,g1,f1-g1,f1-g1,g1,f1,e1,d1,e1,d1,c1.
When the page loads, the notes play out with the keys animating along, like a player piano. We haven’t been able to remember the name of the tune, so if you recognize it please tell us!
Try it yourself
In this scheme, notes are separated with commas, and joined to make chords with hyphens. Here’s a guide to the keys and what they play.
It’s easier if you work in a text editor with each note or chord on a separate line, then copy and paste them all together into the URL bar; the browser should take care of the line breaks.
We’re going to do a bit of work so a series can be play-tested without having to reload the entire page each time, but for now it works.
We really love working on this site, and expect to add more to it over time than just future pianos. In the meantime it’s been a great way to be involved with and contribute to a very worthwhile project, just one more thing that makes Vancouver special.
If you make a song, share it on Twitter with the hashtag #keystothestreets.
And most importantly, if you like the project, please donate to Keys to the Streets. You can support a specific favourite piano, or the program in general.