Archive for the ‘Tutorial’ Category

Animata OSC Plugin v. 1.2

Sunday, March 7th, 2010

There is a new version of the Animata OSC plugin available. I’ve had the Z-axis support working for a long time, but I’ve just been too lazy to upload it here. Also added the option to change the IP address and port numbers. Useful when you need to send OSC from QC to a different computer running Animata. You really shouldn’t touch the port, but decided to throw in the option to change it just in case.

Download the plugin here.

Download the example seen on the video.

Version 1.2 Changes
– Added the Z Position port for the Layer patch. That means you can now move layers in Z-axis too. (requires the latest version of Animata 004)
– Added the option to configure the IP address and port number. (Please test this one)

I also updated the VDMX plugins to have the Z Position option.

Please test this and let me know if you run into any problems.

QC + Animata: Mr. Cool

Monday, July 13th, 2009

In my previous post, I promised to do something more exciting with the QC and Animata communication. You can’t get much cooler than Mr. Cool!

This is a modified rig of the Mr. Cool character I used for my Product Placement animation. I used Max/MSP when I did the animation, but QC is just much more fun.

Mouth and body movement controlled by the sound. Arms have a small LFO on them and you can trigger some other movements with the arrow keys.

Download the example files. Requires the Animata OSC plugin for QC. You also need a recent build of Animata from the svn. Compile it yourself or download this one that I compiled. Should work on intel machines running Leopard.

Quartz Composer Audio Spectrum + Animata

Sunday, July 12th, 2009

I started messing with my Animata OSC plugin for Quartz Composer and trying out different kinds of data I could feed from QC to Animata. The Audio Input patch is the obvious choice, so might as well get that over with first.

The first test. Just playing various samples and seeing how the communication works. Not very exciting, since I’m not using any images in Animata.

Click here to download the Quartz composition and the Animata file I used in the video above. The only special thing worth noting in the .qtz is that I’m normalizing the bands a little bit and scaling the values. Otherwise the 0-band would always peak out and the others wouldn’t really output anything useful. Requires the Animata OSC plugin for Quartz Composer.

I will probably post something more interesting tomorrow. The point with this test was more to do something I’ve been meaning to do for a long time. That is to figure out exactly what is the frequency range of the different spectrum bands of the Audio Input patch.

Please note, I think the information below is not valid anymore. Maybe it never was. (Edited 26/5/2014)

My testing method was not the most accurate, but should be fine for this purpose. I just want to have a rough idea of what is going on. They way I measured this was by generating different frequencies with the Max/MSP cycle~ object and then seeing at what frequency the maximum value jumped from one band to the next one. Here are my results. The frequency is in Hz:

  • Band 0: 0 – 580
  • Band 1: 580 – 1000
  • Band 2: 1000 – 1500
  • Band 3: 1500 – 2000
  • Band 4: 2000 – 3200
  • Band 5: 3200 – 4800
  • Band 6: 4800 – 6140
  • Band 7: 6140 – 8230
  • Band 8: 8230 – 10300
  • Band 9: 10300 – 12380
  • Band 10: 12380 – 15110
  • Band 11: 15110 – 17880
  • Band 12: 17880 – 20000

There was no point trying to measure Bands 13-15 since they go over 20kHz and my sound card can’t handle that. Actually, in normal use – normal use for me meaning music visualizations – there’s not much point using the bands above 8, since the amplitude at those frequencies is barely noticeable.

Let me know if you are doing something cool with Quartz Composer and Animata.

How to Control Animata With OSC from Max/MSP and Pure Data

Monday, December 15th, 2008

If you haven´t heard of Animata yet, you should head over to and educate yourself. Download the software and go through the tutorials. I also recommend reading through the mailing list, it has tons of useful information.

Controlling Animata with a mouse and doing real-time animations is pretty cool by itself, but Animata really shows its true potential when you control it with OSC. Then you can start doing something like this:

There is a Processing example available from the Animata site that controls Animata with sound input.


Unfortunately, the Kitchen Budapest guys are busy improving the software and there isn´t really good documentation available about the OSC messages needed to control Animata. I´ll try to go through all of the available messages and give you some examples in Pure Data and Max/MSP

I assume that you know something about OSC, Pure Data and Max/MSP, because I don´t want to write a huge post explaining everything from the beginning. I´m also assuming that you have spent some time learning the basics of Animata.

One more important thing. I´m using revision 35 of Animata compiled from the svn repository. NOTE! YOU WILL NEED TO COMPILE ANIMATA FROM THE SOURCE CODE TO MAKE THE /LAYERPOS MESSAGES WORK. IT IS NOT AVAILABLE IN THE BINARY VERSION ON THE ANIMATA WEBSITE. All the other messages I´m showing here do work with Animata 003 that is available from the site. OK, let’s start.

