This course aims at imparting knowledge concerning the basic principles of the three dimensional space as well as fundamental visualisation techniques to the students. The course is divided in a lecture with practical parts.

Key aspects

• conceptional development of visualisation models which are suited as demonstration of big and complex datasets
• enlargen the set of information to three or more dimensions (traditional visualisation techniques examine most of the times only the possibilites of the two-dimensional space)
• impart knowledge of analytical and methodical skills in three-dimensional thinking and visualisation

Subject of the project

Development of alternative visualisations of hierarchical data in the three-dimensional space

Currently all operating systems use as the only way to display data and folder structures lists and charts. The students develop new and  unconventional approaches to display these data structures far away from lists and charts.

Demo videos

Fabian Kreuzer + Tobias Precht

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Daniel Höll + Philipp Seyschab

Olga Grischtschenko, Jonas Kimmelmann + Julia Staebler

Gero Nicklas, Ralf Retzler + Jan Schlegel

Alexander Wilhelm + Tobias Brossig

Christian Schaaf, Markus Schilling + Carsten Henschel

Jan Barth, Dominik Huber + Roman Grasy

Posters

Mesut Kaya, David Ikuye + Frank Schaeffer

Anja Rapp + Benedikt Burgmaier

Visualization of the proximity of the content. Press reload to load a new random set

Page context (ig.hfg-gmuend.de)

The proximity of the content aims at offering to the user an alternative possibility to navigate across the wiki ig.hfg-gmuend.de. Contrary to the conventional hierarchical way to navigate which you can find below “menu” – the focus of that kind of navigation is on the proximity of the content.

Interactions

• drag’n’drop: move and fix the nodes
• click: opens the hyperlink
• alt-click: break the fixation of the node
• Cmd/strg-click: opens the hyperlink in a new window

Proximity calculation

For the calculation of the proximity of the content we primarily needed the necessary data which are provided by the Wiki. This happens by the following way:
We query the data bank as followed: (simplified example) “dear data bank; please search all the pages in our Wiki that fulfil the following conditions”:

• at least 1 tag in common with the current page
• pages, that are linked to the current page
• pages, that are linked with outgoing links on the current page
• pages, that are at a level above in the breadcrumb-navigation

For all the Wikipages that were found, we now will calculate the Tanimoto coefficient to our current page. The Tanimoto coefficient represents the accordance of 2 sets of categories to each other. Example:
The Tanimoto coefficient of the following 2 sets

A: dog, cat, tree
And
B: dog, cat, house
Is 0,666

By applying now these calculated results; we are now able to place, categorize and filter all the provided Wikipages:

• nodes with links or back links to other nodes will be set on a higher rank
• by applying the Tanimoto coefficient, we are now able to create a ranking of all the nodes
• only nodes which correspond more than 5% to the conditions of the central node shall be provided

All the pages that fulfilled these conditions represent now our data basis in order to create our visualisation. The quality of our system depends always on the quality of the authors’ categorisation, because, without having tags we are not able to make any conclusions about the relation of the contents.

Visualization

The red node represents our current page. We call this our central node. The coloured codification – 3 different tones of grey – represent the moment of the last update (view also the legend). Principally, the distance between the nodes represents the distance of the content. Neighboured nodes therefore have the highest agreement. The branching structure of our visualisation is found because we are going in strict rotation through our ranking (ranked after the similarity to our current page). By applying the Tanimoto coefficient we are now trying at every step to find the node that fits the best and to link it afterwards with our current page. We repeat this step until we went through our complete ranking and until all the nodes are created. The positioning of the nodes is calculated by a so-called “force directed layout algorithm”. The idea is that every node repels automatically all the other nodes and every brink behave like a virtual feather. The system tries automatically to achieve a relaxed condition. That is why this algorithm is often used to create networks out of graphs.

XML interface

The data concerning the proximity of the content of a certain page are provided by a simple web service. Consequently, they easily can be found and read by a standard http search. They also can be used by every other application: The data are transferred by using a xml file.

Http Query

The http query is always done by adding “/naehe.xml after the url of a page of the Wiki.

Example: For the current page “medienlabor/inhaltliche-naehe” the url has to be http://ig.hfg-gmuend.de/medienlabor/inhaltliche-naehe.xml

