The Tinkerer

One day end of 2015 I stumbled upon some pretty kewl voxel art by Metin Sevin. Amongst many others like Mario Bros, Pacman, or Donkey Kong, I was immediately fascinated by the 3D rendered Bruce Lee Commodore 64 game tribute picture. I contacted Metin and asked him if his work is for sale and he kindly pointed me to society6 where a lot of his art is available in various formats. If you are interested in Metin and his work you can find out more in this interview at the end of this blog post. Due to some other planned projects based on Ikea Ribba frames I had one 23x23cm frame on stock so the 8″x8″ Bruce Lee art print would fit just fine. Shipment from Illinois/USA took about two weeks and I was ready to go for my art project!

tl;dr Watch the video to see what this project is about. Making of with gory details below video.

Project Description

Take the 8″x8″ Bruce Lee art print and put it in a 23x23cm Ikea Ribba frame. Use an Arduino to play the C64 Bruce Lee game title music at 12am and 7pm. Announce every hour starting with the first 3secs of Carl Douglas’ Kung Fu Fighting song and indicate the current hour by an according number of Yamo’s calls (the green Sumo in the game). Announce a quarter past, half past, and a quarter to with the Ninja’s stick strike sound ringing out once, twice, or thrice, respectively. Finally, add a capacative touch sensor to cycle through all Bruce Lee game sounds by touching one corner of the Ribba frame.

Payload

1 x 8″x8″ Bruce Lee art print from society6.
1 x RIBBA frame from Ikea seems no longer to be available. You could use a 25×25 cm Sannahed frame as a replacement.
1 x Visaton K28.40 8Ω, Price comparison idealo
1 x Arduino Nano e.g. from eBay
1 x LM386 Audio Amplifier Module e.g. from eBay
1 x DS3231 Real Time Clock (RTC) e.g. from eBay
1 x CR2032 battery for DS3231 RTC
1 x SD Card Module e.g. from eBay
1 x SD Card 1GB is sufficient
1 x 5V 1A power supply

Cables, solder and iron, hot-melt gun, screws, (cordless) screwdriver, drill, side cutter, etc.

A 1GB SD would have been sufficient since the WAVE files are very small. Unfortunately, I threw away old small capacity SD cards years ago “…when should I ever need a one or two GB SD card again?” Well, now I know the answer. Thus, I had to use an 8 GB SD card.

Audacity will be helpful to recode the Bruce Lee tunes to the required format.

Howto

Order the Bruce Lee voxel from society6. Wait approximately two weeks until it arrives; might heavily depend on where the item is shipped to. 😉 While waiting: a] Buy a 23x23cm RIBBA frame at your local Ikea. b] Prepare the necessary electronics and code to get the thing up and running.

Hardware

For the hardware part: Glue the required components, i.e. Arduino Nano, amplifier, SD card module, DS3231 RTC w/ CR2032 battery to the back of the RIBBA frame. It might look like this.

NB: This was my first shot with the loudspeaker directly glued to the backside as can be seen in the photo. My assumption that the – sort of abyssal – RIBBA frame will act as a good resonator
WAS WRONG. When I hung up the picture on the wall for the first time you could barely hear anything. The loudspeaker radiating directly to the wall was nearly completely muted since the sound waves cannot escape the frame.

New solution: Drill a plethora of holes into the bottom part of the frame and attach a (smaller) loudspeaker so that its sound waves can go through the holes. There are roughly 3 cm space between the backside (with the components) and the wall-facing side of the frame. Thus, I needed a speaker with a radius of max(3cm). I found an fairly good sounding 2,8x4cm rectangular-shaped speaker from Visaton that would fit snuggly into the available space (cf. picture).

I created a drill template with the speaker’s exact dimensions by laying a piece of paper on top of it and tracing its contours with a pencil. Old school but works! After that I drew a mesh pattern with a lot of drill holes. That could have been the maiden trip for my drill press…but I went with the cordless screwdriver that did a nice job on drilling the 90+ holes. The template was fixed with sticky tape to the frame before drilling. I covered the whole template with tape to avoid frayed drill holes. This worked pretty good on the template side but not on the inside of the frame. The RIBBA frame is made of chipboard so I lost quiet some material while drilling. You can see in the picture that the inside is not flat anymore but sort of curved due to the lost material. Next time I would apply sticky tape to the inside too.

