Device Front

Device shot

Device opened

Device opened back

Under the hood

Internal parts

 

 

 

 

 

 

 

Hot glue fixing

However, one day in May I woke up and had this game device idea, which looks like a plate or a steering wheel. After some consideration the idea felt good. The very simple form allows me to integrate a low resoultion screen very easily. Furthermore the usage range of this kind of device would be broad. I was very happy. For the size of the device I got inspiration of a real plate. It has the perfect size for not entering the private area of other players, but still feel connected to them. The metaphor came to me when I observed the interaction between a waiter and his guests in a restaurant. When the waiter hands the plate to one guest, there exist for a short time a connection between them. The connection is mediated and supported by the plate. The physical distance provided by the plate is small enough for feeling welcome, but also big enough for respecting the private zone. For this reason the form of the device is not only usable for a remote control, it is even usable for a multiplayer gaming device. In this context I got a childhood memory... uh yeah... fighting all the time with my sister for the power of the TV remote control. That memory brought me to a new version of the game "tug of war". The plate has four handholds. For each player one. In the middle of the device the screen is placed. The screen shows two lines, like a cross.  The aim of the game is to pull the device hard enough, that one line (the opposite line of the player) comes closer. If the line jumps out of the screen the player has won. An arrow shows it. Afterwards the game starts again. I uploaded a short video for getting an idea and see the device in action.

The technical implementation of my device is very simple, I have to admit... The wood and some other fixing stuff I found in the trash of the university and the Linzer DIY stores. I had almost the feeling of Gambiologia However, I cut the wood our university wood workshop. Further parts were:

• Board: Arduino Nano (ATmega168)
• Display: Kingbright LED DotMatrix TC20-11YWA
• Interaction: Triple Axis Accelerometer Breakout - ADXL335
• some cables and resistors

During development I ran into some pitfalls. My soldering skills are not very great and for this reason at least four or five times a cable lost the connection... In the end I stabilized the cable connection with hot glue (look at the pictures). That worked very well and I had no such problems anymore. Laurent gave me the advice to avoid cables everywhere I can. The possibility that the cable lost the connection is very high. Using plugs and connectors are good alternatives... So for the next projects I try my best to consider it.  Second pitfall was related to programming. I got a Arduino Nano Board from Laurent. I tried to replace the Nano board with my Uno board. But unfortunatley the provided Arduino Code for the LED Dot Matrix messed up. In the end the Arduino Code for Nano board was not compatible with my new Arduino Uno board. I don't know the exact reason. May one of my readers have an idea?! I would appreciate it. Next issue, not a very big one, was dealing with the accelerometer data. Every motion caused a motion in the opposite direction. You can see the values at my Excel File. I implemented a simple time checking code for the sensor. It works good for the first tests, but maybe one of you can recommend me a good library or code snippet for dealing with accelerometer values...?! The source code of this project is available as usual on my Google SVN. I am pretty happy with the result of my first Arduino project. Even the feedback I got from the other students were great. So I would like to continue the development. For a much better wood cut I hope I can use the laser cutter at the AEC or the Fab lab in Berlin. The device should get some extensions, like pressure sensors on each handhold. Adding four InraRed LEDs on the back of the device. The IR LEDs are interesting for some (3D) tracking projects a la Johnny Chung Lee. I hope I can implement all these ideas... Happy coding and soldering!

Related posts:

1. Moodumbrella – a self em-powered device for well-being

moodumbrella

moodumbrella detail

moodumbrella in use

We created a prototype for interviews and user testings and we made a survey in Linz during a rainy day. The Austrain people were very sceptical and did not want to be asked about their happiness on rainy days. However, we were able to get some very useful feedback. The video below will show you examples of the feedback mentioned.

In the end we wrote paper about the details of light therapy and discussing mobile energy resources for smart devices.

Download the moodumbrella paper

Related posts:

1. Arduino Prototype: The “plate” Gaming Device
2. My most important Twitter Messages #5
3. My most important Twitter Messages #6

I prepared a screencast for getting an idea and overview how it works. The principles are exactly the same as in the first version. The only exception is the "brushID" as a new parameter. Every API call uses this syntax:

apiFunctionName brushID parameter1 parameter2 ...