XML Structure

For our current visualisation; we only have used a part of the provided data. We defined the interface as general as possible to allow creating a lot of different visualisations. The structure of a XML file is always categorized as followed:

• <naehe> root node, the highest point in the hierarchy
• <wiki_categories> all the tags of the Wiki (we didn’t use that in our current visualisation)
• <centralnode> the current page
• <breadcrumbs> all the pages of our Wiki that are higher in the hierarchy of the breadcrumb navigation
• <wiki_link_related> all the pages that are linked to our current page of the Wiki
• <category_related> all the other pages of the Wiki which possess an intersection of the tags to our current page

Source

Complete sourcecode Flex (AS 3) Project (16/12/2008).

Links

• Visualizing Data, First Edition by Ben Fry. Copyright 2008 Ben Fry, 9780596514556.
• XPath implementation for ActionScript 3.0
• German translation of this post

One of my main “side” projects running in 2008 was the conception and coordination for the new wiki of the department “Interaktionsgestaltung” (interaction design) at the HFG Schwäbisch Gmünd. Starting point was an analysis of all possible needs for the upcoming wiki:

• internal
  • project timeline and archive
  • documentation / course materials
  • stop the brain-drain (graduated students leave the school every semester)
    • project documentations
    • howtos
  • easy and comfortable transfer of knowledge
    • professor to student
    • student to student
  • collaborative working
    • research
    • process documentation -> blogs
• external
  • uncover whats going on at the HfG -> applicants
  • constant flow of attractive content for the “outside world”
  • project timeline and archive
  • establish the site as a professional problem solving site -> howto

This outline (shortened) was our basis for the final realisation.

We recognized that most of problems and needs can be categorized into these two main categories: internal and external. These two points are reflected in two slightly different views of the site. For instance the landing pages, the two right side menus, post-it box etc. change according to the user “role”. All students, faculty members etc. have an internal user role and the rest of the world an external one.

The benefit of using a wiki is to get very easy a comprehensive and permanent collection of knowledge, over all topics related to the department Interaktionsgestaltung like project documentations, technical howtos or course materials. This collaborative approach has furthermore the advantage to fulfil the internal communication need of sharing and distributing knowledge and at the same time being very attractive to an external public.

Screencast “Basic Overview” in german spoken by myself, including a funny southern accent. yeah!

Participants

Patricia Dobrindt, Miguel Nobrega, Martin Glueckler, Leandro Neves, Karl Meyer, Jonas Heuer, Eduard Warkentin, Dominic Specht, Christian van Elten, Asaad El Salawi, Ulrich Lang, Thomas Techert, Kirstin Walker, Barbara Saga, Andreas Brendle, Sandra Kuehefuss, Julian Koehn, Kathrin Guther, Johanna Stuke.

Task

We developed extensive architectural projections for the 100th anniversary of the HFG building. At the same time we got to know the visual programming language VVVV. The workshop aimed at having several possible scenarios which refer all to the architectural context of the building. A model of the building – in a scale of 1:50 – as well as all relevant parts of the building in a digital version were placed at our disposal. Therefore, we could completely focus on learning VVVV and the projections.

Setup: model, viewer and 2x projectors

Setup and model, scale 1:50

3d Matching

The key technology for the simultation of the projections on a real model is a so-called 3d matching. Basically, 3d matching means solving the question “how is it possible to bring a virtual 3d model in agreement with  real geometry?“ Because of the agreement of reality and virtuality, several completely new opportunities are provided,
Note, for example the following opportunities:

• you can illuminate a building in a way it would never be possible in reality
• the building exterior becomes a perspectively correct display
• the building or the parts of the building exterior can be extended without having to execute real changes
• the building or building exterior can be moved (compare also to kinetic building exterior)
• by a specific projection a certain kind of x-ray effect can be reached, which gives the viewer the feeling of looking into the building
• the volume of the building can be moved and documented

3d matching: real vs. virtual

#vvvv is only projected onto the cube

Workshop results

Patricia Dobrindt, Jonas Heuer, Dominic Specht und Leandro Neves

Martin Glueckler, Karl Meyer, Julian Koehn und Miguel Nobrega

