This semesters student projects

Studentische Projekte aus dem Fachbereich Mediendesign der
Hochschule Hof / Campus Münchberg.

Student projects from the Department of Media Design at
Hof University / Campus Münchberg.
Prof. Michael Z̦llner РInteraction Design

IxD_Lab (by Sarah Thielsen)

Interaction Design
Gestische Interaktion im Operationssaal mit Microsoft Kinect in Kooperation mit Siemens Healthcare
Gestural interaction in the operation room with Microsoft Kinect in cooperation with Siemens Healthcare

-> Projekte ansehen / See all projects

Information Architecture
Netzneutralität in Kooperation mit
Net neutrality in cooperation mit

-> Projekt ansehen / See project

Experimentelle Leitsysteme für das Dokumentationszentrum des Reichsparteitagsgeländes in Nürnberg
Experimental signage systems for the documentation centre of Nuremberg’s Party Rally Area
-> Projekte ansehen / See all projects

3D Printing
Makerbot Replicator Einführung
Makerbot Replicator introduction

Creative Coding Repository at GitHub
Processing Kursmaterial, Plugins und Example Code
Processing course material, plugins and example code

-> Sommersemester 2012 / Summer semester 2012
-> Media Design at Campus Hof
-> Arbeitsblog
 (Registrierte Nutzer / registered users)

Interaction Design at Hof University

BTW: I’m Interaction Design professor at Hof University in Muenchberg now!

These are my student’s projects of the last semester:

Interaction Design
Kollaboration mit dem Richard Wagner Museum in Bayreuth
Collaboration with Richard Wagner Museum in Bayreuth

-> Projekte ansehen / See all projects

User Experience Design
Kollaboration mit dem Richard Wagner Museum in Bayreuth
Collaboration with Richard Wagner Museum in Bayreuth

-> Konzepte ansehen / See all concepts

Alice im Wunderland Informationsgrafiken
Alice in Wonderland Information Graphics

-> Informationsgrafiken ansehen / See all information graphics

Creative Coding
Arduino Workshop LED Wall

-> Projektdokumentation / Project documentation

PointCloud: How does it work?

PointCloud is an iOS App that expands a Webkit Browser with advanced Augmented Reality features. Thus you can stick for example a DIV with video, images or even Processing.js sketches onto images or objects in reality. I simply took a reference image of Wil Wheaton’s t-shirt and stciked an SVG / CSS 3D animation to it. The result is an perspective emitter of stencils.

Take a look at the HTML document to get an impression how to write a simple app in PointCloud:
PointCloud’s documentation isn’t complete yet. They are providing some examples, which are too complex for learning and a PDF document with further descriptions. They are still lacking a complete API reference. But i know that documentation is hard work and they just released their software.

I reduced their example to a minimum. It’s only initializing and tracking one image. Therefore you have to link an image in the head of the document. The image has to be on a public server on the internet in order to be downloaded and processed by PointClouds server. A local web server doesn’t work.

The only relevant Javascript function is onAppLoaded(). Here we are activating the tracking target image:

function onAppLoaded() {
viper.activateReferenceImage("p1_wil"); // id of image link

Your HTML content is put within a hierarchy of DIVs controlled by PointCloud:

That’s it. Load your file in PointCloud browser and fine tune the positioning.

A Wil Particle Emitter in Augmented Reality

You probably have heard of the Recursive Wil Wheaton t-shirt. Paul (of Paul and Storm) sent it to Wil and this photo became quite popular. It was remixed by an unknown genius into an animated gif and “won at the internet”.

Over the weekend i experimented with the new PointCloud Augmented Reality SDK (which is by the way brilliant and simple: 3D tracking and HTML5). I took Recursive Wil and turned the concept around: A Wil Wheaton Particle Emitter.

Scott Meyer from sent me the original SVG file of the shirt’s image. My first try was using Processing.js for animation (Yes! Processing.js now works in AR). But SVG and CSS 3D were the better choice to get a perspective effect. And it’s hardware accelerated on iOS.

If you want to try it on your iPad / iPhone:

1. Download and install PointCloud Browser in App Store
2. Open it and point it to this URL:
or click this link on your iPad / iPhone 

How does it work?
Here’s a short description and the source code.

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Processing JS Plugin Test

Testing Processing JS WordPress Plugin by Keyvan.

Works great as soon as i disable WordPress should correct invalidly nested XHTML automatically in Settings / Writing. Otherwise Wordpres adds i.e. </width> when using i<width in a for loop.

Overview: Interactive Cultural Heritage Projects

An overview of my interactive Cultural Heritage projects over the last years.

Motion Bank Augmented Reality Postcard
An Augmented Reality visualization of Ros Warby dancing Deborah Hay’s “No Time To Fly”. She was captured by 3 cameras in order to extract her silhouette and calculate her 3D position. The postcard and the brochure are tracked via natural feature tracking with Fraunhofer IGD’s Mobile AR framework.


DATEV Lange Nacht der Wissenschaften in Nürnberg
Posters come to live thorugh Augmented Reality. The iPad app illustrates the history of the Datev Company, data processing and taxation. It was presented 2011 at Nürnberg’s Lange Nacht der Wissenschaften.


dARsein: Augmented Reality Tour through Architectural History at House of Olbrich
The iPhone app visualizes the compelling history of Darmstadt’s unique Jugendstil quarter with Augmented Reality. Jump back in time visually by photos you take with your iPhone: Augmented Reality superimposes information on each picture and visualizes the impressive historical architecture of the Art Nouveau in front of real building.


MovableScreen at Allard Pierson Museum in Amsterdam
During the “A Future for the Past” exhibition of Allard Pierson Museum ( in Amsterdam we are presenting two Augmented Reality applications on the MovableScreen: A virtual reconstruction of Satricum and an annotated landscape on a 1855 photograph of Forum Romanum (Rome Reborn).


Augmented Reality Sightseeing
A table with a satellite image of Berlin shows a 3D model of the Berlin Wall and the urban development from 1940 – 2008 are displayed. Therefore urban grain plans showing areas covered with buildings is augmented on the satellite image. The visualization was presented on UMPCs and the iPhone via video seethrough. Furthermore posters are simulating the system working outdoors. Historic photographs are seamless superimposed and showing the development of landmarks.


iTACITUS Reality Filtering
Reality Filtering enables context sensitive overlays of original historic drawings of missing paintings or lost architecture. For a seamless integration we are rendering the reality in the style of the original drawing (here: blach and white). At Reggia Venaria Reale ( we are visualizing missing paintings in Diana Hall, different architecture styles of Palazzo Diana and the lost Temple Diana in the gardens of the palace.


Rome Reborn Augmented Reality at SIGGRAPH 2008
Augmented Reality overlays of 3D roman monuments via markerless tracking.


How to Disable Annoying Elastic Scrolling in Safari / Chrome on OSX Lion

Apple thinks that web pages on OSX Lion have to wobble like on the iPad. Even when there’s nothing to scroll. When using the mouse wheel or scroll gesture inside text box or a WebGL window while zooming into a 3D scene the whole content wobbles.

Richard York posted a simple solution via CSS:

body {
overflow: hidden;