For creating a new brush use the command "setBrush brushID brushType". Afterwards you can use the API command "setCoordinate brushID xPos yPos" for drawing programmatically. If you want to use the mouse for drawing you must use the API command "selectBrush brushID" before drawing directly on the canvas!

All JavaScript codes and Max / MSP patches are included in the example file. For the sound drawing patch you must install the Max MSP Fiddler object, before you can try experimenting.

Download Harmony with multible brushes

Related posts:

1. Mr. Doobs Harmony drawing APP ported to MAX / MSP
2. Mr. Doobs Harmony project ported to Flash AS3
3. My most important Twitter Messages #9

This paper analyses gesture design for pointing devices in screen-based environments. By exploring design patterns the analysis investigated the gesture design of five different end-user products: Desktop operating systems, mobile operating systems, 3rd Party software, small software products, and common hardware products. The beginning of the paper defines what a gesture is, and the various kinds of gestures. Afterwards the analysis merges the gesture design results with the basic commands for pointing devices. This approach points out which gestures are often used, and in which context they are used. The results give interaction designers and software engineers a guide for implementing gestures in their own products. Furthermore, the paper proposes solutions for gesture documentation, and a conceptual framework for complicated gestures. The last section takes an industrial design perspective on pointing devices as an input channel. It discusses the evolution of interface design from a hardware driven to a software driven approach.

Please note:

Unfortunately, I got sick on a long-term disease. Therefore it took me so long for writing this paper and that is also the reason why the data of the analysis is from January of 2010. However, in my opinion the results of my analysis are still valid. For more up-to-date data, please check the Touch Gesture Reference from LukeW.

Acknowledgement:

I am very happy about the support from my teachers, friends, and fellow students. Big thanks to Mahir M. Yavuz and Mathias Stäbler for the content feedback. Vesela Mihaylova for a great Adobe Illustrator and graphic design support. Tim Devine for transforming over 30 pages of my bad english in a readable form, and marking some unclear points of my paper. Dudes, thank you so much!

Download

web version |   print version

Related posts:

1. Academic research in (multi-touch) gestures for screen interfaces
2. Designing Subspaces: Hermits in our digital Age
3. Book review: Designing Interactions

For exploring the JavaScript API in MAX / MSP / Jitter I decided to port the Harmony Web Application by Mr. Doob. I really fall in love with the different brush styles. MAX / MSP / Jitter is pretty cool for doing audio visual stuff, and I think the different brush style might be nice for this. Fortunately, Mr. Doob published the source code and the code is nice, too! Therefore, it was not so difficult to understand the code.  During my porting process I had to consider four things:

1. Object Oriented Programming and working with more JavaScript files don't work so easily in Max/MSP. For the reason of simplicity (and KISS), I decided to write everything in one JavaScript file.
2. JSUI (JavaScrip UI) in Max/MSP does not support the normal drawing functions. I had to port the drawing functions to OPEN GL drawing functions. Which is also positive for the perfomance, I think...
3. The coordinate system is different. I had to transform the Pixel values to the OpenGL coordinate system.
4. MAX /MSP does not support the standard Interval function setInterval. The JavaScript Object Task is the substitute. In the end I think it is a cleaner solution

After dealing with these minor obstacles, everything worked fine. I was quite surprised how good the JavaScript performed in Max/MSP. Furthermore, in combination with Jitter and other available Max/MSP Objects you can rock with JavaScript!

For a better understanding, I created a short introduction video clip. It shows how to use the JSUI Canvas and how to use the programmable input channels. In my example zip file is included one Max patch, which works with colorTracking as an input channel. Choose your cam input, and afterwards click in the camera picture which color should be tracked. In the end it gives you an inspiration how different we can interact with the canvas.

Mr. Doob was disappointed a little bit, how the people used his source code. So please keep in mind his blog post and share your code changes. I also publised my source code on google code.

Download  Harmony for Max/MSP/JITTER

Related posts:

1. Mr. Doobs Harmony project ported to Flash AS3
2. Harmony in Max / MSP with multiple brushes

Related posts:

1. My most important Twitter Messages #6
2. My most important Twitter Messages #5
3. My most important Twitter Messages #10

During the first semester of my study Interface Culture at the University of Art in Linz I had to write some papers about interactive art. My first papers dealt with the history of interactive art and continued with some different art movements in this domain. In some cases I am more or less satisfied with my papers. Anyway, I think every 2page long paper contains some interesting points for Interaction Designer, Web Designer, Web Developer, Web Artists, Computer Scientists etc.. That is the reason why I want to share my written work with you.

