TouchKeys: Bringing capacitive response to every key on your music keyboard

Regularly attending events held by the London Hackspace, I was blown away by the demo of the TouchKeys system. Andrew McPherson, working out of Queen Mary, University of London, has put together a kit which a key shaped Printed Circuit Board(PCB) can be stuck onto every key on a midi keyboard, and once wired to the control board and plugged in, can give the exact finger position on the keys. It use the same technology as the touch screens on our phones, measuring the capacitance changes in the circuitry when a finger is introduced in the keys vicinity.

By cleverly segmenting the board in to zigzags and diamonds, and employing the use of dedicated capacitive sensing chips on every key, a high degree of accuracy in finger position can be obtained. Not only that, Andrew has developed the system to have two dimensional sensing, so not only can it know the up-down position but also the left-right position on the key. I almost forgot to mention the system can even interpolate the contact area and have multiple fingers per key!! It’s obvious that Andrew McPherson has really tried hard in making various avenues of interaction available such that the artists using the system can have a multiple ways of modulating the sound. A traditionally one dimensional soundscape has now been transformed into a world with many, it hurts my brain just thinking of the plethora of possibilities.

One of the intuitive ways to map the touch data, and one that Andrew has used in his demos is to make a sliding up and down action to pitch bend the notes, and a wiggle in the left and right creating a vibrato; a recurring slight pitch bend either side of the note. The unnamed notes in between the ones you know are now available to hear. Bending a note up, and its corresponding sharp down, in just the right amount can produce a beat frequency, an interesting sound artifact that composers would rarely put in their pieces as its difficult to recreate with traditional equipment. In choosing the route he did to produce his product, Andrew has made clear he doesn’t want to completely get away from the idea of a traditional keyboard, giving the user responsibility in deciding how and how much they would like to augment their work. Other continuous keyboards do exist such as the notable Seaboard by Roli in which the contours of the keyboard are rippled into the surface of a continuous spongy membrane. This keyboard can be considered completely analogue, meaning you may need to place you’re fingers more strictly to produce the sound you’re expecting.

TouchKeys is on KickStarter! At the time of writing this there are nine days left. It is performing well but still a short distance away from acquiring the funding. TouchKeys has received a great deal of press coverage, many listed on his website here. Have a read of the great thing they say about it! The kit may be a bit expensive, but rest assured it is at an amazing value, there is not any mark-up added to what it costs to produce, the boards have been produce to a very good standard and reliable parts have  been chosen to do the job right. If you know a musician who wants to be at the forefront of technology make sure you spread the word and divert them to this page or the KickStarter. It would be a shame if this amazing piece of technology failed to reach the market.

Flash .fla files to play with

I was looking back through the bookmarks I had accumulated over the years, sort them out and get rid of ones that I don’t see myself using again. In this process I came across this a site which I used to get to grips with programming concepts. I had first saw this site about 10 years ago and I was quite surprised to see the “toys” are still there to play around with.  The source section of the site is really cool. It contains many interactive “toys” built in flash and each toy comes with the .fla file so you can download it to your computer and see how the code (actionscript) produces such interesting behavior. You would need a program that can open .fla files, back then it was Flash MX,  but I think now its Flash Pro CS5. If your looking for a free opensource alternative check out

Here’s the site:

When you get to the site have a look at the .swf files along the side and if you’d like to learn more, download the .fla’s and have a look what happens to the behavior when you edit the code a bit.

Processing on web using processingjs


It may not be revolutionary but I’ve just figured out how to do something I’ve been wanting to do for some time now. I can now show people my processing sketches via a website by using processingjs script. I have mentioned it before, but processing is a graphical programming language that can make neat visuals, or more if you have the idea. I used it in my gif animation maker, a tool I came up with to produce an interesting pair of images that can reproduce a likeness of a bunch of frames animating, when one layer is slowly rotated about the other (check my previous posts).

Achieving this newfound ability to spread some awesome, means I can take some of my older sketches and try to make them live solely on the internet, breaking the barriers (tiny hurdles) people might have before trying the tools and sketches I make.

Also look at the code above, its not that difficult if you think about it, and my oh my, it produces a fantastic visual for not much work(I may be a bit biased here)


Download and play the simple animation here

Gif Moire animation maker

I recently released something on my GitHub, that I think is quite awesome. Its a bit of code I had made to enable an animation to be put onto a piece of paper and when the top semitransparent layer is rotated relative to the bottom animation layer, an illusion of a moving animation can be observed.

It’s kinda hard to imagine what that is like, so check out this youtube video to get a better idea:

I developed this code on the graphical programming language called processing. As the files on the GitHub are still code, you would need to download processing from their website to see it in action. You can find processing here:

The link to the files in GitHub are over here:

Over there you will find two versions of the code, the one that is appended with rock is my second version based on the first. What gif_moire_maker_rock does which the other doesn’t is allow you to offset the point of rotation from the center of the image to the top, the animation would then instead cycle back and forth when the top layer is rocked relative to the one underneath. I made a simple colour changing test to show this, on this youtube video.

The sketch (processing code) allows you to convert a collection of pictures in the sketch folder into an animation image, containing all the frames conveniently arranged in slices at different angles, and another image for the top layer which has several slits which when placed on top of animation image, would only show one frame of that layer. Rotating the top image that has been printed on a transparent film, about the point of rotation (highlighted by a small circle on the images), the frame shown changes to others in the animation layer.

The type of transparent film I use is that which in the past had been used for producing documents for over head projector (OHP). As OHP’s are a bit of an ancient bit of technology, I am not only making something really cool but also finding a use for these films that are effectively rendered useless. I work in a school as a lab technician so I have access to this stuff, it may be an idea if you want the stuff for cheap or free, to ask if your local school whether they have any gathering dust so you can have a go at making one of these animations yourself. Good luck if you try it, and comment if you do, or have any problems.