The holes needed some afterwork, i.e., burring and removing frayed pieces. The pictures do not show the final stage of afterwork so you will have to trust me that the result was ok. Especially, since the holes are on the bottom side that will, most likely, hardly been seen or looked at when the frame is hanging on the wall. I was happy with the result and moved on to screw the Visaton speaker into the frame with four black and tiny flat-head screws that were giving me a hard screwing time.

This is how the final setup looks like.

Note the blue cable going to the upper left corner?

This is the capacitive touch sensor wire. It is basically a piece of zinc coated copper wire bent to a 90° angle and sticked exactly to the corner of the frame using super glue. It was then painted black and soldered to the blue cable to have it connected to the Arduino. With this switch I would later be able to play all Bruce Lee game tunes one after another by repeatedly touching the bottom left corner of the frame. Actually, the ADCTouch-Library used is doing such a great job that the Arduino can react to a finger (or a hand, or some other body part) just coming near to the wire. You can measure changes in the wire’s capacity without even touching it. Awesome!

What’s missing? Yes, details on the wiring. The correct wiring might be hard to find out by just looking at the pictures, not least since my wire color scheme is a bit, eh, inconsistent. So here’s a Fritzing breadboard view of the wiring.

That should cover the most important aspects of the hardware. But all this hardware is nothing without software. Let’s move into the matrix.

Software

Code is poetry

There are more lines of code in the Arduino sketch (GitHub) than needed to implement the behaviour as described in the Project Description. Nonetheless, some of the code is helpful for debugging purposes and some other for fiddling with the TMRpcm Library.

This library is used “for asynchronous playback of PCM/WAV files direct (sic!) from SD card”. The WAVE files must be in a specific format, i.e., 8-bit, 8-32khz Sample Rate, mono. Thus, do not expect Hifi quality! I wrote a separate article WAV-Dateien von SD-Karte mit Arduino abspiele where you will find the gory details about the required file format, how to convert, e.g., an mp3-file using Audacity into this specific WAV-format, how to format the SD card – if required, how the WAV-files have to be named on the SD card (8.3. SFN – short file name from the good ol’ MS-DOS times), and a short Arduino sketch to test the TMRpcm lib.

The ADCTouch library is required for utilizing capacitive touch sensors without any additional hardware.

Debugging with “Serial.print()” is not that funny so we’re using the Streaming library to provide a C++ like << operator that allows constructs like Serial << F( "Current volume is " ) << gVolume << "." << endl; which is very convenient. NB: With the macro F() you put strings in an Arduino's flash memory instead of the sparse static RAM (SRAM) leaving more space for variables and such. The ATmega328 chip found on the Uno has the following memory:

Flash  32k bytes (of which .5k is used for the bootloader)
SRAM   2k bytes
EEPROM 1k byte

Flash is plenty but SRAM isn't - so there is reason to always save SRAM!

Finally, we need the DS3232RTC and Time library to handle the real time clock. Europe will not let go of the daylight saving time (DST) idiocy. Summer time is switched on at the last Sunday in March where 2 o'clock becomes 3 o'clock. Vice versae at the last Sunday in October where 3 o'clock becomes 2 o'clock. We have to recognize the DST so the Bruce Lee cookoo works both in summer and winter. 😉 Thanks to user "jurs" from the German Arduino Forum we have a great European daylight savings time calculation function fIsSummertime() that returns "true" when we're in summer time and false if not.

The Arduino sketch

Sketch also available on GitHub in the RIBBAttacking-Bruce-Lee repository.

Interview with the artist

Metin and I had a nice e-mail-chat while the project was ongoing. There are quiet some analogies in our CVs like being born in the 1970s, growing up with 8-bit computers, adjusting the datassette's azimuth with a screwdriver, hanging out at arcade halls, and - of course - liking minimalistic pixel graphics. Here is short interview with Metin to get you in touch with him as a digital artist and his voxel creations.

