5 Days of HTML5 (Prelude)

A few years back, I was officially done with website design. The everyday market was stale, clients still didn’t know what they wanted with a website and there was very little room for creativity. All in all, I was sick of churning the same carbon copy websites out.

Fast forward to present day and the game has taken some serious and exciting changes. Smart phones are becoming cheaper to obtain and produce by the week and thus more accessible. WIFI spots are growing rapidly, tablets like the iPad are being introduced as a step between laptops and smartphones. We’re entering the foreseen era of ubiquitous computing.

Now the client knows what they want, because they’ve seen the impossible done. They’re familiar with social networking, perhaps even marketing savvy, and they’ve seen contemporary and creative website design, use of Flash and Javascript for interactivity etc.

I’ve decided it’s time to get back into the game. With the introduction of HTML5 we’re seeing the first major step towards true cross compatibility and native browser support for interactivity, video and audio.

So, starting Monday, I present to you my 5 day tutorial entitled “5 Days of HTML5”. Each day i’ll be posting a tutorial covering a nice bite of HTML5.

By the end of it, we’ll have a stylish, organised, professional HTML5 website. I’ll be introducing you to the new tags in HTML5, teaching you tricks I use to keep my code organised, and maybe touch on some interactive stuff.

5 Days of HTML5. Coming Monday.

Hacking Guitar Hero Controllers to MIDI in Max

Im adding to my list of new years resolutions “blog more” right now. Seriously.

Anyway, I bought one of these today;

…and after a night of hacking I’ve got it all parsed and sending out MIDI data with the help of a pretty big max patch which I’ve put up for download here:



To help me cover my costs in keeping my website running and encouraging me to blog more, I’m selling this little app for £1.99. About the price of a couple of songs on iTunes, but to me, it makes all the difference in helping me run my website and keep developing these tools for the people who read this and are interested in this stuff.

So if you’ve got a USB guitar hero controller, please buy the app, plug your controller in, patch it into ableton and rock out!

And please email me your thoughts and likewise with any bugs, i’ll be happy to chat with anyone about how it works and how I built it too.

Thanks and please support 🙂


How to build a MIDI controller with the Arduino, Firmata and Pure Data

Time to start contributing some knowledge back to the wonderful world that is the internet; today, a step by step nice and easy tutorial on getting started to building your own MIDI controllers with the arduino.

When researching for my ableton controller project, I didn’t find much out there about using firmata on an arduino to send data to software. The standard approach just seemed to be create the code in the arduino language, upload it to your board and hack one of those MIDI to USB cables as a bodge job way of getting the MIDI out of the arduino.

So why firmata and pure data? Well the whole idea of firmata is that you flash it to your arduino, and it throws out serial about whats going on with the arduino inputs and outputs, then you decide how the software treats the readings coming in and going out.

Theory out the way, lets build some controllers. You’ll need a few things…


  • An arduino and something to wire into it (for this i’ll be using a pot)
  • A USB cable for your arduino



Install Pure Data and create a folder to store all your patches somewhere. Unzip Firmata and add the files ‘arduino.pd’, ‘arduino-test.pd’ and ‘arduino-help.pd’ to your new Pure Data folder. The ‘arduino.pd’ file is the object that we use in PD for opening up communication with your arduino and routing it to PD. Done? Awesome, your software is almost set up.


Install the latest version of arduino and open it up. Connect your arduino with the USB cable to your laptop (i’m using a macbook for this by the way). In the example patches, open up “Standard Firmata”, select your board (im using an arduino mega), and your serial port (look for tty.usbserial for use with a USB cable). Then compile and hit the upload button and your arduino is now ready to use firmata and communicate with Pure Data!


Potentiometers are cool, and theres a great arduino tutorial of how to wire one up here: http://www.arduino.cc/en/Tutorial/Potentiometer

Basically, all you need to know is that there are three pins; your two outer pins govern voltage flow across the pot, meaning one has to be 5V and the other has to be ground. It doesn’t matter which, but your 5v pin is going to be where your pot reads maximum, so convention dictates this should be the right hand pin. The center pin needs to be connected to an analog in on the arduino and will read the value of the pot as it sweeps from ground (0v) to 5v.

All wired up? Plug it into your laptop and open Pure Data, we’re ready to get things talking.