Please consider that all my papers here were an assignment for the master classes of Interactive Art by Christa Sommerer. My papers don't meet the requirements of a scientific work despite the fact that the format seems to be scientific. All my texts represent partly more my own thoughts on the different art topics, so please interpret my papers as a short essay or summary. My thoughts are mainly based on the first and second references, which are mentioned at the end of each paper. I highly recommend to read these references, because they are a very good collection for delivering an introduction in the domain of interactive art. Thanks Christa for this great collection of references and the introduction!

Paper: Report about the interactive art exhibition feedback

Christiane Paul wrote an essay about the evolution of feedback and interactive art related to the feedback exhibition. This paper summarizes the most important aspects of Christiane Paul’s article.

Paper: The Passage from Material to Interface

This article describes the transformation from material to interfaces in the artwork based on the text “The Passage from Material to Interface” from Louise Poissant. Louise Poissant wrote about the quality characteristics of material and the transformation of material to an Interface. In relation to this transformation we discuss the tree constituting poles of art. A further issue is the influences of language pragmatics for art movements. Furthermore the text explains the requirements which an artwork must meet to be an interface. Another argument in the text is the function set of interfaces. Based on these definitions we explore the tasks for new media artist for our future life.

Machine Art and their influences for the entertainment industry

This article explores the autonomous evolution in painting to machine art. Photography has influenced this evolution as one of the first machine-based art tools, which are able to create a picture. In this context the text dealt with the role of the artist in machine-based art. The examples of the Video Synthesizer and the Software Art project Sketchmaker shows up this relationship between the artwork, the machine and the artist. After that we explores the influences, which some artworks had for the entertainment industry. Sometimes these connections and influences are more or less obvious.

Paper: Interaction, Participation and Networking Art

This paper is a summary of the essay “Interaction, Participation, Networking Art and telecommunication” from Inke Arns. We explore how the spectator is involved into the artwork and how the participation of art changed in the last 50-60 years. Furthermore, this paper point out the evolution of art and which role participation plays in the art context.

Paper: Interaction between Perception and Memory - Art and Technology in Japan

This paper is a summary of the text "Interaction between Perception and Memory - Art and Technology in Japan in the 1990ies" from Yukiko Shikata. This text will mention a short overview of the evolution of media art and interactive art in 1990s in Europe and how this influenced the beginning of interactive art in Japan in the early 1990s. Furthermore we describe the progress of interactive art in Japan, and which the most meaningful artworks are in the realm of interactive art of the Japanese Culture. Which influences the big disasters of the Japanese economics, the great earthquake and the terrorist attack in Tokyo had on the interactive artworks.

Paper: Telepresence: Automata, Illusion, and Rejecting the Body

Telepresence unites three themes of our intellectual history: a) Automation and the search for artificial intelligence. b) Illusion in art. c) Rejection of the body in concepts of spiritual or mentalist concepts. In this relation we will explore the notion of artificial life for the point a), the aesthetics of virtual realities for point b), and precursors of  telecommunications for point c). Furthermore we will discuss how these three points evolved nowadays. In this context I will mention some robotics developments, cinema 4d installations and some new wearable technologies, which belongs to the domain of telepresence.

Related posts:

1. Interactive Media Installation: Sound Drawings
2. My most important Twitter Messages #6
3. AS3: Interactive Webcam Package 1.2

My current project - an independent Web Video Player - is still using the old workaround YouTube API Tubeloc and I have to change this. That is the reason why I created a Flex Component for the new YouTube AS3 API. If you would like to use my code for your Flex or Air projects, please feel free to use it and if you will find some bugs, please leave a comment!

Now I will start with some explanations of my code. I create 4 classes, which manage the whole YouTube Chromeless API. The class YouTubeAs3 contains all the most important functions and is based on the Flex Framework(!). The classes AirYouTube and FlexYouTube extends the YouTubeAs3 class. Both classes are Flex Framework based classes. I had to divide the YouTubeAs3 class into these 2 classes, because the Adobe Air environment don't support the command Security.allowDomain() and it is cleaner to use this command for a web-based projects. So therefore please use the FlexYouTube component for web-based projects and the AirYouTube component for your Air projects. The fourth class FlashYouTube is an only Flash plattform based class, that should be very handy to use for non-Flex projects.