Metin, who are you?
My name is Metin Seven, I was born in the 1970s, and grew up in the 1980s with the first 8-bit and 16-bit generations of game consoles and 'home computers', particularly the Atari 2600, CBS ColecoVision, Commodore 64 and Commodore Amiga.

What is your artistic spectrum, i.e., what kind of art do you make/prefer?
I'm a die-hard digital artist. I used to draw on paper as well, but I prefer the flexibility of the digital screen. I started creating pixel art for Amiga demos in the late 1980s. That soon evolved into creating pixel graphics for commercial games, television commercials and children's animation series in the 1990s, all done using software like Deluxe Paint and Personal Paint on an Amiga. Since the late 1990s I've shifted towards 3D graphics creation, but pixel art will always keep a special place in my heart.

Why retro games and what is your reference to this genre?
Ever since I was a little kid I was enchanted by the magic glow of the digital screen. I used to hang out at arcade halls, playing the first 8-bit games, such as Donkey Kong, Lady Bug, Pac-Man and Pengo. When I was not playing them myself, I could stare at people playing the games for hours. The first pixel graphics had this pure, iconic quality because of the low resolution restrictions for sprites and such. It's great to see that atmosphere return in the current wave of minimalistic pixel art games for mobile devices.

Did you have decent experiences with the C64?
Definitely. During my school days I spent just about every afternoon and evening playing Commodore 64 games, first loading them using the Datassette tape recorder, adjusting the azimuth when necessary. After a while I bought a floppy disk drive. LOAD "*",8,1 😀

How did you come to create voxel pictures? Where does the idea come from?
During the 2000s I created a lot of stylized 3D illustrations for printed magazines and newspapers. My use of shapes and colors reflected my game pixel art background, and gradually my illustration style became more elementary, until I arrived at a point that fully made sense — a blend between pixel art and 3D artwork: voxels. It was then that I decided to start paying tributes to my childhood love: 8-bit and 16-bit games.

Can you tell us something about the voxel creation process?
My first voxel images were created in 3ds Max in the mid-2000s, extruding blocks of quadrangular polygons. That was quite a hassle, and I was eager to find a dedicated voxel editor. I found that in the shape of Paint3D for Windows. I got in touch with the coder and suggested a number of features, which he kindly implemented.

When I switched to Mac OS X in 2014, I started using Qubicle, also a versatile voxel editor. I guess MagicaVoxel would be the tool of my choice today, but to be honest I've become a bit saturated when it comes to voxel creation, although there’s a good chance I'll return to it some day.

Where should we go if we'd be interested in more from you?
The best starting place is my portfolio site metinseven.com, there you will find links to my online shops, offering 3D prints, 2D art prints, stock 3D models and stock illustrations.

Many thanks for this interview, and my sincere compliments to you regarding your clock creation based on my voxel tribute to the classic 8-bit Bruce Lee game.

The pleasure was all mine! Keep on the good work!

i.f.

Eins gleich vorweg: Hifi-Qualität darf man von der hier beschriebenen Lösung nicht erwarten. Aber als Low-Budget-Player für einfache Zwecke reicht es auf jeden Fall. Habe ich beispielsweise hier im Kunstprojekt RIBB@TACKING Bruce Lee – a C64 game tribute and homage verwendet.

Was man braucht

Natürlich einen Arduino; der hier beschriebene Aufbau wurde mit einem Uno getestet. Alle 328er basierten, also auch Nano, LilyPad, Pro etc. sollten gleichermaßen funktionieren.

Da die WAVE-Dateien irgendwo abgespeichert sein müssen, bietet sich ein SD Kartenleser an. Es gibt Breakout Boards mit Micro-SD-Karten Slot oder andere Shields, auf denen solch ein Slot bereits integriert ist, bspw. das Ethernet-Shield. Hier kommt ein sehr einfacher 1 EUR SD-Kartenleser von eBay zum Einsatz. Dazu eine (alte) SD Karte.