Kirstin Walker und Barbara Saga

Kathrin Guther, Sandra Kuehefuss, Asaad El Salawi und Andreas Brendle

Eduard Warkentin, Christian van Elten, Ulrich Lang und Thomas Techert

Additional materials

• Initial lecture media facade
• Joreg’s links 2nd day:
  • eurekacarpark
  • moillusions.com
  • julian beever
  • 2loop.com

• Patches
• How To Project On Complex Geometry

Timelapse video over the whole 5 days

The course is part of the basic courses in curriculum of the “Interaktionsgestalter” programm. The course tries to teach the students in a very general way methods of spatial organisation of elements and layout, independent of dimension and media. So it was very obvious to extend in this exercise (see below) the communication medium from a normal screen to other media like light and leds.

Exercise

The Students have to visualize a 20 to 30 seconds long piece of instrumental music. The Visualisation have to be based on a parametersystem to meet objective and subjective criteria. The goal is to translate the syntax of the chosen instrumental into a readable visual equivalent.

Setup: 2×7 LED pannels, each panel with resolution of 72 pixels and 1 meter length

Julian Köhn + David Leßmann. Music: Introduction Et Rondo Capriccioso – Saint Saëns

Lena Irschl + Barbara Saga. Music: Autumn Leaves – Dirk Reichart

Please note, some students chose not to use the leds as their display. You can see their documentation videos underneath:

• Thomas Techert, Philipp Gräßer: Happy End
• Christian van Elten, Kirstin Walker: God Moving Over The Face Of The Waters
• Jürgen Graef, Ulrich Staruszkiewicz, Fabian Gronbach: Jynweythek
• Andreas Brendle, Andreas Burghart: Musikvisualisierung Failure33Object
• Eduard Warkentin, Joao Martins

3d navigation and facedetection

Inspired by Johnny Chung Lee’s wii-headtracking experiments we decided to do everything a little bit more “elegant”. In our setup the user doesn’t have to wear IR-leds to be detected. Technically the installation has a built in facedetection, so it’s possible to track in realtime all users in front of the setup quite accurate. According to distance and positions the virtual 3d space is adjusted. Always the closest user “wins” the focus.

If you like this kind of navigation it’s worth to checkout “Buddha in a Box” by Finn Rudolph which is based on a similar approach.

3d model interaction and markertracking

A simple example for a 3d markertracking done with ARtoolkit. User can interact with three different markers: one represents the node structure, the other two enable the user to manipulate (attract and distract) the node structure.

3d navigation and potentiometer + distance sensor

User can navigate a simple 3d structure with a potentiometer and IR-distance sensor. Potentiometer is an usual in trade powermate, IR-distance sensor is controlled by an arduino board.

3d navigation and wii controller

User can rotate and zoom the same 3d structure like above. The two IR-leds acting as pointing device, the position of the two pointers is detected with by a standard wii-controller.

Promotion Poster for the new degree programme “Interaktionsgestaltung” (Interaction Design) at the Hochschule für Gestaltung Schwäbisch Gmünd. The Poster shows the long history of digital projects at the HFG Schwäbisch Gmünd over 18 years. Historical projects are stringed together in a helix shaped timeline with starting point in 1990 (bottom) until it ends with recent projects in present (top).The helix shape, the connection lines and the z-axis sorting were done within vvvv. The blank frames were imported to indesign and later filled with project documention screenshots (in correct chronological order) via some indesign scripting.

Detail

During the workout process of our diploma book, we did quite a lot of experiments with generative elements. Because at the end we just could use a limited number of these elements, we decided to design some posters to document these “effects”.

(90,5cm x 128,0cm). Script effect overview poster

All posters are technically done with the Indesign Scripting Interface and a with little help of Processing (recursive area tiling, see end of post). For each “effect” like for instance “connecting all words in one line with all words from the next line”, we programmed always a single script. After we did the book we realised that we got a nice collection of scripts, where you can easily see the spectrum of our experiments. During the diploma-exhibition at the HFG Schwäbisch Gmünd quite a lot of people asked us about these scripts. So we decided to tide up everything and to release this collection in public. Feel free to use and modify these scripts however you wish. Any feedback about modified scripts or projects is very welcome!

Voilá, here it is: MrGenerativeSystemeScriptPack_1.0.zip

Mini demo video

Install notes

• Download and unzip MrGenerativeSystemeScriptPack_1.0.zip
• Copy the “MrGenerativeSystemeScriptPack_1.0″ folder to:
  CS3 -> \Adobe InDesign CS3\Scripts\Scripts Panel
  CS2 -> \Adobe InDesign CS2\Presets\Scripts
• Done. Probably the scripts will work only in CS2/CS3.

How to use it

• Open the “Scripts” Window in Indesign (View -> Automation -> Scripts, or press Alt+Ctrl+F11 this hotkey works only in CS3)
• Select one or multiple textframes
• Run a script by double clicking eg. “MrConnectWord.jsx”
• Some scripts like “MrTweenCharacterPointsize.jsx” accept also selected text

For more informations on Indesign Scripting check hilfdirselbst.ch, adobe forums or the official adobe scripting page. Last but not least, a special “merci” to the hilfdirselbst.ch forum, for answering all our questions so nice!

(90,5cm x 128,0cm). Recursive area tiling algorithmen, various scripts applied on ~300 tiles

(90,5cm x 128,0cm). “MrTweenCharacterPointsize.jsx” and “MrTextlineRest.jsx” in action

(90,5cm x 128,0cm). Recursive area tiling algorithmen, various scripts applied on ~300 tiles

Because Indesign Scripting is sometimes super slow (especially if you try to create a lot of new elements), we decided to use instead Processing for our algorithmen. In Processing everything was way faster, after creating the “tiles” there, we imported it via pdf to Indesign. An online applet of our “recursion tiling algorithmen” can be found here.

Recursive area tiling algorithmen in Processing

- A compendium of visual possibilities of generative techniques -

Diploma thesis of Julia Laub and Benedikt Groß, co-authors Joreg and Rainer Kohlberger, University of Applied Sciences (Hochschule für Gestaltung) Schwäbisch Gmünd.

Book concept of a compendium for imaging generative techniques, specially for designers and related disciplines. Theoretical and historical introduction, practical part with code examples and presentation of existing projects in the area of generative art and design.

“Generative Systeme” is a compendium book (at the moment only in German) of imaging generative techniques with two goals: first readers can have easily an overview over the whole topic of generative techniques and second learn with practical examples how to use these techniques to profit later from them.

Our Definition of “Generative Systems” is: they are systems, letting you create complex visualizations which aren’t possible to create by the normal approach (edit objects manually).

Because of the quickly development of the computer industry more and more possibilities are offered, “Generative Systems” are going to be very important and popular in future. You can see this in the last few years by the increased appearance of software tools, which have their main focus on generating things, like Processing, VVVV and many others.

At the moment there is more a deficit of documentation and information rather than a deficit of “possibilities” compared to mid of the 90ties. There was no point in media or computer-history with this kind of potential possibilities accessible for a wide public like now. Till now there was no literature for designers and related disciplines (like art, computer science in media, etc.) with an overview and in addition showing “how to do it”. The thesis “Generative Systeme” tries to close this gap.

The content is divided into the following 4 parts:

• Theory, historic and thematic introduction in Generative Art and Design
• Input, collection of input techniques (like parsing, tracking, timeline etc.)
• System, collection of generative techniques
• Output, A selection of existing projects, references back to “System” part

The second part “Input” shows various input techniques for collecting data. The third part “System” consists of a collection of techniques in Generative Art and Design. All examples are exemplified with the two programming languages Processing and VVVV. The fourth part “Output” is a lookbook chapter featuring the mentioned techniques (of the “System” part) applied in existing projects.

Selection of pages

Theorie

System

Output

Anhang

- Ein Kompendium der visuellen Möglichkeiten generativer Systeme -

Diplomarbeit von Julia Laub und Benedikt Groß, Co-Autoren Joreg und Rainer Kohlberger, Hochschule für Gestaltung Schwäbisch Gmünd.

Methodensammlung bildgebender generativer Techniken für „gestaltungsaffine“ Leser. Theoretische und geschichtliche Einführung, praktischer Teil mit Code-Beispielen und Vorstellung bereits real existierender Projekte zur Thematik.

