Erstellen Sie Ihr eigenes MIDI-Generated Echtzeit Visuals mit openframeworks

Do you want to create a simple desktop app that generates realtime animations using MIDI data? Then you're in the right place and Liam Lacey is here to show how using openFrameworks.  

Als Musiker unter Einbeziehung projizierten Visuals in Ihrer Performances ist ein sicherer Weg zur Verbesserung der Erfahrung für Ihr Publikum. Es gibt viele Video Jockey und Projection Mapping-Software-Anwendungen, dies zu tun, wie zum Beispiel ausgelegt Resolume Arena oder ArKaos GrandVJ, die Künstler, die auslösen und ermöglichen die Steuerung Video, Grafiken und Animationen in Echtzeit sowie die Synchronisierung sie zu Musik. Die meisten dieser Anwendungen können über MIDI gesteuert werden, so dass sie extrem nützlich, um Musiker, die bereits mit MIDI in ihren Shows. Allerdings ist die MIDI-Integration oft recht begrenzt und kann nicht können Sie steuern, die Visuals genau, wie Sie wollen. Ein Weg, um dies wäre, um Ihre eigenen kundenspezifischen Software-Anwendung erstellen

In diesem Tutorial, Ich

Resolume Arena 4 projection mapping software 

Resolume Arena 4 Projektion Mapping-Software.

Die Plattform, die wir hier verwenden werden, wird als openframeworks (oft der abgekürzten)

Live Visuals at Roskilde Festival 2014, Denmark, by Johan Bichel Lindegaard, partly made using openFrameworks

Live Visuals am Roskilde Festival 2014, Dänemark, von Johan Bichel Lindegaard, teilweise unter Verwendung von openframeworks.

Bevor wir anfangen, hier ist ein einfaches Beispiel für das, was wir machen werden

Was Sie benötigen:

Step 1—Installing your IDE

Zunächst müssen Sie Ihre IDE installieren. Installation von Xcode auf OS X ist einfach

Step 2—Installing openFrameworks and ofxMidi

Zur Installation von, bewegen Sie einfach die heruntergeladene des Ordners in einem beliebigen Ort auf Ihrem Computer. Um ofxMidi zu installieren, müssen Sie den heruntergeladenen ofxMidi Ordner in den Addons Verzeichnis innerhalb Ihrer Ordner.

Step 3—Setting up the oF Project

Weiter benötigen Sie, um für Ihre IDE ein Projekt einzurichten, so dass Sie Ihre Anwendungs ​​entwickeln. Um dies zu tun, von Nutzen

  1. Stellen
  2. Stellen Sie sicher
  3. Stellen Sie sicher
  4. Klicke auf
  5. Klicken

openFrameworks Project Generator application

openframeworks Projekt Generator-Anwendung.

Es sollte jetzt ein neuer Ordner in der openframeworks / apps / MyApps Verzeichnis für Ihr neu erstelltes Projekt.

Step 4—Adding the Code

Als nächstes müssen Sie Ihr neu erstelltes Projekt zu öffnen, und fügen Sie einen Code, um es:

  1. Öffnen Sie Ihre IDE-Anwendung (Xcode oder Code :: Blocks).
  2. Gehe zu
  3. Wählen Sie die Projektdatei (die Xcodeproj Datei für Xcode oder .workspace für Code :: Blocks) und klicken Sie auf
  4. In der IDE navigieren Sie zu der linke Spalte / Fensterbereich, wo es sollte ein Symbol neben Ihrer Projekte Name sein. Klicken Sie auf das Dreieck oder

The Xcode (left image) and Code::Blocks (right image) project navigator where you will find the source code files

Die Xcode (linkes Bild) und Code :: Blocks (rechtes Bild) Projektnavigator, wo Sie die Quellcode-Dateien zu finden.

  1. Laden Sie die Codes für dieses Projekt von hier.
  2. Den Inhalt ofApp.cpp und ofApp.h in Ihrem IDE mit dem Inhalt der neu heruntergeladenen Dateien zu ersetzen. Um diese Dateien zu Xcode nur einem Klick auf sie aus dem Baum-Ansicht zu öffnen, aber in Code :: Blocks müssen Sie doppelklicken Sie auf sie.

Lehre, wie der Code für dieses Projekt funktioniert, ist ein wenig über den Rahmen dieses Artikels, so dass ich

Step 5—Building and Running the Code

Sie sind fast fertig zu versuchen, die MIDI-Visualisierungsanwendung jedoch vor, dass Sie den Code in ein Stück Software zu bauen. Um dies zu tun Sie wie folgt vor:

In Xcode auf OS X:

  1. Auf der oberen Symbolleiste auf der linken Seite neben der Wiedergabe und Stopp-Icons gibt es ein Dropdown-Menü
  2. In der Menüleiste wählen
  3. In der Menüleiste wählen
  4. Die Visualisierungsanwendung sollte jetzt erschienen sind, und eine Anwendungsdatei sollte in die angelegt worden sein