Damit man etwas hört, braucht es einen Verstärker. Bryan beschreibt in diesem Blog-Artikel, wie man mit einem einzigen Transistor nebst Widerstand (4,7 kOhm) einen simplen Verstärker zusammenschustert. Der BC548B hat nicht ausreichend verstärkt. Mit dem 2N3904 (eBay) macht es mehr Spaß.

Dazu natürlich ein Lautsprecher, da hatte ich noch einen mit 0,25 Watt 4 Ohm auf Halde liegen.

Verkabelung / Aufbau

Die Anbindung des SD-Kartenlesers erfolgt über die Hardware SPI Pins des Arduino. Welche Pins das genau sind, hängt vom Arduino-Typ ab. Die hier gezeigte Verkabelung sollte für alle 328er Typen (Nano, Uno, etc.) funktionieren. Chip Select ist frei wählbar; vgl. auch der weiter unten stehende Arduino Sketch. Die Schaltung auf dem Breadboard ist der erwähnte Ein-Transistor-Verstärker. Wenn man hier den Widerstand zwischen Arduino-Ausgang (Pin 9) und der Transistorbasis zu klein wählt, kann man nach kurzer Zeit auf dem Transistor Eier braten, da zu viel Strom durch die Collector-Emitter-Strecke fliesst.

Wagemutige können den Widerstand einfach mal ganz weglassen und sich an einer, dann, recht ordentlichen Beschallung nebst Transistorheizung erfreuen. Das sei hiermit also ausdrücklich nicht empfohlen.

In der Tabelle ist die PIN-Verkabelung noch einmal aufgeführt. Der verwendete SD-Kartenleser hat zwei GND-Anschlüsse und funktioniert auch nur zuverlässig, wenn tatsächlich beide mit Masse verbunden werden. Der Lautsprecherausgang ist, ebenso wie Chip Select, über den Arduino Sketch frei wählbar (hier PIN 9).

Zwei Blog Posts haben bei Verkabelung und Inbetriebnahme gut geholfen. Zum einen dieser Beitrag bei maxoffsky.com sowie insbesondere diese Anleitung auf instructables.com.

Format der SD Karte

Die verwendete SD-Library unterstützt prinzipiell die Dateisysteme FAT16 und FAT32. Es wird jedoch empfohlen, wenn möglich, FAT16 einzusetzen. Bei mir hat’s mit einer FAT32-formatierten SD-Karte nicht funktioniert, daher wollte ich sie “mal eben” auf FAT16 formatieren. Das geht auch mit MacOS Bordmitteln, ist aber etwas komplizierter, als erwartet. Dieser Post im Adafruit-Forum beschreibt den Weg in Englisch; hier in knappem Deutsch:

1. SD-Karte in den Mac stecken.
2. Terminal-Fenster öffnen. Bspw. mit CMD+Space, dort “terminal” tippen und Return.
3. Geräte-ID finden. Dazu im Terminal df gefolgt von Return eingeben. Es erscheint eine Filesystem-Übersicht, die unter anderem die folgenden Informationen enthält. Ganz unten ist die SD-Karte “NO NAME” zu sehen. Wer auf Nummer sicher gehen will, gibt seiner Karte einen eindeutigen Namen. Dann kann man sie in dieser Übersicht schneller finden. Die in den folgenden Schritten benötigte Geräte-ID lautet /dev/disk3s1.

   Filesystem        Used Available Capacity   iused   ifree %iused  Mounted on
   /dev/disk1   909007896  65197032    94% 113689985 8149629   93%   /
   devfs              371         0   100%       642       0  100%   /dev
   map -hosts           0         0   100%         0       0  100%   /net
   map auto_home        0         0   100%         0       0  100%   /home
   /dev/disk3s1     20928   4172608     1%       512       0  100%   /Volumes/NO NAME
   