DOWNLOAD MY EXAMPLES. Contains the Animata Scene + Max and PD patches.


All incoming messages to Animata must be sent through port 7110. The “name” in the message refers to the name of the joint, bone or layer.

Moving a joint, x and y are float values:
/joint name x y

Control the length of a bone, value is a float between 0 and 1:
/anibone name value

Switch on and off a layer, on_off is 0 or 1:
/layervis name on_off

Set the transparency of the layer, value is a float between 0 and 1:
/layeralpha name value

The next two messages require the svn version:

Moving a layer in absolute mode, x and y are the position coordinates as float values:
/layerpos name x y

Moving a layer in relative mode, x and y is the amount of pixels you want the layer to move from it’s current position:
/layerdeltapos name x y


I´m not really comfortable with Pure Data, but I was able to get all of the messages working except /layervis. I believe this is because Animata is very picky and is looking for real boolean values and Pure Data is sending integers when sending 0 or 1. This was just fixed by the Kitchen Budabest guys. The /layervis message works now. I have updated the code so please download the .zip again. You need to compile Animata again from the svn for this to work.

Pure Data to Animata

Pure Data to Animata with OSC from Matti Niinimäki on Vimeo.

There is a little problem, because Animata needs float values in the messages and Pure Data doesn’t have a separate number box for floats, so have to make sure the number you are sending is never an even number. I did this by multiplying the values by 0.999. If someone knows a better way, let me know.


It´s pretty much the same deal with Max/MSP. The /layervis doesn’t work here either. This was fixed in the svn version (>36). My Max-patch has been updated so please download again.

Max to Animata

Max/MSP to Animata With OSC from Matti Niinimäki on Vimeo.

I didn´t add the /layerdeltapos to the example patches, because it´s really easy to lose your layers somewhere outside the window.


There is also an option to send OSC messages from Animata. For this you need the SVN version. It simply works by clicking on the small OSC tick box on the Skeleton tab. The messages are sent through port 7111. The message format is: /joint name x y

Send OSC


I’ve made a plugin for Quartz Composer that makes it really easy to control Animata from Quartz Composer. Check it out over here.


Basically, any software or programming environment that is able to send OSC messages should be able to communicate with Animata.

Processing works perfectly and you can download the Sound Input example from the Animata website that will get you started. I´ll see if I can find the time to do a similar sample file for Processing also.

I’ve also had luck testing OpenFrameworks. Download the FAT version of OpenFrameworks and modify the oscSenderExample.


Whatever you want! Hook up audio input, MIDI controllers, sensors or computer vision to control real-time animations.

Check out my Mickey Mann project for an example on how to control Animata with an Arduino.

Here is the source code download link one more time.

Arduino & Quartz Composer

Sunday, November 16th, 2008

Here is a quick solution on how to get the analog inputs from an Arduino into Quartz Composer. For now, this only supports the analog values. Reading the digital input pins is not hard to implement, but I still haven´t decided what is the best way to do that.

Sending serial data from QC to Arduino is a little bit trickier, but I will definitely try to work on that also.

What do you need for this to work?

SMS and Quartz Composer Revisited

Saturday, July 5th, 2008

Some people have probably tried to use my tutorial on how to use SMS text messages with Quartz Composer. There were actually some errors in the php code in my tutorial as the wordpress WYSIWYG editor is actually a IWFUYBPWC (I will f*ck up your blog post with code) editor so it might not have worked for you. It’s fixed now. Thanks to Amon Robe for pointing this out.

Multitouch Table Post #2 – Acrylic and LEDs

Wednesday, July 2nd, 2008

Gather around children, the multitouch adventures continue. Today we will hear the story of The Acrylic Screen and 112 Little LEDs.

I decided to go for a 4:3 format for my screen and bought a 10 x 820 x 620 mm acrylic screen from Foiltek. Acrylic that size cost me around 60 euros. Couldn’t find any place cheaper here in Finland. The edges of the acrylic weren’t clear so I sanded them with sandpaper. I started with 180 grit paper and worked my way up to 1000 grit paper. Then I finished the edges with some metal polish. They should be clear enough now. Here’s my screen.

In order for the FTIR tracking to work, you need a lot of LEDs that shine the IR light inside the acrylic screen. So basically you need too make LED strips that will be placed on the edges of the acrylic. Here’s a handy calculator for helping you design your LED array.

I decided to save a lot of time, by ordering the circuit boards for the LEDs from Each of the boards will hold 2 x 7 LEDs and 2 x 15 ohm resistors I got a bunch of the boards with resistors already mounted, but not the LEDs. I ordered my LEDs from eBay. 120 for $48.

I’m using 4 of these boards on each of the longer sides of the acrylic. That’s 112 LEDs in total. This might be a little overkill, but. We’ll see once I get a power source for the strips and I can test it properly.

Next time: How to hack a webcam to see only IR light.

Using SMS Text Messages with Quartz Composer

Tuesday, May 6th, 2008

Next week, I will be taking part in the Mobil/And workshop in ESADSE in Saint-Etienne, France. I was planning content for my speak during the workshop and came up with a rather cheap and robust way of using SMS text messages in Quartz Composer.

Previously, I had been able to come up with a hack that involved BluePhoneElite, AppleScript and iTunes to send SMS to Quartz Composer. I used this for example in the FF>> Media Festival last fall, but it was really awkward solution and you could only have the information of the latest message. So, I had to think of some better way.

This time around, I’m using the excellent Cocoa UltraSMS to send my SMS messages to a MySQL database. Then I’m using a small php-script to convert the database into an XML file which can be easily read and manipulated in Quartz Composer. Here’s how you do it:


  • Computer running Mac OSX (I’m on an early 2008 Macbook Pro)
  • Mobile phone with bluetooth (I’m using Nokia 6103)
  • Cocoa UltraSMS -software (it’s free)
  • Quartz Composer
  • Empty MySQL database
  • Some PHP skills

1st STEP – Create the Database

Ok, let’s start. First of all, you need to create an empty MySQL database. For the purpose of this tutorial, I’m going to call my database sms_database.

2nd STEP – Cocoa UltraSMS

Then you need to download and install Cocoa UltraSMS. Setup your phone to connect with it and also insert the information of your database to the fields. Your settings will be different, of course.

After you click OK Cocoa UltraSMS will ask you if you want to create tables for your database. Click OK and and after that hit Start to connect to your phone. Now you can test the connection by sending yourself an SMS. The SMS In counter should increase and if you have Growl enabled you should also see the message in the Growl window.

3rd STEP – PHP lovin’

Now we need to somehow convert the information in the database to an XML file. I’m really far from being a PHP expert, but even I was able to do this, so if you have even a little bit of experience in PHP this shouldn’t be too hard. I used this tutorial to help me.

Here is the PHP code that you will need to upload to your server in order to make this work.

EDIT: As it seems to be almost impossible to paste any working code on WordPress as the WYSIWYG editor f*#%s it all up, I’ve decided to upload the code as a separate file. Download the .txt file here, modify the database settings and rename it to whatevernameyoulike.php. (Can anyone point me to a WordPress plugin that disables all the “intelligent” modifications the editor makes? I’ve tried a few and none of them work perfectly.)

Just upload the .php file to your server and point our browser to the url. It will look something like this

You might have noticed the strange lines in the php code like this one

$row['message'] = str_replace("|", "ö", $row['message']);

I’m using those just to display the Scandinavian letters properly. This really can’t be the best solution to do that, but it works for now, unless you want to use smilies that is. I’ll have to see how and where I should change the encoding settings to get this display properly without this hack.

4th STEP – Quartz Composer

Now for the easy part. In QC you need to just connect the XML Downloader to a couple of Structure Index Member -patches, modify the XML location to be the URL of your .php file and you are all set. Download here a simple .qtz file that just displays the latest message.

5th STEP – What next?

Now it’s just a matter of what to do with the data you receive from the messages. I have a bunch of different applications in mind. You will probably hear from them pretty soon. I just got this thing working today, so I haven’t had the time to test all the possibilities.

Of course, this same technique can be used to access SMS data from various other applications that can read XML files like Flash, Processing etc. I just used Quartz Composer as an example because it’s the environment I’m most comfortable with.

That’s it. Hopefully this is helpful to someone. I’ve seen many interactive installations where SMS messages are used, but I haven’t seen good documentation on how to do it anywhere. Feel free to comment here or email me if you have any improvements or questions.

Phidgets + Quartz Composer

Thursday, February 1st, 2007

We’re going to use Phidgets for a university project pretty soon, so I tried to come up with a way to control Quartz Composer with the Phidget sensors. Hiroaki has done Accelerometer and RFID custom patches that you can find here, but I want to use the Interface Kit 8/8/8 and be able to use all the different sensors.

I’m not smart enough to program my own patches for QC, but I was able to build a Cocoa application that sends the data from the sensors to the QC composition. I got a little help from the Phidget Interface Kit -sample code that you can download here and from the instructions found from the Phidgets forum. The code on the forum post didn’t work for me so here’s a small tutorial that shows you how build a Cocoa app that will control your Quartz Composer composition with Phidgets sensors.

What do you need?

– A computer running Mac OSX 10.4 with the developer tools installed
– Phidgets Interface Kit 8/8/8 + some sensors
– Download and install the Mac OSX Framework 21 from Phidgets website. This will also include the source code that you need for this tutorial.

OK. Let’s start

Open the CocoaIFKit Xcode project from the /Examples/Source Code/CocoaIFKit folder.

First we need to modify the project so that we can import and use a Quartz Composer Composition. These next steps are explained with more detail in the Quartz Composer programming guide by Apple and I recommend that you try the tutorials first, but I’ll go through the important stuff quickly.

– First, choose Project > Add to Project.
– Navigate to System/Library/Frameworks/Quartz.framework and add it to the project.
– Drag the Quartz.Framework to your Frameworks folder in the Groups & Files list
– Double click the MainMenu.nib file and Interface Builder launches.
– If you haven’t done this before, you have to install the Quart Composer palette to Interface Builder. Choose Tools > Palettes > Palette Preferences and click add.
– Navigate to /Developer/Extras/Palettes/ and add QuartzComposer.palette.
– Now your palette window should show the Quartz Composer palette. The blue thing is QCView and the green thing is QCPatchController.

– Drag the QCPatchController from the Palette window to the Instances tab in the MainMenu.nib window
– Go to the Cocoa Windows tab in the Palette window and drag a window to the Instances tab also. A new window appears.
– Your MainMenu.nib window should look something like this

– Select the new window and go to Tools > Show Inspector. In the Attributes section, make sure that the “Visible at launch time” is checked for the new window
– Now drag a QCView from the palette to the new window and resize the QCView the way you like it.
– Select the QCView and then open the Bindings pane of the Inspector window. Click the small triangle where it says patch.
– Choose QCPatchController from the “Bind to” pop-up menu. Enter patch in the Controller Key text field.

OK. Now we need a QC Composition to use with our app. I won’t go to any details about using Quartz Composer. There’s plenty of info for that available and this tutorial is already becoming too long.

What you need to do is to create any kind of composition that has a published input with the name of sensorZero. I just used an Image With String connected to a Sprite and published the String input with the name sensorZero. Save the .qtz file to the CocoaIFKit folder. I used the name phidgets.qtz.

Back in Xcode, drag phidgets.qtz to the Resources folder in the Groups & Files list. In Interface Builder, select the QCPatchCotroller from the MainMenu.nib window and select the Attributes pane of the Inspector and click “Load from Composition File…” Navigate to your phidgets.qtz file. Choose File > Test Interface. You should see your composition in the window. The sensors won’t work in the testing mode.

Now the application shows our composition, but we want to change the published value with the sensors. Read on and I’ll tell you how to do just that.

– Select the blue PhidgetInterfaceKitController from the instances tab. Then select the classes tab.
– Choose Classes > Add Outlet to PhidgetInterfaceKitController.
– Name the new outlet theController
– In the Instances tab, ctrl-click and drag from the PhidgetInterfaceKitController to the QCPatchController

– Choose Connect to connect the outlet.
– Save and go to Xcode again.

Now we need to change the code so that the data goes from the sensors to the QC composition

– Double-click the PhidgetInterfaceKitController.h file.
– Add this to the list of outlets:

IBOutlet id theController;

– Close the window and double-click the Phi
dgetInterfaceKitController.m file.
– Find the SensorChange section and add this code there:

// sensors to Quartz Composer
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorZero.value”];
}else if(Index==1){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorOne.value”];
}else if(Index==2){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorTwo.value”];
}else if(Index==3){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorThree.value”];
}else if(Index==4){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorFour.value”];
}else if(Index==5){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorFive.value”];
}else if(Index==6){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorSix.value”];
}else if(Index==7){
[theController setValue:[NSNumber numberWithInt:(int)Value] forKeyPath:@”patch.sensorSeven.value”];

– We only published the sensorZero from QC, but this code works with all the 8 analog inputs in the Interface Kit (Index numbers 0-7). So you can publish more values from QC. Just name them correctly: sensorZero, sensorOne, sensorTwo…
Note! I’m a total amateur when it comes to Cocoa, so this code might not be the best way to do this but it works.

That’s it. Save. Then choose Build and Go to see if it works.

If you want to change the QC composition, you need to reload the composition to the QCPatchController in Interface Builder and rebuild the app.

Pheew! This is the first tutorial I’ve ever written. I hope it’s useful to someone.