Robert Brauer :: random walks across computer science and procrastination shred

Hacking Expedit

2011-11-01T12:57:00.001+01:00

Recently we decided to beef up our bland ikea furniture a bit. The victim was an expedit rack that we use as a hi-fi rack in our living room. I am a huge fan of pixel art and would cover my whole appartement in 8-bit if I could. Anyhow, as we wanted it to be something that is functional and nice to look at, we decided the only reasonable thing to do is to cover the whole rack with a curtain of dice.

From a functional perspective, this had two benefits. First it stabilised the rack by making it heavy and rigid, which makes it a perfect base plate for a vinyl player. Secondly it hides the mess in the rack. I have to be honest. Mess is inevitable and good cover techniques are vital sometimes. In any way, we also wanted something that is a bit unusual, interesting, but a pleasure to look at.

We finished it for quite some time now and are really happy with the results. As this little exercise however was quite simple and as it didn't take any time to jazz up the hi-fi rack, I quickly wanted to note down the process we went through.

Step 1:

At first, we chose an appropriate image. Essentially, we wanted a picture that is easily recognizable in a low resolution as we didn't want to the picture to cover our whole appartement. Moreover, the space on the little expedit rack was actually quite limited, so the image needed to stick out. Finally and most importantly, it should be something nice to look at, so we were test driving a lot of images. We started with something like this:

Step 2:

Using the Pixastic library we built a javascript based prototype (that you can find online here). Basically, we converted a variety of images into a monochrome version, scaled it down to a resonable amount of pixels and subsequently posterized the image to 6 levels of grey that we could easily replace with one of the faces of a die. This is how the intermediate step looks like:

Step 3:

In a final step, we replaced every grey pixel within the image with its counterpart symbol for the face of the dice. This way, we ended up with a map of how to place all the dice of the expedit panels. All in all the whole project took us about two tinkernights. One day coming up and playing with the tool as well as deciding for the final image. The other night we spent on glueing the image to the panels. Quick and easy. The map for the example image would like something like this:

Our final rack:

Finally, we had long discussions who would be best to decorate our new rack. Personally I am a big fan of italian spaghetti-western uber hero Bud Spencer, so the decision was quite easy. However, everything we were looking for was a picture that comes with a clear contrast and a pleasant smile. The overall cost for this project was about 90 Euros, for about 3000 dice (we found cheap remnants on ebay) and 4 expedit panels.

And this is it:

The tool

For your own pleasure and convenience, you can play with the tool live on: http://brauer.tv/downloads/dice/ to dice any picture on the web you like. If you're thinking about making changes to the code to adjust it for your own tinkerings, you are also more than welcome to downloaded the source files here:

Download the dice tool sourcefiles

Multichannel Experiences

2011-08-20T15:29:00.002+02:00

Recently I have to deal a lot with user experiences of services and products that live simultaneously on websites, microsites, mobile, in mail or social media, in-store and even in call centres. These services and products, to which we refer to as multichannel experiences, can be quite challenging to get right.

Thoughts about design as well as assessment characteristics relating to consistent multichannel experiences have recently been published via Foviance (here) and also got referenced in the UX Storytellers project (here) to support designers as well as researchers in the UX field dealing with these sorts of problems.

In a nutshell, the most relevant characteristics to consider when assessing or designing for consistent multichannel experiences are:

Coherent - basic idea of the service is perceived as consistent across channels.
Complementary - coherent service experience delights with specific benefits within chosen service channel.
Simultaneous - benefits of service channel can be combined as needed.
Shiftable - service adapts to customer flexibility and present needs.
Synchronized - service allows shifting between channels and shared features across service a shared among channel.

Naturally, multichannel experiences design is far more complex. Consistency however has been observed to be one of the most important factors.

Infographics Love

2011-05-10T23:02:00.006+02:00

