ofLab at the V&A – part II

In my previous post I described how to set up MIDI devices to work in your OpenFrameworks projects. In this post I’ll talk about the MIDI drawing tool, but make sure to check my previous post first.

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 function 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.

Have your say: