HOWTO: Smoke-like demo with Quartz Composer and TUIO

From NUI Group Community Wiki

Jump to: navigation, search
       The goal of this article is to outline the steps required to create a basic smoke-like demo in Quartz Composer.

What you need:

Mac running Leopard Multi-touch table with BBTouch or TUIO Simulator Quartz Composer

Step 1a)(skip to 1b if using the TUIO Simulator) Launch BBTouch. (If you don't have BBTouch, read the OpenTouch wiki). Make sure "detect blobs" is checked, and "Generate TUIO packets" is checked. Take note of the port number, by default is 3333.

Step 1b)

Get the TUIOSimulator. Launch TUIOSimulator.jar (check the TUIOSimulator wiki for more information)

Step 2)

Download the TUIO Patch from here:

Copy tuioclient.plugin to /Library/Graphics/Quartz Composer Plug-Ins

Open up Quartz Composer

Step 3)

Let's add a plain black background and adjust the viewer to get started.

Put in a Gradient Renderer, and under Input Parameters change all the colors to black so you have a solid colored back ground.

At the bottom left corner of the viewer, change the drop down box to say 4:3.

Step 4)

Add the TUIO client to bring the TUIO messages into your composition.

Look for TUIOclient in the patches

Check the Input Parameters on TUIOClient and make sure that the port setting is the same as BBTouch or your TUIOSimulator (3333 is the default)

Step 5)

Translate the TUIO Messages

Add a Structure Index Member

Add three Structure Key Members. Name the first one S_ID, the second one XPOS, and the third one YPOS.

Add a connector from Structure Index Member to all the of the Structure Key members.

Adjust the key of your Input Parameters of your 3 Structure Key Members so that S_ID key = s_id, XPOS key = xpos, and YPOS Key = ypos.


Step 6)

Convert the TUIO messages

The TUIO sends values between 0 and 1, but the viewer expects values south beach smoke reviews for x to be between 0 and 4, and y to be between -3 and 2. We need to adjust the xpos and the ypos to match the viewer.

Add 2 Math patches. Connect XPOS Member to "Initial Value" of one of the math patches. Do the same for the YPOS Member to the other math patch.

For the XPOS math patch, change the Number of Operations under the Settings tab to 2.

In the XPOS math patch, go back to Input Paramaters. For Operation #1 select Multiply. For Operand #1 put in 8.

For Operation #2 choose subtract. For Operand #2 put in 4.

For the YPOS math patch, change the Number of Operations under the Settings tab to 2.

In the YPOS math patch, go back to Input Paramaters. For Operation #1 select Multiply. For Operand #1 put in -5.

For Operation #2 choose add. For Operand #2 put in 2.

Step 7)

Add a Particle System

Connect the Resulting Value of the xpos math to the X Position of the Particle System.

Connect the Resulting Value of the ypos math to the Y Position of the Particle System.

Step 8)

At this point your particle system should be a bunch of white squares reacting to your touches. Let's make your particle generator more interesting.

This is the part you can play around with a lot to achieve very different results.

Drag an image in, and connect it to Image in the Particle System.

If you don't like that, here are some other things to try.

In the Particle System settings, check Interpolate Size and Color.

Set the particle count to 100.

Set z position to -5 to make it a smaller blob.

Change the colors.

Change the min size to very small, like .000001. Change the max size to something not so small, like .3.

Change Attraction to .02

Change Gravity to .5

Change Blending to add.


Quartz Composer Setup homework help