I love Infographics. Extensive problems explained quick and easily digestive, appealing, engaging. Recently I talked to the creators of Ubuntu about opening up the OS to a wider audience and used this tiny Infographic to open up the conversation...

The real masters of Infographics can be found at places like:

Learn Something Every Day

2011-01-26T02:30:00.004+01:00

Learn Something Every Day is a brilliant project. Every day the folks at Young put out a new fun fact skit that amuses me a lot. Though I do look at their site on an almost daily base and even subscribed to their feed, I was wondering if their might be a somehow ubiquitous way to integrate these little units of mental candy into an everyday.

That's why they can now be streamed to a Chumby.

The final widget

After all this widget is nothing too fancy. It simply reads the LSED feed and creates some sort of slideshow displaying ten fact skits, one after the other. Beyond just watching and enjoying it you can also skip through the slides by clicking them.

Please, feel free to throw the widget on your chumby, dash, android or whatever. It is listed here in the free widget section of chumby.com.

For your own pleasure and convenience, the widget and all the source files can also be downloaded here:

Download LSED chumby sourcefiles

But as some of you might be interested in playing with the widget to create their own, let me walk you through some of the modifications that had to be made.

Cobbling the widget

Basically the widget I created is a quick-n-dirty modification of the Sample RSS widget provided from the official chumby wiki. Essentially all magic worth highlighting is bundled in two methods that are displayed below. But let me explain the tricky parts...

First this widget is written in Actionscript 2, which is a somehow old way to steer flash movies. Unfortunately flash doesn't allow your widgets in general to load external ressources without the need of a little effort. To load external ressources, I had to put a crossdomain file and a little php file to proxy the feed as well as the images to the chumby.

After creating the proxy, essentially one method needed adjustment - loadItem(). Lines 5 to 11 show how an XML based feed is being traversed to distill the adress of the images. The the previously loaded image will be removed from the stage which brought up a very strange problem about removing movieclips. You can see the solution to it in lines 19 and 20. Finally a new clip will be created dynamically (see dynamic referencing in line 14) and loaded into the widget via a common MovieClipLoader. Once the image is loaded it will be tweened and adjusted to the widget and equipped with the skipping feature.

Here are the important code parts for reference:

1:  function loadItem(item)   
2:  {  
3:    g_currentItem = item;  
4:    //dig in feed for image  
5:    var xmlData = new XML(item.firstValueOfType('content:encoded'));  
6:    xmlData.ignoreWhite = true;  
7:    var url = "";  
8:    for (i = 0; i < xmlData.childNodes.length; i++)  
9:      for (j = 0; j < xmlData.childNodes[i].childNodes.length; j++)  
10:        if(xmlData.childNodes[i].childNodes[j].attributes.src != undefined)  
11:        url = xmlData.childNodes[i].childNodes[j].attributes.src;  
12:    //fade out and get rid of the previous LSED image   
13:    var loader_mc:MovieClip =   
14:    _root["loader_mc"+(g_itemIndex - 1 < 0 ? g_items.length - 1 : g_itemIndex - 1)];  
15:    var alphaTweenHIDE:Tween =   
16:    new Tween(loader_mc, "_alpha", Regular.easeOut , 100, 0, 6, true);   
17:    alphaTweenHIDE.onMotionFinished = function()   
18:    {  
19:      if(loader_mc.getDepth() >= 1048575 || loader_mc.getDepth() <= 0 )  
20:        loader_mc.swapDepths(2000);  
21:      loader_mc.removeMovieClip();  
22:    };  
23:    //load new LSED image  
24:    var container:MovieClip =   
25:    createEmptyMovieClip("loader_mc"+g_itemIndex, getNextHighestDepth());   
26:    mcLoader.loadClip(makeURL(proxy+url),container);  
27:  }  
28:  function onLoadInit(mc: MovieClip)   
29:  {  
30:    var alphaTweenSHOW:Tween = new Tween(mc, "_x", Strong.easeOut , -330, 0, 3, true);   
31:    mc._yscale = 50;  
32:    mc._xscale = 50;  
33:    mc.onPress = function() { nextItem(); };  
34:  }

