4
INTERREACTION
INHALTSVERZEICHNIS Der QR-Code auf der gegenüberliegenden Seite verweist auf das Online-Verzeichnis. Dort finden sich unter anderem Verweise zu multimedialen Inhalten.
Vorwort .......................................................................... 2
01 EINLEITUNG
7
Einführung ..................................................................... 8 Wie nutze ich dieses Buch? ..........................................11
02 MEDIEN
13
Entwicklung ................................................................. 14 Interaktive Medien ......................................................18 Beteiligte ..................................................................... 24 Modalitäten ................................................................ 28
03 RAUM
Vermischte Realität .................................................... 42 Umgebungsintelligenz ................................................ 48
31
Der physische Raum ................................................... 32 Der zeitliche Raum ..................................................... 36 Der logische Raum ..................................................... 38
04 WAHRNEHMUNG
53
Sehen ........................................................................... 56 Hören ........................................................................... 60 Fühlen .......................................................................... 62 Riechen ........................................................................ 66 Schmecken ................................................................... 70
05 HANDLUNG
73
Schnittstellen ...............................................................74 Sprache .........................................................................76 Mechanik .................................................................... 78 Gesten ......................................................................... 80 Blick & Mimik ............................................................ 82
„„„„„„„„„„„„„„p„„„„ „„„p„„„„p„„„„„„„„„„„ „„„„„„„p„p„„„„„„„„„„„ „„„„„„„„„„„„„„„„„„„„„ „„„„„„„„„„„„„„„p„„„„„„ „p„„„„„„„„„„„„p„„„„„„„„„
MA_PA_Einleitung.indd 4
04.05.15 12:13
5
interreaction.de
Bewegung .................................................................... 84 Biometrie ..................................................................... 88 Umwelt ........................................................................ 90
Web ............................................................................ 172 3D-Design ................................................................ 180
07 TECHNIK 06 BEST PRACTICE
93
Übersicht ..................................................................... 94 Architektur .................................................................. 96 Corporate Design ..................................................... 104 Editorial .....................................................................116 Fotografie .................................................................. 120 Illustration ................................................................ 124 Information ............................................................... 132 Licht ........................................................................... 140 Bewegtbild ................................................................ 148 Sound ........................................................................ 156 Typografie ................................................................. 164
189
Eingabe ...................................................................... 190 Verarbeitung ............................................................. 198 Ausgabe ..................................................................... 202
08 ANHANG
209
Vertiefung ................................................................. 210 Bildquellenverzeichnis ............................................. 212 Literaturverzeichnis ................................................. 216 Danksagung .............................................................. 220
„„„ „„„„„ „„„ „„„„„ „„„
MA_PA_Einleitung.indd 5
04.05.15 12:13
INTERREACTION
30
3.01 Cloud Pink (Everyware, 2012) p S. 152
MA_PA_Raum.indd 30
04.05.15 12:41
31
RAUM
03 RAUM
Zeitlich, räumlich, logisch
Wenn man Menschen auf interaktive Medien anspricht, denken die meisten an das Internet. Dieses schon fast klassische interaktive Medium und (virtueller) Interaktionsraum soll aber bei der nachfolgenden Betrachtung interaktiver Medien eine zurückgestellte Rolle einnehmen. Die Interaktionsszenarien im Web, über Maus, Trackpad und Tastatur gesteuert, sollen von den Interaktionsräumen unterschieden werden, die uns abseits von Arbeitsplatz und heimischem Schreibtisch begegnen. Nicht Webseiten, Blogs oder Online-Communities interessieren an dieser Stelle als Ort der Interaktion. Stattdessen beispielsweise Museen, Geschäfte, Bilbiotheken und Firmensitze; private, semi-private und öffentliche Plätze. Was sie kennzeichnet, wie wir Menschen sie unterscheiden, wann wir von der einen in eine andere Zone wechseln, aber auch die Bedeutung des zeitlichen Raums für interaktive Medien – damit befasst sich der erste Teil des Kapitels.
ten Welt, um sie »Teil eines größeren sozialen Ereignisses werden zu lassen, das auch außerhalb des Webs einen bleibenden Eindruck hinterlässt. Der einzige Weg, das zu erreichen, ist über eine Idee, die interaktiv in den Köpfen der Menschen arbeitet, die sie intellektuell einbezieht [...] – über einen Dialog oder eine Form der Einbindung in die Kampagne, statt sie nur passiv anzuschauen« (Linderman, S. 217). Den Überschneidungen der virtuellen mit der physischen Welt und der Frage, wo die Grenze bei der Betrachtung in dem vorliegenden Buch verläuft, widmet sich der zweite Teil dieses Kapitels.
SCHNITTMENGEN MIT DER VIRTUELLEN WELT Wenn man von interaktiven Medien spricht, auch wenn sie in Form von Alltagsgegenständen oder künstlerischen Installationen verpackt sind, spricht man trotzdem oftmals von Systemen, die auf das Internet als Quelle von Interaktionsdaten zugreifen oder es als Übertragunskanal zwischen zwei Interaktionsstandorten nutzen. Interaktive Kommunikationskampagnen können Brücken schlagen, zwischen Facebook & Co. und der ech-
MA_PA_Raum.indd 31
04.05.15 12:41
INTERREACTION
32
DER PHYSISCHE RAUM
Um den virtuellen vom physischen Raum als Ort der Interaktion abzugrenzen, lohnt sich ein Blick in die ISO-Norm zur Ergonomie der Mensch-System-Interaktion. Dort werden aufgeführt: der physische Raum, der zeitliche Raum und der logische Raum. Der physische Raum »umfasst das Layout, die Position und die Konfiguration taktiler/haptischer Objekte im Bezug zum Benutzer und zu den anderen Objekten, mit denen der Benutzer interagieren könnte. Die Maße sind bei der Gestaltung des physikalischen Raums von Bedeutung.« (Normenausschuss Ergonomie u. a., 2011, S. 22) Neben der Ausformung des Objekts spielt natürlich aber auch der Ort eine wichtige Rolle. Stellt er doch den eigentlich Raum der Interaktion dar. Dieser Raum lässt sich in privaten, semi-privaten und öffentlichen Raum unterteilen. Privater Raum ist der Raum, den wir besitzen, für dessen Betreten es einer Erlaubnis bedarf. Nur wenigen Menschen wird zu diesem Bereich ungefragt Zugang gewährt. Der semi-private Raum bezeichnet etwa Geschäfte, Konzerngebäude oder Schulen. Der öffentliche Raum ist für alle Personen ohne vorherige Genehmigung zugänglich, und dieser Zugang darf nicht grundlos verwehrt oder eingeschränkt werden. Gleichwohl unterliegt er aber natürlich Regeln und Gesetzen, die bei Gestaltung von Medien im öffentlichen Raum beachtet werden müssen. »The public space is per se not a narrative space, it‘s a transit space. [...] If you
MA_PA_Raum.indd 32
04.05.15 12:41
33
RAUM DER PHYSISCHE RAUM
Info Abstufung des physikalischen Raums privat – semiprivat – öff entlich
3.02 Radiant Soil (Philip Beesley Architect, 2013) Diese interaktive Architektur reagiert auf die Menschen in ihrer Umgebung, lockt sie aber auch durch Duftbotschaften an. p S. 96
MA_PA_Raum.indd 33
04.05.15 12:41
INTERREACTION
136
IMPULSBAUHAUS mediaarchitecture.de, 2009, Klient mediaarchitecture.de, Kontext angewandt, Dimension Installation, Interaktion Berührung (Gesten), Artefakte (Position, ID)
6.47 Interaktiver Tisch Ausstellung im white.cube.09 vor dem Hauptgebäude der BauhausUniversität Weimar
MA_PA_BestPractice.indd 136
04.05.15 13:45
137
BEST PRACTICE INFORMATION
책
MA_PA_BestPractice.indd 137
04.05.15 13:45
INTERREACTION
138
Software: Processing S. 200, S. 198 , Ruby on Rails S. 201 , MySQL, Flex S. 201 , reacTIVision S. 198 Hardware: Beamer S. 203 , Lautsprecher, Videokamera S. 194 , Infrarot-Strahler, Artefakte, Touchscreen mit Objekterkennung S. 198 , Computer, Internetverbindung 3
http://ireact.de/impuls
—
Mitwirkende: Dr. Folke Dietzsch, Christine Löser, Ronny Schüler
Das Bauhaus, mit seinen Architekten, Künstlern und Gestaltern, schrieb Weltkulturgeschichte. Mit dem Projekt ImpulsBauhaus möchten Jens Weber und Andreas Wolter die weltweite Verbreitung und Einflussnahme des Bauhauses bis in die Gegenwart nachvollziehbar machen. Das 90-jährige Jubiläum der Gründung der Schule wurde zum Anlass genommen, die sozialen Netzwerke innerhalb des Bauhauses, und darüber hinaus, zu untersuchen. Das Projekt ImpulsBauhaus besteht aus zwei Teilen. Der erste ist ein Forschungsprojekt und die dazu gehörige, umfangreiche Datenbank. Die Biografien der Bauhäusler sowie ihre persönlichen Beziehungen untereinander wurden dokumentiert, strukturiert und in diese Datenbank eingepflegt. Der zweite Teil ist eine Ausstellung, in der diese Informationen in Form von (interaktiven) Visualisierungen zugänglich gemacht wurden. Das Kernstück dieser Ausstellung bildet ein interaktiver Touch-Tisch, der es den Besuchern erlaubt, selbst zu bestimmen, welche Informationen dargestellt werden. Der Tisch visualisiert und erläutert die komplexen Beziehungen der Bauhäusler zueinander. Die umfangreichen Informationen werden direkt aus der Datenbank abgerufen und für den Besucher visuell aufbereitet. Indem man die Porträts wichtiger Bauhäusler auf dem Tisch ablegt, werden Informationen zur jeweiligen Person angezeigt (vgl. Abb. 6.50). Wird ein zweites Porträt hinzugefügt, zeigt der Tisch die Verbindungen zwischen diesen beiden Personen an. Indem man auf eine Verbindungslinie tippt, werden zusätzliche Details zu dieser Beziehung angezeigt.
MA_PA_BestPractice.indd 138
04.05.15 13:45
139
BEST PRACTICE INFORMATION
6.48 Interaktionssteine nn Porträts wichtiger Bauhäusler 6.49 Zentrales Element n Der interaktive Tisch mit Netzwerkdarstellung und die damit verknüpfte Online-Kartenanwendung 6.50 Interaktive Verknüpfungen %
MA_PA_BestPractice.indd 139
04.05.15 13:45
INTERREACTION
190
EINGABE
7.02
Kapazitiver Sensor
KAPAZITIVER STREIFENSENSOR Aus diesem leitfähigen Webstoff lässt sich ein Berührungssensor in beliebiger Form erstellen. p
http://ireact.de/tech1
b
Radiant Soil, S. 96
7.04
Fiducial Marker
FIDUCIAL MARKER Fiducial Marker sind durch das Open-Source7.03
Kapazitiver Berührungssensor
Projekt reacTIVision bekannt geworden, mit dem es möglich wurde, aus günstigen Einzelteilen einen Multi-
KAPAZITIVER BERÜHRUNGSSENSOR
Touch-Tisch zu bauen. Die Marker werden an der
Kompakte und sehr günstige Methode, um hapti-
Unterseite von Artefakten angebracht. Wenn das Arte-
sche Interaktion in ein Projekt zu integrieren. Gibt bei Berührung der Oberfläche ein Signal aus.
fakt dann auf den Tisch gelegt wird und der Marker auf der Tischoberfläche aufliegt, können sie identifi ziert und getrackt werden (vgl. reacTIVision, S. 198).
p
http://ireact.de/tech2
b b b
Anamorphic Logos / Mirror, S. 104
p
http://ireact.de/tech3
Elektrobiblioteka, S. 116
b b
ImpulsBauhaus, S. 136
F800 EXHIBIT, S. 180
MA_PA_Technik.indd 190
Noteput, S. 168
04.05.15 15:30
191
TECHNIK EINGABE
ireact.de/in
ULTRASCHALL-DISTANZSENSOR Eine relativ leistungsstarke Lösung, um herannahende Personen zu erkennen und ihre Entfernung zum Sensor zu messen. Gängige Geräte erkennen Objekte in mehreren Metern Entfernung (vgl. Link). p
http://ireact.de/tech4
b b
Radiant Soil, S. 96
7.05
Sephora Sensorium, S. 112
Ultraschallwellen Ultraschallwellen-Distanzsensor Distanzsensor 7.06
Microsoft Kinect
7.07
Kinect point cloud with depth of field.
TIEFENSENSOR Bekanntester Vertreter dieser Technologie ist Microsofts Kinect, das mit einem Tiefensensor der Firma PrimeSense arbeitet. Eine wesentlich präzisere Bewegungsauflösung liefert der Leap Motion Controller. Dessen Erkennungsradius ist jedoch begrenzt auf die Hände des Nutzers.
MA_PA_Technik.indd 191
p
http://ireact.de/tech5 (Duo)
p
http://ireact.de/tech6 (MS Kinect)
p
http://ireact.de/tech7 (Leap Motion)
b b
Anamorphic Logos / Mirror, S. 104 Cloud Pink, S. 152
04.05.15 15:30
INTERREACTION
198
VERARBEITUNG
7.27
TEENSY 2.0
TEENSY 2.0 Mit 1,8 cm Breite und 3,1 cm Länge gehört das Teensy zu den Zwergen unter den Mikrocontrollern.
7.26
p
http://ireact.de/tech28
b
Elektrobiblioteka, S. 116
Arduino UNO
MIKROCONTROLLER Arduino (s. o.) ist der am weitesten verbreitete Open-Source-Microcontroller. Diese Mini-Computer ermöglichen es, Sensoren auszulesen und Lichter, Motoren etc. anzusteuern. Durch den geringen Strombedarf und die kompakte Bauweise lassen sie sich leicht integrieren. Die meisten der hier gezeigten Bauteile können auf direktem oder indirektem Weg mit einem Microcontroller ausgelesen und weiterverarbeitet werden. Entweder direkt auf dem Controller oder durch eine Drittsoftware (vgl. S. 200 f.). p
http://ireact.de/tech27
b b b b
Radiant Soil, S. 96
7.28
Fiducial Marker aus der Sicht der Software
REACTIVISION
Sephora Sensorium, S. 112
p
http://ireact.de/tech3
LAIKA, S. 164
b b
ImpulsBauhaus, S. 136
Literally Speaking, S. 172
MA_PA_Technik.indd 198
Noteput, S. 168
04.05.15 15:31
199
TECHNIK VERARBEITUNG
ireact.de/prozess
7.29
WLAN Router
7.31
LIVESTREAM
Starfield p S. 184
OPENGL
Live-Übertragung, z. B. eines Videosignals, über
Die Open Graphics Library ist eine Spezifi kation
Netzwerk, WLAN oder Webstream (vgl. Link). Beson-
für eine plattform- und programmiersprachenunab-
ders letztere Technik ist mittlerweile ausgereift und
hängige Programmierschnittstelle zur Entwicklung
macht Live-Übertragungen in HD über eine herkömm-
von 2D- und 3D-Computergrafi ken, die in Echtzeit
liche Internetanbindung möglich.
berechnet werden können. WebGL – das Pendant für
p
http://ireact.de/tech29
Web-Anwendungen – ermöglicht es, auch in aktuellen
b b
EyeWriter, S. 124
Browsern aufwendige 3D-Inhalte darzustellen.
ACCESS, S. 140
p
http://ireact.de/tech31
b
Starfield, S. 184
GLSL <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
Die OpenGL Shading Language ist eine Programmiersprache, um mittels OpenGL auf dem Grafi kpro-
7.30
Anfang eines XML-Dokuments
zessor eigene Programme, sogenannte Shader, auszuführen. Shader berechnen das Aussehen eines Objektes
GRAFFITI MARKUP LANGUAGE
oder erzeugen Spezialeffekte.
p
http://ireact.de/tech30
p
http://ireact.de/tech32
b
EyeWriter, S. 124
b
Cloud Pink, S. 152
MA_PA_Technik.indd 199
04.05.15 15:31