July 5, 2008

SMS and Quartz Composer Revisited

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.

http://originalhamsters.com/blog/2008/05/06/using-sms-text-messages-with-quartz-composer/

Filed under: Multimedia, Quartz Composer, mobile phones, sms, vj — Månsteri @ 21:13

July 2, 2008

Multitouch Table Post #2 - Acrylic and LEDs

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 dshop.ch. 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.

Filed under: Acrylic, Interface Design, LEDs, Multimedia, art, e-MobiLArt, multitouch — Månsteri @ 17:21

July 1, 2008

Multitouch Table Post #1 - How Does It Work?

Most of you have probably seen Jeff Han’s multitouch screen, the Microsoft Surface, and all these other multitouch devices that are popping up everywhere. What’s the first thing that comes to your mind when you see those videos? If you are anything like me you’ll probably want three of them, preferably yesterday. Alas, I don’t have extra 10,000 lying around to buy a MS Surface, so I decided to build my own.

Fortunately, the excellent NUI Group forum is filled with people who have the same intentions and are willing to share advices. There are dozens of blogs describing how to build a DIY multitouch screen. I’ve been planning on building one ever since I saw the Reactable in action a few years ago. Now that I have the time and motivation to actually do this, I have started the building process and I will try to document the steps here on the blog. I will also write how-to pdfs both in English and Finnish and release them once the table is finished.

I don’t want to go into too much detail about how different multitouch surfaces work, but I’ll just quickly go over the science behind the technique I’m going to use. Basically I’m going to build a multitouch table that will use the FTIR method that Jeff Han also uses in his screen.

Source of the image

So basically, you have an acrylic screen that is lighted up with infrared LEDs from the side. Once you put your finger on the acrylic, it will reflect the IR light downwards and your finger would look really bright below the acrylic if you could see IR light. So, you will need something that IS able to see infrared light. For this purpose you use a video camera that has been modified to pass through infrared light and block visible light. Why not just use normal light then, you might ask? Because you want to also project an image on the screen and the light from the projector would disturb the finger tracking.What your camera sees is pretty much like this video (after some image processing to make the blobs brighter)

OK, you have a bunch of bright blobs where someone touches the screen/table. How do those blobs then turn into a cool multitouch screen? You need some software that detects the blobs and then does something cool with the information or sends it along to some other software that might do something even cooler. The weapon of choice for many people is the Touchlib library, but it only works on Windows or Linux. So us Mac users need to use Boot Camp, Parallels etc. or do the tracking with some different software altogether. Unfortunately, there aren’t many options. ReacTIVision 1.4 is pretty much the only free, easily available software for this. It is mainly used for fiducial tracking and I’ve used it in some of my projects. Version 1.4 does plain finger tracking also, but it’s pretty slow when using USB cameras. I will cover the software side some other day in more detail and show you some other options that you might have.

The tracking software uses the TUIO protocol to send the information to Flash, Processing, Quartz Composer, Max/MSP or any other programming environment that understands OSC. Then it’s just up to you what to do with the tracking data.

This is a really superficial explanation on how this all works. I will go on to details within the next days and weeks when I start to document the building process my own multitouch screen. There is tons of information on the Internet about all of this if you are interested. The NUI Group and Google are your friends.

Tomorrow, Multitouch Table Post #2 - Acrylic and the LEDs.

Filed under: Interface Design, Multimedia, Reactivision, art, e-MobiLArt, multitouch — Månsteri @ 19:43

May 27, 2008

SMS continued…

Here is what I did during the Mobil/and workshop

http://originalhamsters.com/sms/

You can find more information about the workshop here: http://www.mobil-and.fr/

Filed under: Interface Design, Multimedia, Quartz Composer, mobile phones, sms — Månsteri @ 22:18

May 6, 2008

Using SMS Text Messages with Quartz Composer

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:

WHAT DO YOU NEED

  • 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 http://originalhamsters.com/sms/sms.php

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.

Filed under: Interface Design, Multimedia, Quartz Composer, mobile phones, sms, tutorial — Månsteri @ 17:29

June 28, 2007

Interactive Propaganda Generator

Here’s some documentation of a project we finished this spring at the university. It’s a project for a course in interface design.

Our group (Aku Meriläinen, Danilo Mascarenhas, Marjukka Parkkinen and Matti Niinimäki) decided to create a multi-user interface that would allow a group of people to work together or compete in creating some sort of a moving collage. At some point in the planning process the idea of communism and propaganda came to surface, so we decided to go with that idea. We experimented with different input devices and visual styles, but eventually this is what came out of it.

I’d like you to meet The Interactive Propaganda Generator. It’s designed to have two different sides or “teams” - the communists and the capitalists - that you can control with different input devices to produce a collage of the two sides shooting different items and symbols at each other. The scene consists of three layers: a changeable background, two characters (one for each side) and the propaganda-tubes. Here are the controls explained:

Control 1 - ReacTIVision fiducial tracking

  • The characters are selected and moved around on the screen by using paper dolls on a glass table
  • You can change the bodies and heads of the characters.
  • Included are all your favourite capitalist and communist icons from Ronald McDonald to Che Guevara
  • The paper dolls have fiducial symbols attached to their backside and the camera under the table tracks the ID and the position of the symbol
  • Tracking is done with ReacTIVision software

Control 2 - PlayStation2 Dance Pad

  • You can move the capitalist propaganda-tube around the screen with the dance pad
  • One button turns the tube on/off
  • Two buttons for changing the ammunition of the tube (missiles, bibles, money)
  • Two buttons for changing the background image
  • One button for activating the speech option for the capitalist character

Control 3 - PlayStation2 Dual Shock Controller

  • Some controls as the dance pad, but for the communist side

Control 4 - Audio Input

  • A microphone picks up the voices of the users and when the speech option is activated (from the dance pad or dual shock controller) the characters on screen will open and close their mouths based on the sound input

Here’s the hardware setup. Click the image for details.
All programming done with Quartz Composer. I could release the .qtz file but it’s not really useful to anyone because it depends on a very specific setup. Email me if you’re interested in details.

And finally some video. Unfortunately, we don’t have any better footage of the system in action but hopefully you’ll get some idea.

Filed under: Interface Design, Multimedia, Quartz Composer, Reactivision, video — Månsteri @ 11:41