Sculpting a Master's Thesis

2010-11-06T21:55:00.000+01:00

Tough to realize, but in the last couple of months, I spent quite a lot of time on writing, sculpting and vagabonding over a single page of text; i.e. the abstract of my master's thesis.

In retrospect the process of gradually sculpting it has even been quite helpful. Not only did it help to communicate the gist of it to friends and colleagues to develop and discuss ideas. Primarily it served as a mental scaffolding to define the scope of the research project, while keeping track of what is being done, how and why of course.

As usual I was looking around how others performed on writing an abstract for their project and found it quite helpful to look at their work. Returning the favor of sharing attempts on this, please have a look on my attempt on...

Summarizing the master project

The need to increase physical activity is a burden to many. In order to encourage physical activity with the help of technical mediation, related research has taken a wide variety of promising attempts to support individuals in facilitating and sustaining healthy lifestyles. When it comes to offering valuable clues about personal performance though, the problem space of providing motivational feedback is characterized by a lack of substantial techniques and strategies that assure to affect an individual user effectively.

To address the present issue this study investigated the problem space of applying negative reinforcement into an ubiquitous computing environment to examine potential opportunities as well as drawbacks of applied persuasive conditioning strategies to encourage physical activity. A qualitative approach has been taken to investigate the present problem space after the applica- tion of negative reinforcement into an intervention design accompanied by an observation phase lasting two weeks time. Post to the observation phase, interviews have been conducted with eight participants followed by an analysis based on the combination of Grounded Theory and the Transtheoretical Model of behaviour change as an underlying theoretical framework for investigation.

With regard to the current discussion within related fields of research about the effective application of negative reinforcement, this study found appreciation of its application based of several design factors, which will be presented and elaborated over the course of this paper. As a result this study aims to emphasise on the general potential to incorporate a wider set of conditioning strategies into application designs to support their overall persuasive effect. In the way these strategies are understood to naturally shape desired behaviour, potential design space is supposed to institute to similar application areas as long as these strategies follow design considera- tions that align to their target audience in the most elegant manner and in particular aim at the provision of efficiently graspable feedback.

Poster Presentations

2010-03-22T23:32:00.018+01:00

From time to time I get asked to design a poster for a project and it has always been a struggle. Be it at university, work or on any kind of conference, a poster presentation is quite helpful to get across small project ideas, but it can be just painful if it fails to support a message.

There are loads of recommendations on poster design in the net and almost any university or company has its own guidelines. Learning about some basic rules that address the use of layout, graphics and especially fonts is essential. Though inevitable and quite effective I personally think is to keep an eye on the work of fellow students and colleagues. Just by strolling through conference halls it is possible to generate new ideas, adapt handy methods or to just observe epic failure that clearly needs to be avoided in a future project. Unfortunately most posters get thrown away once a conference ends, which is a pity for some of them.

That said, I would like to share some of my posters, noting that all of them lack of any kind of professional background. Please do not understand this as an example show for recommended design but note that all of them have been presented in a more or less professional and diverse context with general recognition.

Siggraph Poster

The automated interior designer is a project we presented at Siggraph in 2008. Our intention with this poster was to create an understanding of a fairly conceptional algorithm as well as the idea behind its design.

pro: The flow. The focal point is the result which is smoothly separated from the approach itself. Though it's a bit tricky, most of the audience gave their second glance to the approach, already understanding what the result will be. In addition the comparability of problem and result are immediately accessable and give room to the two major steps of the algorithm.

con: There is a lot of text on this one. Fortunately Siggraph has an academic context with people who are incredibly curious. A lot of them took the time to go through it but in any other context I'd rather opt for less text and more self-explanatory graphical elements.

Business Poster