4. SD-Karte unmounten (nicht auswerfen!). Im Terminal diskutil unmount /dev/disk3s1 gefolgt von Return eingeben. Dabei disk3s1 natürlich durch die eigene Geräte-ID ersetzen. Erfolgreiches unmounten wird bspw. mit Volume NO NAME on disk3s1 unmounted quittiert.
5. FAT16 Filesystem auf SD-Karte schreiben. ACHTUNG! Der folgende Befehl löscht alle Daten auf dem Gerät. Wenn die Geräte-ID nicht die von der eingesteckten SD-Karte ist, sondern bspw. aus Versehen die der eingebauten Festplatte, dann wird diese gelöscht. U have been warned.
   Folgendes Kommando im Terminal eingeben und nicht vergessen die Geräte-ID anzupassen. newfs_msdos -F 16 /dev/disk3s1
   Ich habe alle Warnmeldungen, die der Befehl produziert hat, konsequent ignoriert und als Lohn der Mühe im Anschluß eine lauffähige FAT16-formatierte SD-Karte gehabt.

Format der WAVE Dateien

Die Library TMRpcm benötigt zum Abspielen die WAVE-Dateien im Format acht Bit, acht bis 32 kHz Sample Rate, mono. Im WIKI zur Library werden zwei Wege beschrieben, wie man iTunes oder Audacity verwenden kann, um aus dem musikalischen Quellmaterial das Zielformat zu generieren. Audacity ist prima, und so geht’s damit:

1. Hauptmenü “Tracks”, dort “Stereo Track to Mono” wählen.
2. Unten links die “Project Rate (Hz)” mit dem Popup auf 8000, 11025, 16000, 22050 oder 32000 setzen. Je niedriger die Sampling Rate, desto schlechter die Qualität.
3. Hauptmenü “File”, dort “Export Audio…” und im File Selection Dialog unten als Format “Other uncompressed files” wählen. Dann “Options…” klicken und als Header “WAV (Microsoft)” sowie bei Encoding “Unsigned 8-bit PCM” wählen. OK.
4. Datei mit “Save” speichern.

Dateinamen

Dateinamen müssen zwingend dem – aus alten MS-DOS Zeiten bekannten – 8.3-Format folgen, also maximal acht Zeichen für den Dateinamen gefolgt von Punkt und einer Endung mit drei Zeichen beispielsweise “NAME0001.EXT”. Der Dateiname kann kürzer als acht Zeichen sein, in keinem Fall aber länger. Die Wikipedia widmet dem 8.3 short filename (SFN) tatsächlich einen eigenen Artikel.

Arduino Sketch

Der folgende Sketch bindet zunächst die benötigten Libraries ein, definiert Chip Select- und Lautsprecherausgangs-PIN, initialisiert die SD-Karte mit SD.begin() und spielt im Erfolgsfall die Wave-Datei snakec16.wav direkt von der SD-Karte ab. Im Fehlerfall wird eine kurze Meldung über den seriellen Monitor ausgegeben.

#include 
#include 
#include 
#define CHIP_SELECT_PIN  4
#define SPEAKER_PIN      9
TMRpcm tmrpcm;

void setup( ) {
  tmrpcm.speakerPin = SPEAKER_PIN;
  Serial.begin( 9600 );
  while ( !Serial ) /*mt*/ ;
  if ( !SD.begin( CHIP_SELECT_PIN ) )
    Serial.println( "SD fail" );
  else {
    tmrpcm.play( "snakec16.wav" );
    delay( 5 );
  }
}

void loop( ) {
}

Wenn alles läuft…

…dann sollte das in etwa so aussehen, wie in dem Video.

Bei eBay, Aliexpress & Co. gibt es zahnlose Mini-OLED-Displays, beispielsweise für den Betrieb an einem Arduino. Dabei sind die gängigen Größen 0,96 Zoll und 1,3 Zoll mit Auflösungen von 128 x 64 oder 128 x 32 Pixeln. Die Displays sind selbstleuchtend und werden in weiß, blau, gelb, Kombinationen davon oder auch “full color” angeboten. Die Full Color Displays stellen dann üblicherweise 65K Farben dar.