Open the example “arduino-test.pd” Pure Data patch you copied over earlier. It should look like this one…

The test patch has everything we need to open a connection and enable pins. Firstly, lets delete a bunch of stuff and make our window a bit bigger. Hit Command + E to enter edit mode in Pure Data.

Ok a quick explaination; the key component here is the ‘arduino’ object. This is being drawn from the file you copied in earlier, and is what communicated with your arduino. Here we can do everything to control the arduino from opening a connection, to receiving data.
The large grid allows us to set the mode of each pin on the arduino. Remember pins 0 and 1 are reserved for Rx and Tx. I’m using analog pin 4 for this demo, so I’ve set my pin mode for pin 4 to ‘analog’.

Now we can plug our arduino in and get a reading from the potentiometer.


With your arduino plugged in, hit command and E to bring us out of edit mode. In our patch, click on ‘Devices’ above the arduino object and open up the pure data terminal. (That other thing that loads with PD that has all the scary code in)

The “Devices” message connected to the arduino object pings your computer to find what devices are connected and on what serial ports. Since we’re using a USB cable to connect our arduino, we’re looking for something with ‘usbserial’ in it, in this case; port 2.

Select the relevent port in the green box at the top (remember the first box is ‘0’, second is ‘1’ and so forth) and hit ‘Open’ to establish a connection. Check the terminal to see if the connection was sucessful.

Now lets check we’re getting something in. Create a number box (Command + 3) and connect it to the relevent pin on the ‘Route analog’ box at the bottom. In this case, pin 4.

One more thing; if you’re not getting any readings in, you’ll need to click on ‘pd old analog/digital controls’ and enable your pins here too. What I tend to do in my patches is just not include the large grid but make my own ‘old pd’ controls custom to what i’m enabling/disabling to save space.

Here’s what the ‘old analog/digital controls’ subpatch looks like (pin 4 enabled)…

Come out of edit mode and check that you’ve got readings. If so congratulations! If not, troubleshoot, start with making sure your usb connection is opened, make sure all the correct pins are enabled (remember you’re counting from 0 not 1 on most of these buttons in PD, it’s just the way computers work).