Connecting real and virtual worlds has been one of the IBM Extreme Blue projects in 2008. Our intention with this business poster was to demonstrate the components as well as the structure of a software system to crosslink real and virtual entities.

pro: Though a little bit pale, the subtle mirroring contrast of both worlds and their interplay has been received. We took this understanding to explain the interaction of the components inside the system. That worked quite well.

con: Apart from emphasizing the mirrored crosslink of real and virtual entities, the pictures are pretty meaningless. In addition the whole poster is visually blurred which becomes clear by telling that the role of the middleware is the most important aspect in this one.

UbiComp Poster

This poster has been made in support to a publication at UbiComp 2009. The intention in this case was to show the whole project from an initial motivation to the final prototype.

pro: Even without anybody around to explain what the project is about it has been possible to understand what is happening here. Despite the textual heap also subtle color coding and indicators support the concept. In a very retentive way though.

con: Reservation and again... if there is one argument to justify this approach, it would be its academic context.

University Project Poster

This one is from a HCI course at UCL in 2010. The idea behind it was to present a product by highlighting its development process based on user centered design.

pro: There is a clear visual separation between the analysis on the left, the product in the center and the detailed approach to its right.

con: Unfortunately this one misses to open the door for understanding the product itself. There is no catching element on the poster and just a quite passive representation of the solution. Hence it failed to focus attention and made the solution hardly accessable.

AR Flashlight

2009-08-17T10:04:00.013+02:00

Some months ago a couple of colleagues at Fraunhofer ESK Munich and me duct-taped a mobile projector together with a webcam aiming at a software solution to combine the intuitive work with physical information resources, e.g. books or papers (for research or courseworks) with the benefits of online research, e.g. effective search or cross referencing.

After some weeks of trial and error cowboy coding we finally came up with some kind of reading lamp used like device to annotate special physical objects with meta data. The augment reality flashlight system (physically similar to MITs 6th sense) first of all recognizes an object, then searches for important data on the internet and finally creates a seamless interface right next to the object.

Based on OpenCV, especially with its support on Speeded Up Robust Features and Motion Tracking, as well as the conceptual input from projects such as the "Multi-user interaction using handheld projectors", "Motion-based finger tracking for user interaction with mobile devices", "Fast 2D Hand Tracking with Flocks of Features and Multi-Cue Integration" or "Map torchlight: a mobile augmented reality camera projector unit" to name just a few... we created the system shown above in the video working without the need of any special markers.

Even though this is work in progress and the software is pre alpha, we'll be presenting the system and primarily its interaction technique in October at UbiComp 2009 to share some thoughts about it and to discuss ideas about several application areas.

Mobile Assistance Systems

2009-02-14T12:45:00.009+01:00

For the last few weeks I have been involved in a research project called ELEPHANT (backronymic for: Elements for Pervasive and Handheld Assistants) helping to design a kind of mashup-IDE to develop mobile, multimodal and context sensitive assistance applications.

In a nutshell the system provides tools to stick together applications out of simple modules for any type of occasion without cluttering up your system. The benefit of using Elephant furthermore is that your application is able to react on certain situations... either a user or a device presence. A generally understandable example on this broad topic is given in the video above.

Further progress on the project will be published at the Mobile World Congress in Barcelona and via the institutes' website.

Untitled.

2009-02-13T23:33:00.010+01:00

One of the first attempts on serious modelling...

Face to Face

2009-01-28T10:41:00.023+01:00

Here are some faces I once scribbled to add a kind of personal touch to a mobile soccer game. By dynamically combining several parts (skulls, noses, eyes and mouths) to a single face, it became feasible to generate a number of distinguishable field players at little cost. The whole trick does anyones brain by generally recognizing little variations in peoples faces.

Anyway... I have kept them to visualize ideas in several talks, to show interaction cycles or role-based systems. Please feel free to use them in any way you like, if they seem to be advantageous. Beyond that... feel free to drop me a line if you have enhanced the collection or successfully integrated them into one of your projects.

