Sugarcube MIDI Controller

This project is a portable, Arduino-powered, grid-based MIDI controller that boots up into a variety of apps to do lots of things with sound. It has 16 backlit buttons, used as both inputs and outputs to give the controller some visual feedback. 2 potentiometers give analog control, depending on the app the pots are assigned to tempo, MIDI velocity, pitch, and scrolling (making the avaible grid space larger than 4×4). An x/y accelerometer and an x/y gyroscope add some playful, gestural control to the device; most of the apps implement a “shake to erase” control and several respond to tilt in various ways. It boots up into 7 different apps (described below), though it has the potential to boot up into 16 total. This device is primarily a MIDI controller, but I’ve also written an app that allows you to pull the button and analog data into MaxMSP and to control audio.

Sugarcube MIDI Controller

This controller was inspired by both the monome and tenori-on. When I was in college, I built a large touchscreen display, based on the Arduinome monome-Arduino clone schematics and code, that worked with all the open source monome applications written in MaxMSP. There are a ton of people building their own monome-type devices using these buttons from Sparkfun and the Arduinome code, as well as a few variations on the theme. With this project, I was interested in making a device that was a little more self-contained and relatively cheap to make (lots of buttons = lots of $). In keeping more with the concept of the tenori-on, this controller does all its app processing itself, it does not rely on a computer to process button presses/analog controls into MIDI. This means you can plug it directly into a synth or any device that understands MIDI and you’re good to go, no computer required. It runs off a beefy LiPo battery that keeps it running for days on a charge, so it’s fairly portable as well. In keeping with the monome side of things, it’s totally open source and can be adapted to your particular audio setup/needs. All the Arduino code is up on github (click the cloud-shaped button to download), along with a MaxMSP patch that decodes data from the controller into something usable in Max.

An overview of the apps I’ve written so far:

Pixel Tilt – One pixel moves across a 2D keyboard with tilt, triggering MIDI as it moves. Control velocity and basenote with pots.

Flin – Music Box app based on monome. Speed and velocity of notes controlled by y tilt. Paging across 16 “lanes” with pot. Shake to erase.

Serial Communication with MaxMSP – Pull data from buttons and analog controls into MaxMSP and use Max to send LED states. Supports 5 bit analog controls for x/y accelerometer and 2 pots. This is great if you want to run audio processing applications with the controller. Download SerialDemo app (SerialDemo.maxpat, included with the Arduino files, click the cloud-shaped button here) to parse data in Max. Beat slicer (shown above) app is included with the Arduino files as well.

Arpeggiator – Plays a two, three, or four note arpeggio, similar to this app I wrote for monome. One pot controls the speed of the arpeggio, another controls velocity. Notes within the arpeggio can be shifted up or down by one semitone via button controls. The whole arpeggio is transposed via x tilt. Press the leftmost note in the arpeggio to play the notes in ascending order, press the rightmost note in the arpeggio to play the notes in descending order, and press a middle note in the arpeggio to play the notes in a random order. Shake to erase.

Boiing – Bouncing pixels that generate polyrhythms, based on this tenori-on app. Bounce direction based on y tilt. Speed and MIDI velocity (loudness) controlled by pots. Shake to erase.

Step Sequencer – Four note 16 step sequencer. Pots control tempo and paging across sequence. Shake to erase.

MIDI Keyboard – Simple MIDI keypad. Control velocity and basenote with pots, pitchbend with x tilt.

Parts List:

(1x) Button Pad 4×4 – LED Compatible Sparkfun COM-07835
(1x) Button Pad 4×4 – Breakout PCB Sparkfun COM-08033
(1x) Arduino Uno Sparkfun DEV-11021
(1x) Accelerometer/Gyro 5 Degrees of Freedom Sparkfun SEN-11072
I put a 3-axis accelerometer and 2 axis gyroscope in this controller to give it some gestural control, but so far I haven’t actually used the gyro in any apps, and I’ve only got the x and y axis of the accelerometer wired up. That means you could sub in a simpler/cheaper part like this.