„Generative Systeme“ ist ein Kompendium in Buchform von bildgebenden generativen Methoden das zweierlei leistet: erstens kann sich der LeserIn auf einfache Art einen Überblick über das Themenfeld verschaffen und zweitens anhand konkreter Beispiele lernen, sich selbst generative Systeme zu Nutze zu machen.

Unter generativen Systemen sind Regelwerke zu verstehen, mit deren Hilfe sich komplexe Visualisierungen erzeugen lassen. Diese Visualisierungen kennzeichnet, dass sie nicht mehr mit der klassischen Vorgehensweise (Objekte werden einzeln von Hand editiert) realisierbar sind.

Da sich die Computer-Technologie rasant weiterentwickelt und immer mehr Möglichkeiten bietet, werden generative Systeme zukünftig immer wichtiger und populärer werden. Man kann dies besonders in den letzen Jahren an dem vermehrten Auftreten neuer Software Tools sehen, die speziell für generative Zwecke konzipiert wurden.

Momentan besteht damit eher ein Defizit in der Dokumentation und Information als ein Defizit an „Möglichkeiten“, wie es Mitte der neunziger Jahre der Fall war. Zu keinem Zeitpunkt in der Computer- und Mediengeschichte waren derart viele potentielle Möglichkeiten einer solch breiten Öffentlichkeit zugänglich. Bisher existiert insbesondere für ein Publikum aus dem gestalterischen Umfeld (Design, Medieninformatik, Kunst etc.) keine Literatur, die einen guten Überblick bietet und dazu auch zeigt „wie es geht“. Die Diplomarbeit „Generative Systeme“ versucht diese Lücke zu schließen.

Das Buch setzt inhaltlich aus folgenden 4 Teilen zusammen:

• Theorie, geschichtliche und thematische Einführung in das Thema generative Gestaltung
• Input, Sammlung von Eingabemöglichkeiten (Timeline, Parsing, Tracking etc.)
• System, Sammlung generativer Methoden
• Output, Auswahl real existierender Projekte, Verweise zurück zum Buchteil „System“

Im 2. Teil „Input“ werden verschiedene Techniken zur Erfassung von Daten vorgestellt. Der 3. Teil „System“ besteht aus einer Sammlung von generativen Methoden der visuellen Gestaltung. Die Anwendung aller Beispiele wird anhand der beiden Programmiersprachen Processing und VVVV erläutert. Der 4. Teil „Output“ ist ein Bildteil, der die erwähnten Techniken in konkret realisierten Arbeiten zeigt.

Auswahl an Doppelseiten

Theorie

System

Output

Anhang

Original resolution 1280 x 1024 px @ 60 fps

Abstract

We decided not to go the usual way (take an already produced piece of music and do for this an timebased animation with a video editing tool). Instead we composed a minimalistic electro track to have before all possible informations like notes, pitch, volume, length … and our own dramaturgy.

Dramaturgy

Quantity diagram: appearance of all samples

By analysing these informations, we figured out a “set of rules” which maps the musical informations directly to a visual output. For that “mapping” we developed a mini visualizing software. The software is fed via Midi with exactly the same notes (data), like the ones controlling the musical part. For instance, if Midi Note #43 – “Dri Metal” – is played, the visual rule is: Rotate all one step to the right. Everything is based on our system of rules, there is no animation in the common sense at all.

The shown clip is just a live recording during the playback of one pass of the entire track. There was no editing afterwards.

Setup diagram

After doing quite a lot of experiments, I decided to do a small exemplary installation to show others the rich possibilities of this topic. The installation was based of three different kinds of examples:

• Lindenmayer-system
  Originally a model for the growth processes of plant development but modified for more interesting results
• particles
  An idealised simulation of 150 particles interfering together in space
• 3d mesh generator
  Two modified mathematical models by Paul Bourke (astro-math-guru)

Diagram (context generative systems)

One of the templates for the control panel. A rfid tag is attached to the backside to differ the three examples automatically with the computer

Control panel: usb arduino microcontroller, 5x poti, 10x buttons (and a distance sensor, not used here)

consulting: Prof. Hans Krämer and Tanja Huber
special thanks: Tebjan