During the fantastic OF lab weekend at the V&A, I created a little drawing application driven by a MIDI device. It uses three knobs to control brush size (actually a circle size), noise (vibration) and opacity. Two additional knobs control the canvas position (when centred the canvas won’t move).

Two main sliders control painting on screen (x and y coordinates) relative to the current screen canvas. Additionally, the colour is picked from the computer’s web-cam in real time, so you might see your pixel-circled face if you’re unlucky ;)

I have defined a “Particle” class which is actually an object with x, y, vibration, size and opacity attributes. Each time the X and/or Y sliders are changed, the system stores a new Particle with the current global attributes (x, y, noise, size and opacity) into a vector which is like a dynamic array.

In the draw method, all the particles in the vector are being drawn by circles and connected with curved lines.

There’s one very important thing I have learnt after several application crashes :) Since the MIDI event listener might be invoked while the update / draw methods are running, you shouldn’t access dynamic memory within the MIDI event listener itself: don’t add or delete particles into/from your vector, don’t grab the screen into a new ofImage object and try to save it to disk, … If so, you’ll be causing your application to crash. In other words, in your MIDI event listener, you should only access regular variables that have been already allocated in memory (already declared). If you need to access dynamic memory, use the update method in your OF project instead.

So, how did I manage to save images and store new Particles then?

Easy. Declare a boolean variable (true or false) for any dynamic memory operation that you need. For example, storePoint is initialized as false. If the X or Y sliders are recognized in a MIDI message, then set it to true. See below my MIDI listener sample:

// --- Listen midi events -.----
void testApp::newMessage(ofxMidiEventArgs &args){
	float p = args.byteTwo;
	p /= 127;

	//cout << "MIDI message [port: " << args.port << ", channel: " << args.channel << ", status: " << args.status << ", byteOne: " << args.byteOne << ", byteTwo: " << args.byteTwo << ", timestamp: " << args.timestamp << "]" << endl;
	switch (args.byteOne) {
		case 14:
			x = p*ofGetWidth();
			storePoint = true;
			break;

		case 15:
			y = (1 -p)*ofGetHeight();
			storePoint = true;
			break;

		case 33:
			size = MIN_SIZE + (MAX_SIZE - MIN_SIZE)*p;
			break;

		case 32:
			noise = MIN_NOISE + (MAX_NOISE - MIN_NOISE)*p;
			break;

		case 31:
			alpha = int(p*255);
			break;

		case 36:
			offsetY = (p-0.5)*MAX_OFFSET;
			break;

		case 35:
			offsetX = (p-0.5)*MAX_OFFSET;
			break;

		case 59:
			saveImage = true;
			break;

		case 69:
			clear = true;

		default:
			break;
	}
}

In your update check if the variable is true, then do something and set it to false again. Example below:

//--------------------------------------------------------------
void testApp::update(){
	if(storePoint){
		Particle p;
		p.setup(x, y, size, alpha, noise);
		points.push_back(p);
		storePoint = false;
	}

	for(int i=0; i<points.size(); i++){
		points[i].update(offsetX, offsetY);
	}

	if(saveImage){
		ofImage img;
		img.grabScreen(0, 0, ofGetWidth(), ofGetHeight());
		img.saveImage("mug" + ofToString(mugCounter) + ".png");
		mugCounter++;
		saveImage = false;
	}

	if(clear){
		points.clear();
		clear = false;
	}

	myGrabber.update();
}

Download the sources (Including Mac Xcode project).
ofxMidi addon required.
A MIDI device required, of course. I used a M-Audio X-Session Pro.
Created with OpenFrameworks

Check this video to see it working. Thanks a lot to Filip Visnjic from CreativeApplications.Net

It was an incredible weekend and I would like to thank again Zach Lieberman, Joel Gethin Lewis, Arturo Castro, onedotzero and the V&A for the great organisation.

I had the chance to be part of the Openframeworks lab during the Decode events weekend at the V&A museum. It was an absolutely great weekend and I had the opportunity to meet really nice and creative people.

I was in the drawing group, and I created a little MIDI-driven drawing tool during the lab. I think MIDI devices are really interesting since open lots of interface possibilities: Keyboards, mixing tables and a wide range of sophisticated controllers that provide an analogue touch to Human-Computer Interaction: when thinking of live audiovisual performances, MIDI devices are a very natural way to control things.

In this post I’ll be sharing how to set up OpenFramworks to work with MIDI devices. I assume you have OF already running in your machine, so that’s what you need once OF is up and running:

* The ofxMidiIn add-on that can be found here

* A MIDI device: I have used a M-Audio X-session Pro

Installation instructions

Download the ofxMidiIn add-on, decompress the ZIP, and copy the ofxMidi folder into the OF addons folder. I would suggest you make sure that the name is “ofxMidi” (without the version number such as “_002″).

Using the ofxMidi in your project

You need basically to do two things in order to have ofxMidi running within your OF project:

* Add the ofxMidi add-on folder into your project.

* Include the core MIDI framework: this is the OS specific MIDI framework. In Xcode you just right-click on the project’s libs folder and choose add->Existing frameworks (see picture below) and select the core.MIDI.framework folder.

If you are in Windows or Linux, try to look at the OF forum for more information.

Listen to MIDI messages from your OF application

In your testApp.h you’ll need to include the ofxMidi library and declare a listener function and an ofxMidiIn object:

#ifndef _TEST_APP
#define _TEST_APP

#include "ofMain.h"
#include "ofxMidi.h"

class testApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed  (int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void windowResized(int w, int h);

		// this is your listener function
		void newMessage(ofxMidiEventArgs &args);

		// this is your ofxMidiIn object
		ofxMidiIn midiIn;

};

#endif

In your testApp.cpp file you need to tell your ofxMidiIn object to open a connection with your device using a certain port and register your listener function. You would usually do that in your setup method.

In most of the cases you’ll be using only the port 0 (default). My guess is that if you have different devices plugged in your machine you can handle all of them since they will stack in your system (starting at port 0). I am just guessing and I might be quite wrong! ;)

void testApp::setup(){
	midiIn.openPort(); // opens a connection with the device at port 0 (default)
	ofAddListener(midiIn.newMessageEvent, this, &testApp::newMessage);
}

Here an example of the listener function just printing messages in the console:

void testApp::newMessage(ofxMidiEventArgs &args){
	cout << "MIDI message [port: " << args.port << ", channel: " << args.channel << ", status: " << args.status << ", byteOne: " << args.byteOne << ", byteTwo: " << args.byteTwo << ", timestamp: " << args.timestamp << "]" << endl;
}

The MIDI message structure (the ofxMidiEventArgs Object)

A MIDI message has the following parameters:

* port: The port where the MIDI message is coming from (integer)
* channel: I guess a MIDI channel (integer)
* status: not sure what this is (integer)
* byteOne: this is the control id. Every knob, button or slider have their own id represented by an integer number.
* byteTwo: the current value of the control. This is an integer number from 0 to 127
* timestamp: I guess is the timestamp of the current message but not really sure. Maybe is related to the elapsed time since the port was opened. (double)

So basically I have been only using two parameters: byteOne for identifying the control being touched, and byteTwo to grab the actual value of the control. Quite simple!

You can download the source of the “printing MIDI messages example” (includes Xcode project file).

In my next post, I will explain the drawing tool and will share the source as well.

Was a really great weekend! This morning I felt the post-lab depression :(

By the way, thanks a lot to Arturo for his help on this.

I have been working together with canalretina.com for some time defining a new networked design studio which officially launched this Christmas. Our introductory mini splash page, a little audiovisual piece featuring a generative layered soundtrack, was created in collaboration with Sorgerune; an audio cell joining the CellFlot molecular theory.

If you want to keep tuned,  follow us on Twitter.

Our core cells are located in Berlin and London, and we are available for work.

I always thought that when this day would arrive, I would go for an iPhone and would take the chance to learn Objective-C. Being a Mac user it makes sense. But my love for the Google cloud keeps growing daily.

Finally, about a month ago, I decided to go for an Android phone. The reasons are simple: open, free, customizable, multi-task, Google-integrated and with a familiar development environment. I am also not a mobile contract lover, I like pay as you go, and iPhone updates are not unlocked-friendly.

I was supposed to get a HTC Hero this x-mas. After all the recent news around the Nexus One launch next month, I will rather wait a little bit and evaluate weather I go for the Hero or for the Google phone, which is rumoured to be equipped with a super fast processor.

However, I would still like to make my first steps into iPhone development, so I wish to get an iPod touch as my starting point soon.

I might regret one day, get an iPhone and forget about Android and the iPod. We all know how good Apple is at interface and user-experience. But Apple closeness and Android 2.0 made me change my mind. Anyway, I think it is really interesting to keep an eye and gain some experience in both platforms.

The letter was sent from Italy and it comes with a form I should fill in with my bank details and address. A supposed lawyer company called “Studio legale Anna Giovanna de Italia” wants me to authorize them to claim for my money and give them a 10% of the prize in exchange. Nice try! There’s even a phone number and a fax number. Should I call? ;)

Apparently, there are many cases of scam via Email. Although it makes a big difference when the spammer sends you a physical “love letter” correctly addressed to you. I had to read it twice. WTF?

Soon we’ll need Google to install spam filters in our house doors. Quite annoying…

Firefox lets you choose which tabs to restore. Specially useful when one website is causing your browser to crash. Nice one!

After my move to London and after waiting quite long for a BT telephone line, I could finally sign up with Be there. I did choose them because instead of offering annoying free web space and free mail accounts, they do offer serious features such static IP(s) and nice upload speeds at a fair price. But I did also choose them because their website looks different. In fact, it looks great! It takes you a second to understand their products , see the current promotion and realize that they have a user group and forum. And, come on, we all like wearing a nice pair of shoes! ;)

Just after signing up, I logged in and saw a nice “widget” in the sidebar that tells me where my order is. That is just an example of lots of the details that makes the BE website a great user experience.

In less than a week, here I am, already connected to the broadband and enjoying of really high speeds.

Thanks to one user in the BE tech-wiki, I could set up in a minute the BE box in bridge mode (modem-only) so I can use my own router. This was unfortunately not possible by default. Anyway, great to have a user community with clever people on it!

It is too soon to evaluate the connection service and I can’t compare it to other providers in the UK anyway. But if I compare it to my recent experience in Germany, specially the painful 1 und 1 (be aware of an eye shock if you click this), I feel like in heaven now.

Who said that ISP websites had to be annoying and useless? Someone here decided to BE different.

After a long meditation, we decided to make a move to London some months ago and we finally got installed in White Chapel, quite close to the City.

Along with the move, Jocabola is experiencing a deserved relaunch: new server and a temporary splash page. This page is a metaphoric screensaver, a slideshow of highlighted work until the real thing launches.

I am also starting up a new business adventure together with Juan Romero. Keep tuned!

Oh, I almost forgot! Jocabola is finally on Twitter. It took me quite long ;)