Download some pixel based faces as png
Download some vector based faces for Illustrator

Automated Interior Design

2008-09-10T01:09:00.004+02:00

The Automated Interior Designer analyses architectural models and automatically places objects within a given region, based on user defined rules. The prototype imports 3D models from Cinema 4D, furnishes them and exports the composition back into Cinema.

Since a fellow student from the University of Applied Sciences Bremen and I have presented the AID indie study as a poster at SIGGRAPH 08 in Los Angeles, from this day it is also possible to generate small level for the Crysis leveleditor Sandbox2.

If you are interested in the techniques behind this gadget feel free to go through the paper.

Extreme Blue

2008-09-03T03:23:00.006+02:00

This summer I got the chance to participate in IBM's Extreme Blue program and I would like to drop a few lines for people who think about doing the same thing.

As a student I was very curious how it may be like in one of the busiest development and research facilities of the big blue. Thinking about some superlatives I also wondered how the place itself is, who and how are the guys working there and if we could have a nice time together doing some cool stuff.

Bottom Line upfront: Extreme Blue rocks!

and these are some reasons:

It is during the semester holidays... and if you are not from around Stuttgart there additionally is a great town to discover.
There are 4 teams in 4 different projects with 4 members each adding up to 16 nerds from all over wherever that you can spend a summer with. A lot of them became good friends.
This bunch roughly multiplies by 5 during the Extreme Blue Expo. This is where all European teams meet somewhere in Europe to present and discuss their projects. Naturally there is a hell of a party afterwards :-)
Participating seems like a small team start-up simulation with all the aspects, which means you have to go through the whole project foobar process and you are included in nearly any choice. The big pro: There is a countless crowd of consultants behind your back.
Besides the mentioned team members you will work and meet with people from all over the world. Managers, Researchers, Developers, Specialists etc. that all tell their own story. Individually helpful.
Although one might think the project is challenging enough, the timetable is enriched with social skill training, technical seminars and social events.

My project was about techniques for interweaving virtual data and real objects on the base of active RFID concerning monitoring and maintenance issues.

FYI. the direct link to the Boeblingen page.

Terranoxa

2008-08-06T12:33:00.007+02:00

Terranoxa is a project where some friends and me try
find a new perspective on the browser strategy game genre driven by the fascinating anytime-anywhere access of browser games.

Therefore we are developing a platform for creating - on a technical base - common browser games, like they are often played in Germany redefining common user interface design, interactions, usability and game play to create an application that reminds more of high-class computer games than contemporary browser games.

By using state-of-the-art techniques we try to close the gap between classic computer games and browser games making browser games more popular and combining the best features of both sides into a expandable composition.

Fastfood Software

2008-07-12T23:58:00.004+02:00

A while ago Adobe announced their cross-platform Integrated Runtime environment for creating Rich Internet Applications.

To me this sounds like a perfect opportunity for rapid prototyping in software development or the creation of stuff I'd like to call Fastfood Software. These are tools utilized as daily problem solver but not that important one should spend a lot of time creating them. Reasons are trial and error issues or short time usage. Anyway... Playing with AIR I created a prompt for platformwide saving TODO's on toodledo - an essential GTD gadget.

Concerning FAST cooking, this is receipt:

A free Toodledo account with its REST interface for all the data stuff
The java Toodledo client made by Marc as code base
J2AS3 Java to Actionscript 3 converter translating the code Marc wrote
The as3 corelib e.g. for MD5 crypto feature needs
A nice Date Chooser made by Roy
Some graphics... basically Icons
And as bun some code I wrote wrapping it up and representing the app

That's rounding up to 3 hours of work for getting fully functional but simple software. Served Chilled.

FYI: For using Toodledo in program space I highly recommend using Fluid and nonimage's css hack for Toodledo Things style or Jake's Toodledo Quick Add for Firefox

Immersive Environments

