TFT MIDI Display – Part 3

This display is inspired by the sound and light show at the end of Close Encounters of the Third Kind.  It uses the TFT MIDI Display once again.

Warning! I strongly recommend using an old or second hand keyboard for your MIDI experiments.  I am not responsible for any damage to expensive instruments!

These are the key Arduino tutorials for the main concepts used in this project:

• Arduino MIDI Library
• Adafruit ST7735 Library
• Adafruit GFX Library
• Arduino and Cheap TFT Display

If you are new to Arduino, see the Getting Started pages.

Parts list

• Arduino Uno
• ST7735 based 1.8″ display (for example, this one from Adafruit)
• MIDI In Interface (see: Arduino MIDI Interfaces)
• Breadboard and jumper wires
• Optional: Stripboard, jumper wires and headers

The Circuit

This is using the same circuit as described in TFT MIDI Display.  I’m using my “shield” for mounting the display and have hooked it up to my USB MIDI module so I can use my Korg Minikeys as usual.

The Code

The Adafruit graphics library GFX once again gives us everything we need to get a nice graphical display up on the screen.  This time I’m using coloured rectangles to get my display, with each rectangle corresponding to a MIDI note in seven rows of twelve notes, each row corresponding to an octave starting on an A.

This display is inspired by the sound and light sequence at the end of the film Close Encounters of the Third Kind.  I wanted to reproduce the display as accurately as possible, but on watching the sequence several times concluded it isn’t really an obvious sound to visual mapping, in fact I’m pretty sure some colours and positions are repeated for different notes.  So instead I went with a display “inspired by” the film. I also added an extra row to get a wider range of notes.

All the parameters associated with the positioning of the rectangles are calculated from constant values near the start of the code.  The “grid” is drawn as a single large rectangle and then “blank” (black) note rectangles are drawn over the top.

The colour is calculated according to the position in the table, with “more blue” to the left, “more red” to the right and “more green” towards the bottom.  I’ve defined a couple of “macros” in the code (i.e. coding shortcuts) to help define colours using the 16-bit “red green blue” mapping used by the Adafruit graphics library.

// Colours are defined using a 16-bit pattern:
// RRRRR-GGGGGG-BBBBB i.e. 5-6-5 bits
// Red = 0 to 31
// Green = 0 to 63
// Blue = 0 to 31
//
// The following is a MACRO which creates a short-hand piece
// of code to create the right colour bit-pattern from the
// R, G and B parts. There is no checking here that RGB are
// in the above ranges though.
//
#define C_RGB(r,g,b) ((uint16_t)(((r)<<11)+((g)<<5)+(b)))
#define C_LINES C_RGB(10,20,10)
#define C_BACKGROUND C_RGB(0,0,0)

The “C_RGB” macro takes a red, green and blue value and shifts the numbers into the right bit positions to give a 5-bit red, 6-bit green, and 5-bit blue combined number.  This is used later in the code when calculating the colour associated with positions in the table.

Here is the “print note” function that works out the row and column associated with each MIDI note, then uses these to create the colour value.

void printNote (uint8_t note) {
  if ((note < LOWEST_NOTE) || (note > HIGHEST_NOTE)) {
    return;
  }

  // Calculate the row and column for the note.
  // Note: As we want the lowest notes at the bottom,
  // need to "invert" the row number by taking
  // it away from the number of rows.
  //
  int r = ROWS-1-(note-LOWEST_NOTE)/COLS;
  int c = (note-LOWEST_NOTE)%COLS;

  // Calculate the colour as follows:
  // Red = based on X position (>X more red)
  // Blue = based on X position (<X more blue)
  // Green = based on Y position
  //
  // All scaled to 0 to 31 (RB) or 0 to 63 (G)
  //
  uint16_t cr = c*31/COLS;
  uint16_t cg = r*63/ROWS;
  uint16_t cb = 31-(c*31/COLS);
  drawNoteRect(r, c, C_RGB(cr,cg,cb));
}

Here is the full set of colours – kind of – it wasn’t easy to get a good photo!  This is shown for ten seconds on startup as a test.

To clear each note again, it just uses the same row/column calculation and draws a black rectangle.

Find it on GitHub here.

Closing Thoughts

I was hoping to get something a bit more authentic to the original film effect, but it just isn’t really a logical sequence between sound and visuals as far as I can see – and nothing I’ve found on the Internet enlightens me further.

In the end I’m really pleased with how the colour mapping worked out.  This would be a fun display to play some of my LoFi Orchestra MIDI files through.

Kevin