(16x) White 5mm LED (3mm is fine too) Digikey C513A-WSN-CV0Y0151-ND
(2x) 74HC595 shift register Digikey 296-1600-5-ND
(1x) 74HC165 shift register Digikey 296-8251-5-ND
(3x) 16 pin IC socket Digikey A100206-ND
(16x) 1N4148 Diode Digikey 1N4148FS-ND
(4x) current limiting resistors (value will depend on LEDs, sample calculation included in step 5)
(4x) 10kOhm 1/4watt resistors Digikey CF14JT10K0CT-ND
(1x) 220Ohm 1/4watt resistor Digikey CF14JT220RCT-ND
(1x) 5-Pin MIDI Jack Digikey CP-2350-ND (optional – explained in step 27)
(1x) USB type B female jack Digikey 732-2734-ND (optional – explained in step 27)
(2x) 10kOhm linear taper potentiometer Digikey 987-1308-ND

(1x) 16 conductor ribbon cable Jameco 28RC16-10VP
(1x) 16 pin right angle connector Jameco 746285-3
(6x) male header pins Jameco 103393

(1x) Midi Cable Radioshack 42-2149 (optional – explained in step 27)
(1x) Size N Panel-Mount Coaxial DC Power Jack with switch Radioshack 274-1576
(1x) Size N Coaxial DC Power Plug Radioshack 274-1573
(1x) SPST Toggle Switch Radioshack 275-634

(1x) Li-Ion 7.4V Tenergy 2200mAh Rechargeable Battery module with PCB Amazon
(1x) Tenergy Universal Smart Charger for Li-Ion/Polymer battery Pack (3.7V-14.8V 1-4 cells) Amazon
(1x) MIDI to USB cable Amazon (optional – explained in step 27)

(2x) Aluminum knobs Newark 74M6717

22 Gauge Wire, various colors Jameco #9313-0-R
electrical tape Radioshack 64-2373
wire cutters
wire strippers
wood/acrylic/project enclosure (I used this 6″x6″x2″ bamboo box The Container Store)
double sided foam tape Amazon

Step 1: Schematic and Overview

All schematics for this project are shown above. Detailed overviews of the 74HC595, 74HC165, and power connections are given later in this Instructable. All the Arduino pin connections are listed below:


0 – Gyroscope Y (Y4.5)
1 – Potentiometer 1
2 – Gyroscope X (X4.5)
3 – Accelerometer Y (YAcc)
4 – Accelerometer X (XAcc)
5 – Potentiometer 2


0 – serial in – this must remain unconnected
1 – serial out – this is hooked up to the MIDI output
2 – 74HC165 data pin (Q7)
3 – 74HC165 clock pin (CP)
4 – 74HC165 latch pin (PL)
5 – 74HC595 clock pin (SH_CP)
6 – 74HC595 latch pin (ST_CP)
7 – 74HC595 data pin (DS)

no connections to digital pins 8-13

Step 2: Solder LEDs to Sparkfun PCB

Thread the leads of 16 LEDs (5mm or 3mm are fine, I used 5mm) through LED holes in the Sparkfun PCB. These boards are compatible with 4-lead RGB LEDs, so there are four available holes on each button pad. You can use the two center holes for single color LEDs (see figure 3). Be sure that the flat edge of the LED (the cathode) lines up with the flat marking on the PCB.

Solder the LED leads and cut away the excess wire.

Step 3: Solder Diodes to Sparkfun PCB

Solder 16 diodes to Sparkfun PCB. Be sure to line up black marking on diode (cathode) with the stripe on the PCB.

Step 4: Ribbon Cable

Cut about 1ft of 16 conductor ribbon cable. Separate and strip the ends of all 16 wires on one side and solder to Sparkfun PCB. The following list gives all the colored conductors in order with the name of the PCB hole they should be soldered to, if you do this correctly none of the wires should cross. Note that since I’m only using a single color LED, I’ll wire up only the “blue” anode.


one side of ribbon cable
Brown SWT-GND1
Orange SWT-GND2
Yellow LED-GND2
Green SWT-GND3
Purple SWT-GND4
White BLUE4
Brown BLUE3
Orange BLUE2
Yellow SWITCH2
Green BLUE1
other side of ribbon cable

Step 5: Clamp Socket

Use a bench vice to clamp the16 pin socket on the ribbon cable. If you do not have a bench vice do not use pliers do this, you will clamp the socket on sideways and mess up the connections. You’re better off using a hammer to tap the clamp shut, just make sure you are always applying pressure evenly across the socket.

Be sure the clamp the socket on the ribbon cable in the same orientation indicated in the images above.

Step 6: Multiplexing with Arduino and 74HC595