2008-04-12T11:48:00.011+02:00

Enhancing immersion of video games is a popular research topic along many disciplines. As the question of immersive environments came up in lectures some friends and me decided to build a simple jump'n'run like game concerning the interweaving of surrounding and gameplay into the design.

We came up with a little not-that-but-somehow-scary game called Fatalis and decided, although research seems to point into the direction of concentrating on senses that work more nearby (e.g. olfaction or sense of touch) rather than from those, working in distance (e.g. vision or audition).

Since we did not feel the need of ventilation after defeating a boss enemy we concentrated on increasing the visual and auditive experience by listening to and filming the ambience of the player and reacting to it, e.g. attracting enemies by noise.

Long story short. Based on the ideas of tile-based games in Flash we have created a isometric engine in AS2 that can easily be fed with xml-based descriptions of level and new textures. Please feel free to play with the code.

Download engine source snippets

Context Aware Gaming

2008-03-19T01:30:00.001+01:00

The context aware soccer manager is basically a browser game including mobile extensions mixing real world and web experiences.

Whereas the regular league takes place in the browser, training a team demands the user to perform real world actions with his mobile phone.

The game was developed as a project of the University of Applied Sciences Bremen and was rewarded with the first place at the Bernd-Artin Wessels Innovationprice 07.

Mapping 3/3

2008-03-12T00:02:00.009+01:00

Agenda Item #3: So here is the thing

We are going to track the emotions of people while watching several movies. The basic emotions will be color coded and this information will result in a color bar which is representing the movie.
Now, if you like to watch a movie you just describe how it should like to be and the system can make suggestions based on your description. It's like cooking and the decision about which ingredients will make the meal.

Here are some examples:

The Last Samurai

The Matrix

Walk The Line

Texas

Bambi 2

The Lake House

Bad Boys 2

Sure, this is just a finger excercise but can be seen from a wide perspective. Bon Appetite :-)

Mapping 2/3

2008-03-06T22:34:00.000+01:00

Agenda Item #2: How to map X on Y (and why)

Movies generally lack, as any other media does too, from classification issues. Categorizing media helps to build up feature groups or to browse it, for example. The problem of genre classification will jump right into your face if you spend some time drifting around in a video store wondering what makes this or that film to a action flick or to a drama.

Furthermore our motivation was to find an easy way of selecting a film you might like to see based on contextual parameters. Think of the situation of people asking the videostore guy for advice. Usually they are looking for a film which is having this or that.

In this case the parameters are limited to: Emotions or the question of "How do you want to be entertained?"

Mapping 1/3

2008-02-24T23:50:00.004+01:00

Mapping is a general issue in the information landscape. How to professionally garnish more or less complex data so it becomes savoury and easily digestible in an interactive way is a special dish in the media informatics fields so we discussed techniques and observations during lectures and workshops at university.

The final workshop unit was a Do-it-yourself go-out-and-map-something excercise, raising the questions of What and How seemlessly implicating the Why.

Agenda Item #1: We need an idea.

After some hours of windless Brainstorming we decided that the most productive way of getting it done would be machine based managed fluke which led us to gambling with the one-armed bandit - the professional term for this brainstorming technique is semantic intuition.

To give a machine the opportunity of feeding us with a initial idea we tinkered a program which kind of randomly displays a 2 word mash of limited media based vocabulary. It's primary function was the suggestion to map X on Y.

The most interessting suggestion (among a lot of weird ones) was to map Emotions on Film.

Hello World

2008-02-20T15:04:00.000+01:00

In this public weblog I occasionally would like to put out some random walks and thoughts concerning human-computer interaction and computer science as well as related workaday stuff regarding the projects I participate in.

Basically this is to give some public feedback and to share general design problems I kept myself busy with, including source code samples, design snippets or common cowboy approaches so you can appraise the stuff facing your own plans and projects preferably sharing your ideas, too.

Please feel free to comment on the following entries.