Johannes Luderschmidt’s Blog

(Update: The follow-up article can be found here.)

Fortunately I’ve got some money from the Computer Science faculty of the Wiesbaden University of Applied Sciences to build another (better) multi-touch table. I decided to try Tim Roth’s DSI technology. By using this technology it should be possible to use objects on the table that can be traced by a camera just like in the reactable project.

I made a photoset of this DSI multi-touch table on flickr:

Read the rest of this entry »

I’m coming from the Java world where you could ‘just’ draw Strings. However, in Flash it’s not as easy to actually draw a String on the screen.

For that purpose I use following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

textSprite = new Sprite();
 
//automatically shows a hand as mouse cursor when the mouse hovers 
//over the text field
textSprite.buttonMode = true;
 
addChild(textSprite);
var labelType : TextField = new TextField();
labelType.text = "Text in a line.";
labelType.autoSize = TextFieldAutoSize.LEFT;
labelType.wordWrap = true;
 
//copy TextField into a bitmap
var typeTextBitmap : BitmapData = new BitmapData(labelType.width, 
                                labelType.height,true,0x00000000);
typeTextBitmap.draw(labelType);
 
//calculate center of TextField
var typeTextTranslationX:Number = -0.5*labelType.width;
var typeTextTranslationY:Number = -0.5*labelType.height;
 
//create Matrix which moves the TextField to the center
var matrix:Matrix = new Matrix();
matrix.translate(typeTextTranslationX, typeTextTranslationY);
 
//draw invisible rect in the background that will serve as click area
textSprite.graphics.beginFill(0xfff0000,0);
textSprite.graphics.drawRect(-0.5*labelType.width,-0.5*labelType.height, 
                                labelType.width, labelType.height);
textSprite.graphics.endFill();
 
//actually draw the text on the stage (with no-repeat and anti-aliasing)
textSprite.graphics.beginBitmapFill(typeTextBitmap,matrix,false,true);
textSprite.graphics.drawRect(typeTextTranslationX, typeTextTranslationY, 
                                labelType.width, labelType.height);
textSprite.graphics.endFill();
//...

Update: I’ve enhanced the drawString code with a mouse listener by putting another sprite on top of it by drawing an invisible rectangle behind the text in the same Sprite. You can see/download the complete example here.

I’m currently playing around with several visualization toolkits resp. visualization frameworks. There seem to be some very nice products on the (open source) market. I’m focussing on the Flash AS3 toolkit flare, because the multi-touch libraries are very nicely integrated with Flash. However, flare seems to be just an AS3 implementation of Prefuse, which seems to be exactly the same in Java (and has been there at first).

The main guy behind Prefuse (and flare as well) seems to be Jeffrey
Heer from the Berkeley University’s Computer Science Division.

Anyway, Jeffrey seems to have a quite decent music taste as the name of Prefuse is related to one of the music projects (you don’t call them bands anymore…) of Warp Records:

Where did the “prefuse” name come from?
Prefuse intially began as a set of support classes for an experiment with different visualization algorithms, pursued within CS270, a graduate computer theory course at UC Berkeley. At the time, we (Alan Newberger and I) were listening to the electronica / hip-hop musician prefuse 73. The initial commit of the classes to a CVS repository forced us to give them a name. Following a sort of “you-are-what-you-eat” logic we named it after what we happened to be listening to at the time. Once enshrined as the name of the CVS module, the “prefuse” name stuck. Warp Records was even kind enough to provide permission to use the prefuse 73 track “Storm Returns” in the original prefuse demo video.

Here is a screencast from one of the visualization possibilites that Prefuse offers you the so called Treeview:

Here is a screencast from the Flare demo app:

Play around with the Flare Demo app online.