Two 74HC595s (wired in parallel) will be driving all the LEDs in the project as well as providing power to all of the buttons. The 74HC595 is an 8 bit serial in parallel out shift register. I’ve written a detailed tutorial about multiplexing with the 74HC595, and you can find more info about this chip on its datasheet. Please note that the 74HC595 drawn in the schematic is not a pin diagram, I have rearranged the order of the pins to make the circuit diagram more clear. The pin diagram for the chip is shown in fig 4.

The 74HC595 has the following pins (the technical name may be one of several things depending on which data sheet you are reading):

Position Common Name Technical Name

1 parallel output 2 QB or Q1
2 parallel output 3 QC or Q2
3 parallel output 4 QD or Q3
4 parallel output 5 QE or Q4
5 parallel output 6 QF or Q5
6 parallel output 7 QG or Q6
7 parallel output 8 QH or Q7
8 ground GND
9 serial data output QH’ or Q7′ or Q7S
10 master reset (active low) MR(with a line on top) or SRCLR(with a line on top)
11 clock pin SH_CP or SRCLK
12 latch pin ST_CP or RCLK
13 output enable (active low) OE(with a line on top)
14 data pin DS or SER
15 parallel output 1 QA or Q0
16 5 volts supply VCC

The connections between the 74HC595 and the sparkfun board are shown in the schematic and repeated below:

74HC595 Sparkfun Breakout Board

Q0 BLUE 4 and SWITCH 4
Q1 BLUE 3 and SWITCH 3
Q2 BLUE 2 and SWITCH 2
Q3 BLUE 1 and SWITCH 1
Q4 LED GND 4 (via current limiting resistor)
Q5 LED GND 3 (via current limiting resistor)
Q6 LED GND 2 (via current limiting resistor)
Q7 LED GND 1 (via current limiting resistor)

The remaining pins have the following connections to the Arduino (also shown in schematic):

74HC595 Arduino

Vcc 5V
DS Digital Pin 7
OE(line on top) GND
ST_CP Digital Pin 6
SH_CP Digital Pin 5
MR(line on top) 5V
Q7′ no connection

Step 7: Header Pins

Solder two rows of eight header pins to the protoboard. This is where the ribbon cable socket will attach to the board.

Step 8: Current Limiting Resistors

The 74HC595 will be driving the LEDs in the sparkfun board. However, this chip only outputs 0 or 5V and it can output as much as 70mA. This means we must use current limiting resistors to prevent damaging the LEDs.

From the specs of the LEDs I used:
max forward current: 30mA
forward voltage: 3.2V

Calculate the resistance needed to achieve these max ratings from V = IR:
resistance = (5V-3.2V) / (0.03A)
= 60 ohms

I used 68 ohm resistors so that I was not running at the absolute maximum, but also ensuring that I wouldn’t lose too much brightness. (I made a mistake a grabbed the 100KOhm resistors when I made this project, I fixed it later, but the stripes of 100Ohm resistors should be blue, grey, black, gold, ignore the colors in the images).

These are the sample calculations for the specific LEDs I used, you’ll need to do you own calculations based on the specs of your LEDs. If you are unsure of what to do, use 220ohm or higher resistors; using too much resistance will make the LEDs less bright, but they will not be damaged.

Solder four resistors to the protoboard as shown in the images. Connect the leads of the resistors to their adjacent header pins with solder (figure 2).

Sugarcube MIDI Controller schematic

Step 9: 74HC595 socket

Solder an 8-pin socket to the protoboard as shown in the images above.

Step 10: Connections to LEDs

As shown in figure 6, the output pins (Q0-Q7) are located on pins 1-7 and 15. This image was taken from the datasheet of the 74HC595. Connect the resistors to pins 4-7 with jumper wires as shown in figures 1 and 2. Connect pins 1-3 and 15 to the header pins according to the schematic (note the wiring in the image is incorrect, but the schematic is correct). The pins connections to the 74HC595 should be as follows:

Pin 15 – Blue 4
Pin 1 – Blue 3
Pin 2 – Blue 2
Pin 3 – Blue 1
Pin 4 – LED GND 4
Pin 5 – LED GND 3
Pin 6 – LED GND 2
Pin 7 – LED GND 1

Be sure to get these pin connections correct- do this part slowly and refer to the schematic often.

Make sure to electrically join all these connections with solder on the underside of the board (figs 2 and 4)


For more detail: Sugarcube MIDI Controller

Clip to Evernote

Leave a Comment

(Spamcheck Enabled)

Read previous post:
Arduino Display
Fun Shway Display using an Arduino

Build a nice looking LCD display with buttons for mounting on the wall. Key Features: 2 line by 24 character...

Scroll to top