Es werden unterschiedliche Kommunikationsprotokolle unterstützt, in der Regel entweder I2C oder SPI oder beides. Dazu kommen unterschiedliche Driver Chips, für die die richtige Library benötigt wird, um das OLED ansteuern zu können. Gängig und gut unterstützt ist der Driver Chip SSD1306, der u.a. mit den folgenden beiden Libraries angesteuert werden kann: Adafruit_SSD1306 (github) oder U8glib (github). Wer ein OLED mit SS1106 Driver Chip erwischt hat, kann es mit der SH1106_SPI Library (github) versuchen.

Dieser Post zeigt den Anschluß und Betrieb eines einfachen, weißen 0,96″ Zoll OLED Displays (eBay) mit SSD1306 Driver Chip und sieben Anschluss-Pins an einen Arduino Uno. Nano, und alle weiteren Modelle mit ATmega328 Pinout, dürften auf dieselbe Weise angesteuert werden können. Im Zweifel das Datenblatt des Arduinos zu Rate ziehen.

Im folgenden Video ist das OLED im Einsatz zu sehen. Die Chord-Animation ist von Hari Wiguna, sein Kode steht auf GitHub bereit.

Um ein OLED erfolgreich ansteuern zu können, ist die richtige Verdrahtung zwischen Arduino und Display wichtig. Dabei wird es durch die Tatsache, dass die Displays mit unterschiedlicher Anzahl und Beschriftung der Pins geliefert werden nicht einfacher. Die Libraries erlauben üblicherweise die Verwendung von Software oder Hardware SPI, wobei letztere Variante deutlich schneller ist. Hardware SPI erfordert mehr Anschluss-Pins als Software SPI.

Das im Video gezeigte 0,96″ Display ist zur Ansteuerung durch Hardware SPI entsprechend der Tabelle mit dem Arduino zu verbinden. Bitte unbedingt prüfen, ob das eigene Display für 5V ausgelegt ist! Im Zweifel am 3,3V Pin anschließen und erst einmal damit versuchen. Die “Was ist das?”-Spalte in der Tabelle zeigt die ausgeschriebenen, gängigen oder alternativen Bezeichnungen der Anschlüsse; vielleicht hilft es dem einen oder anderen bei der Verkabelung. Ich fand diesen Beitrag von paulwb im Adafruit-Forum sehr hilfreich, um das Display nach einigen erfolglosen Versuchen endlich zum Laufen zu bringen.

Hier noch der Arduino-Sketch zur Darstellung der Animation wie im Video.

#include 
#include 
#include 
#include 

/* Wiring for Hardware SPI
    GND ------- ground
    VCC ------- 5V
    D0 -------- 13 hardware SCK
    D1 -------- 11 to hardware MOSI
    DC -------- 6 (user choice, defined below)
    DS -------- 7 (user choice, defined below)
    RST ------- 8 (user choice, defined below)
  Hardware MISO (12) unused */

#define OLED_DC     6
#define OLED_CS     7
#define OLED_RESET  8
Adafruit_SSD1306 display( OLED_DC, OLED_RESET, OLED_CS );

void setup( ) {
  display.begin( );
  display.clearDisplay( );
  display.display( );
}

int nFrames = 36;
void loop() {
  for ( int frame = 0; frame < nFrames; frame++ )
    HariChord( frame );
  for ( int frame = ( nFrames - 1 ); frame >= 0; frame-- )
    HariChord( frame );
}

void HariChord( int frame ) {
  display.clearDisplay( );
  int   n   = 7;
  int   r   = frame * 64 / nFrames;
  float rot = frame * 2 * PI / nFrames;
  for ( int i = 0; i < ( n - 1 ); i++ ) {
    float a  = rot + i * 2 * PI / n;
    int   x1 = 64 + cos( a ) * r;
    int   y1 = 32 + sin( a ) * r;
    for ( int j = i + 1; j < n; j++ ) {
      a  = rot + j * 2 * PI / n;
      int x2 = 64 + cos( a ) * r;
      int y2 = 32 + sin( a ) * r;
      display.drawLine( x1, y1, x2, y2, WHITE );
    }
  }
  display.display( );
}