The Xcode IDE running the MIDI visualiser application

Die Xcode IDE läuft die MIDI Visualisierungsanwendung.

In Code :: Blocks unter Windows:

  1. In der Menüleiste wählen
  2. In der Menüleiste wählen
  3. Die Visualisierungsanwendung sollte jetzt erschienen sind (mit einem zweiten Dienstprogramm dahinter erscheinen), und eine Anwendungsdatei sollte in die angelegt worden sein

The Code::Blocks IDE running the MIDI visualiser application

Der Code :: Blocks IDE läuft die MIDI Visualisierungsanwendung

Herzliche Glückwünsche

Step 6—Using the application

Verwenden der MIDI-Visualisierer Anwendung ist einfach. Da die Anweisungen Zustand, wählen Sie einfach den MIDI-Eingang, den Sie mit den Zahlen auf der Computertastatur verwenden möchten, drücken

The MIDI visualiser application

Die MIDI-Visualisierungsanwendung

Laden Sie den Quellcode für dieses Projekt HIER


So dass


Liam is the Head Of Development specialising in software development at Modal Electronics, the company behind the 002, 008, CRAFT and SKULPT synthesisers, and was previously the lead software developer at nu desine, the developers of the AlphaSphere MIDI controllers. He was also an Associate Lecturer at UWE, Bristol, UK where he gradua... Read More


can you specify for which OS X this should work, cause I guess in 10.9 it is not working. I get tons of debugging errors like "gluBuild2DMipmaps is deprecated" use xxx instead. ???
Liam Lacey
Hey cuticulamusic,
These messages are actually just openFrameworks build warnings that can be ignored in this case, so it should still be possible to build and run the application. Is this true for you, or are they coming up as red errors that prevent you from building? With the latest version of oF (0.8.4) this project should work on OS X 10.6 and above.
Hi, I found out that I didn't " On the top toolbar on the left-hand side next to the play and stop icons there is a dropdown menu—select the ‘[project name] Debug’ option." set it right. But after doing that I got like 18 real errors. all of them "Apple Match-O Linker (id) Error". Do you have any idea what that could be? and thanks for your help already and putting up this tutorial (even tough its not working for me, haha).
Liam Lacey
Can you give examples of the exact "Apple Match-O Linker (id) Error" errors?
Tried this on OS X 10.11.1 Xcode says build failed.
Liam Lacey
Hey XacWj,
I haven't been able to test this on OS X 10.11 yet. What errors are you getting?
I'm so confused. You linked to a version of Code Blocks, yet the installation guide for Windows you linked to recommends another completely different version. They're nowhere near the same size and the version numbers are completely different. It asks that i 'install' it, but all i find is an file which i can't open.
Thanks for deleting my comment, i figured out where i went wrong anyway. It would have helped if you had explained that oF and code::blocks are two separate programs.
So now i've done all the steps but at the end i just get the grey screen and an empty command prompt box with no instructions. The build had no errors. Any advice?
Liam Lacey
Hey Bonzo,

Code::Blocks is the piece of software used for developing software applications, whereas oF is just a library of files used to make software development a lot easier. Sorry if that wasn't clear in the tutorial.

Since releasing this tutorial there has been a newer release of oF (0.9.0), and unfortunately they no longer suggest Code::Blocks to be the best IDE to use on Windows. Also I have not yet tested this tutorial using version 0.9.0 - just 0.8.4 (which can be downloaded from Which version of oF did you try this tutorial with?
Stefan Hetzel
@Liam Lacey: Thanks for the great tutorial, it was (almost) no problem to install the app :-) (Win 7 64-bit, using oF 0.8.4)
This is exactly what I've been looking for. Thank you so much!!!
Please, what portions of midi_visualizer source code gets copied into CodeBlocks. Think I'm ok with ofx files (h and C++). Does MAMA file go as well. How??
Hi, thanks for this article. With your help, I managed to create music videos for my musical project. Here is the first one if anyone is interested :
Hi, thank you so much for this awesome tutorial!! It actually worked for me! On macOS Catalina 10.15.5 may 2020. Only small detail at first the build failed, it said midi thing did not have a method getPortsList and asked me if I meant getInPortList instead... I changed it for getInPortList where the error was flagged and now it is working!!

Only thing that I still need to figure out though is how can I route the midi from my song in Ableton Live to the program? Right now I am able to chose between my drum pad, my midi synth or my audio interface as MIDI input and if I chose the drumpad or the midi synth it totally works and I can see the circles on the app!

Could you share how you got the midi from your Ableton coming out in the app? Thanks!
For those trying to run this code in VS on Windows
change line 158 from
vector midi_port_strings = midiIn.getPortList();
vector midi_port_strings = midiIn.getInPortList();
If it can't compile try to switch Solution Platform from Win32 to x64 (and optionally back)

Want to join the discussion?

Create an account or login to get started!