The other classes just simplify the coder's life. So I created some static classes for the various video quality parameters (YouTubeVideoQuality Class), the various PlayerStates (YouTubePlayingState), the YouTube errors (YouTubeError) and of course the available YouTube events (YouTubeEvent).

I wrote an example application for you, which should be very easy to understand. In this very small Flex application you can stop, play and pause the YouTube videos:

//----------------------------------
//  YouTube Player Control
//----------------------------------
private function handlePlay(event:MouseEvent):void
{
	youTubePlayer.playVideo();
	this.addEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handlePause(event:MouseEvent):void
{
	youTubePlayer.pauseVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
private function handleStop(event:MouseEvent):void
{
	youTubePlayer.stopVideo();
	this.removeEventListener(Event.ENTER_FRAME,handlePlayingTime);
}
 
// frame-based Intervall for showing loading and playing process
private function handlePlayingTime(e:Event):void
{
	labelTime.text = youTubePlayer.getCurrentTime() + " / " + youTubePlayer.getDuration();
 
	progresPlayingVideo.minimum = 0;
	progresPlayingVideo.maximum = youTubePlayer.getDuration();
	progresPlayingVideo.setProgress(youTubePlayer.getCurrentTime(),youTubePlayer.getDuration());
 
	progressLoadVideo.minimum = 0;
	progressLoadVideo.maximum = youTubePlayer.getVideoBytesTotal();
        progressLoadVideo.setProgress(youTubePlayer.getVideoBytesLoaded(), youTubePlayer.getVideoBytesTotal());
}

Some behaviours of this Flex-based YouTube component is adjusted for the Flex Framework. If you would like to change the size of the YouTube Player, you can use the witdh and height properties of the component. Furthermore there exists some other properties:

[Bindable] public var volume:int;  // Value between 0 and 100
[Bindable] public var playerState:Number; // Read-only!!!!
[Bindable] public var playbackQuality:String; // Use the static variables of the YouTubeVideoQuality class

Handling and managing of the YouTubeEvents are the last thing I would like to explain. I support the same 4 events, which the YouTube API supports. The only difference is that I wrapped the data of the events in a special YouTube Event for an simpler event handling and code completion.

[Event(name="youtubeStatus", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubePlayerLoaded", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeError", type="de.derhess.video.youtube.YouTubeEvent")]
[Event(name="youtubeVideoQuality", type="de.derhess.video.youtube.YouTubeEvent")]

So here I is my code of my app. I think it is very self-explanatory...

 /* Here should be some code but wordpress always crashed
because of parsing problems... Please download the code
and look at line number 23-112 in the src folder the file
flex_youTube.mxml */

The rest of the functions contains exactly the same functionality as the YouTube API. If something ambiguous, please look at the YouTube API documentation or leave a comment. THX!

Download the Flex YouTube components and source code

Related posts:

1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
2. Working with Vimeo Moogaloop API in Flash
3. Die Gretchenfrage: Wann Flash und wann Flex?

Now I describe some special functionality compared to my FlexVimeo Player component. Because of the incompatible command Security.allowDomain() in the Adobe Air environment  (which is essential for working with the Vimeo Moogaloop API ), I had to create a seperate remote player. This remote player receives control message and send control messages via LocalConnection to the AirVimeoPlayer Component. So if you use my AirVimeoPlayer Component, you must always use my remote_vimeo.swf File for controlling the Vimeo Moogaloop API. It works in the same way as the youTube AS3 API Wrapper.

The other not so nice thing is that I ran in some perfomance issue because of sending to many messages via LocalConnection. So I had to put down the amount of update message for the PlayingState.Playing, but that should not be problem for you. In my cases it works fine.

Otherwise the API of the AirVimeoPlayer is almost the same as the FlexVimeo Player API. So I supported absolutely the same functionaltiy. You can listen to the Events:

[Event(name="vimeoPlayerLoaded", type="de.derhess.video.vimeo.VimeoEvent")]
[Event(name="vimeoDurationChange", type="de.derhess.video.vimeo.VimeoEvent")]
[Event(name="vimeoStatus", type="de.derhess.video.vimeo.VimeoEvent")]

For controlling the User Interface and the Vimeo Video, you can use these functions:

public function stop():void;
public function play():void ;
public function pause():void;
 
/**
 * Seek to specific loaded time in video (in seconds)
 */
public function seekTo(time:int):void;
 
public function unloadVideo():void;
public function destroyPlayer():void;
public function toggleLoop():void;
 
//----------------------------------
//  Screen and RenderManagement
//----------------------------------
 
/**
 * enable HD for the player, but it seems that it is not working?!
*/
public function hd_on():void;
public function hd_off():void;
 
public function showLikeScreen():void;
public function showEmbedScreen():void;
public function showHDScreen():void;
public function showShareScreen():void;
public function showVimeoScreenControlls():void;

And the properties of the AirVimeoPlayer are still the same as the FlexVimeoPlayer Component, except the additional property remotePath:String, which defines the url where the remote player is.

[Bindable] public videoClipID:int; // The vimeo video clip id
[Bindable] public duration:Number; // read-only property
[Bindable] public currentTime:Number; // read-only property
[Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes
[Bindable] public playerColor:uint; // HexValue of the Player Color
[Bindable] public volume:Number; // Volume of the video Player instance
 
[Bindable] public remotePath:String // This is the new property
 
//--------------------------------------------------------------------------
 //
 //  Additional getters and setters
 //
 //--------------------------------------------------------------------------
[Bindable] public isPlayerLoaded:Boolean; // read-only property
public isVideoPlaying:Boolean; // read-only property

I think this information is enough about this kind of component. You can download the testing vimeo app or the whole vimeo air package, which contains the air installation data and all needed source files.

Download the Vimeo Air Component Package

Related posts:

1. Vimeo Moogaloop in Flex – FlexVimeoPlayer Component
2. Working with Vimeo Moogaloop API in Flash
3. An example how to use the VIMEO Moogaloop Javascript API

I created a very ugly and simple Flex GUI Interface, which demonstrates the functionality of this Flex Component. The component has some useful attributes / properties and some Functions. Here a short overview:

FlexVimeoPlayer Properties:

[Bindable] public videoClipID:int; // The vimeo video clip id
[Bindable] public duration:Number; // read-only property
[Bindable] public currentTime:Number; // read-only property
[Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes
[Bindable] public playerColor:uint; // HexValue of the Player Color
[Bindable] public volume:Number; // Volume of the video Player instance
 
//--------------------------------------------------------------------------
 //
 //  Additional getters and setters
 //
 //--------------------------------------------------------------------------
[Bindable] public isPlayerLoaded:Boolean; // read-only property
public isVideoPlaying:Boolean; // read-only property

FlexVimeoPlayer API Functions:

The API functions to control the vimeo player api are still the same, except the setSize() Function is not available anymore. You can use the width and height properties of the component as every other Flex Component. Here are the available functions:

public function stop():void;
public function play():void ;
public function pause():void;
 
/**
 * Seek to specific loaded time in video (in seconds)
 */
public function seekTo(time:int):void;
 
public function unloadVideo():void;
public function destroyPlayer():void;
public function toggleLoop():void;
 
//----------------------------------
//  Screen and RenderManagement
//----------------------------------
 
/**
 * enable HD for the player, but it seems that it is not working?!
*/
public function hd_on():void;
public function hd_off():void;
 
public function showLikeScreen():void;
public function showEmbedScreen():void;
public function showHDScreen():void;
public function showShareScreen():void;
public function showVimeoScreenControlls():void;

FlexVimeoPlayer Events:

	[Event(name="vimeoPlayerLoaded", type="de.derhess.video.vimeo.VimeoEvent")]
	[Event(name="vimeoDurationChange", type="de.derhess.video.vimeo.VimeoEvent")]
	[Event(name="vimeoStatus", type="de.derhess.video.vimeo.VimeoEvent")]

The Events are the same as the VimeoPlayer Events. If you have got some questions for the events, please have a look on my Blog Post Moogaloop and Flash.

That is all information about my FlexVimeoPlayer Component. You can see the component in action here or download it.

Download FlexVimeoPlayer Component and Flex-App Source

Related posts:

1. An Adobe Air Component for the Vimeo Moogaloop API
2. Working with Vimeo Moogaloop API in Flash
3. An example how to use the VIMEO Moogaloop Javascript API