So we’ve got a reading and chances are it’s to 3 decimal places between 0 to 1. No problem, create a new object (Command + 1) and type “autoscale 0 127”. This allows us to scale the input to a min and max value, in this case 0 to 127 of MIDI. Next, lets get things looking nice, create a new object and type “knob”. Connect this AFTER the autoscale object. (the knob is default set to read inputs from 0 to 127. Then create another number to display the scaled MIDI data coming out, and finally a new object and type “ctlout 1”.

It should look something like this…

The second box should be outputing values from 0 – 127 now, and the knob giving a visual representation of your potentiometer.

Now lets patch it into ableton…


Firstly, you’ll need to set up your macs IAC driver if you’ve not done this. Basically you’ll need to go into Audio/MIDI preferences and enable your IAC driver. Then create a new input and output. One for input to DAW and one for output from DAW. Google around for a tutorial on this, its really simple, a 30 second job.

After you’ve set up your IAC driver, go back to PD and go to preferences > MIDI Settings, and connect your IAC driver.

Open ableton and go to its MIDI preferences. Create a device listing for your IAC driver and enable its ins and outs into ableton like so…

And thats it! Create an instrument and try to assign something! I’ve got it controlling the brightness of a bass sound here.

Shout out for Facu who requested this tutorial. Hopefully it’ll help some of you looking to get into this stuff and start building things but with no idea where to start.

Feel free to post this around and send me your comments and links to things you build with it 🙂

Ableton Controller – Part 4

I’ve been off blogging my adventures in dork land for a while now, so firstly I apologize for anyone out there wanting to know how to go about doing a similar sort of thing. Blogs are a fantastic resource for learning stuff.

Secondly, its finished! When I last posted about this project, I had drilled the acrylic, fitted the pillars and the case was starting to take shape…

Then disaster struck. When sawing the hole for the launchpad, the acrylic, being the brittle material it is especially at 5mm, snapped. After an extended period of shouting and swearing at a piece of plastic, I did the only logical thing; gave up and paid for a top sheet to be laser cut.

Sorry for the wonky image. Im sure you can turn your head. Its 0:33 and I have work tomorrow. I’m not editing it now.

The design was knocked up in illustrator and cut by Zap Creatives, who charge by the minute with no set up charge. The whole sheet, at nearly A3 size, cost just over £26 to get cut. A bargin compared to some quotes I got in the £80 region.

Next step, hooking up the electronics and pluging things into the arduino. I ran a few additional software tests at this point to get things working with Pure Data. I abandoned the arduino programming language and opted to use the Firmata library.

The idea with firmata is that you simply load the Standard Firmata program onto your arduino, which sits there taking whatever is plugged into your arduino, and sending it out the USB in serial form. The advantage being that you no longer need to edit and reupload code to your arduino; everything is controlled via the chosen software. It simply provides an incoming/outgoing stream and you manipulate the data how you wish in the software; a great way to make multi-functional devices. Why change the firmware when you can simply change the patch?

The final step was the launchpad. Since the holes for each button lined up nicely now, it was a case of just elevating the circuit board to fit flush with the casing. I used the same 35mm risers as I used for the original case, except filed down by around 2.5mm to compensate for the circuit board. There were nine risers in total forming a 3 x 3 grid, note that some of the risers have grub screws in the tops of them, this is to line up with the holes for the original launchpad screws in the PCB. Having these would ensure that the circuit board is stable on the risers and would not slip out of place between the risers and the silicon button layer.

And there she is.

I finished this the day before I was due to play a gig with it. It got some great feedback and was actually described in a review as “something which looks like the unholy union of a Speak and Spell and a Rubik’s Cube”. Awesome!

And a look at the Pure Data patch…

It’s still unfinished here. It’s basically opening the communication between the arduino, scaling everything from 0-127 to be compatible with MIDI, then being routed through various CC’s to mac’s IAC driver, which passes the MIDI CC’s into Ableton Live.

So there you have it. A few things are missing, the LED’s still need to be added and tweaked, a problem with there not being enough power to illuminate the very demanding buttons, although I plan to resolve this with an external DC adapter though.

Well the basics are there and the rest shall be developed in good time.


Just a little something I found on my journey through the web today. A nice open source bridge between Android and the Arduino. The implications of linking your apps with physical hardware could be phenomenal. Too bad I still have an iPhone for now 😦

Definately something to delve into one day. Check out Amarino here:



PD Additive Synthesis

On recommendation, I decided to download Pure Data and give it a bash. Pure Data is very similar to Max for Live and ticks all the boxes for music programming;

  1. Intuitive and simple
  2. Open source
  3. Great support and community
  4. Potential to manipulate visuals, MIDI, audio, OSC etc.
  5. Even potential to utilize the Arduino microcontroller via the Firmata library

I’ve even found resources online explaining how to host Pure Data patches in Ableton Live to create your own plug-in’s. I can see this being a future experiment!

For my first patch I built a basic additive synthesiser that takes a MIDI note, converts it to a frequency and then splits it to two destinations. The first is a sine wave oscillator, and the second frequency is multiplied by two to create an octave of the tone, and sent to a sawtooth oscillator. The two waves are then combined, displayed in a graph and send out via the ‘dac~’ object.

Patch below…

Yes if finally tidied up my desktop. It was an unprecedented mess.

Creating Glitch Art

Let me introduce you all to ‘Glitch Art’ or ‘Databending’. Glitch art is the term to describe art inspired by computing errors and often using those errors to your advantage to create the art. The above three pictures are of myself, taken by my good friend Brian at a show of an old band I used to play keyboards for. Anyone who knows me knows how obsessed I am with bizarre technologies so when I read about glitch art, I immediately fell in love.

So how to do it…

  1. Take an image and open it in your favourite text editor.
  2. It’ll come up with a bunch of gobble-de-gook right? Good.
  3. Start messing with that code, change values, remove values, delete lines of the code, just play around with it. Delete too much and your file will corrupt. Add too much and the same happens, its total experimentation finding the right balance and being able to create effects like above. My advice is do one thing at a time, then check it out to see if you like it. Its a lengthy process, but you’ll create something awesome.
  4. When you’re done, save your file with the exact same extension (.jpg or whatever you used to begin with) and view the results.

There you have it. Glitch art! Relatively easy and a fun way to create some original images.