Autor: Peter

Die Gestaltung interaktiver Medienumgebungen und alternativer Interaktionsszenarien gehören zu den spannendsten Themen der Vertiefungsrichtung „Interaction Design“ meines Bachelorstudium.

Im Zuge der „Responsive Environments“-Lehrveranstaltung im vierten Semester durfte mein Team in einer Kleingruppe an einem derartigen Projekt arbeiten. Das Ziel war, ein interaktives audiovisuelles Erlebnis zu schaffen, das im Wahrnehmungslabor der FH JOANNEUM wiedergegeben werden konnte.

Das Szenario

Das Szenario beginnt damit, dass die Person 2-3 Meter von der Wand entfernt befindet. Im Hintergrund ist leise ein Orchester zu hören, das die Instrumente stimmt. Eine Sinuswelle schwingt auf der Leinwand langsam vor sich hin.

Nähert man sich dieser, schwingt die Sinuswelle stärker, die Musik ertönt etwas lauter und mit ein leicht erhöhter Geschwindigkeit. Die Spannung steigt!

Tritt die Person noch etwas näher, enden die Proben und wir sind mitten im Konzert. Die Sinuswelle schwingt nun am stärksten und ein Lichtkreis beleuchtet den Betrachter. Auch die Lautstärke wird fast bis zum Maximum ausgereizt.

Der Lichtkegel verfolgt den Betrachter und macht deutlich: Die Musik ist hier!

Erst wenn man den Abstand zur Leinwand vergrößert, verschwindet der Lichtkegel, die Sinuswelle beruhigt sich und das Orchester kehrt zum Ursprungszustand zurück.

Das Audiomaterial unseres Experiments stammt aus dem Film „Fantasia“. Daher durften wir den Mitschnitt nur ohne Ton online stellen.

• 

• 

• 

Team & Umsetzung

Zu Beginn stand unser Wunsch, Musik zu visualisieren im Mittelpunkt. Anna entwarf und programmierte eine schlichte Animation einer Sinuswelle. Barbara half, das perfekte Audiomaterial zu finden. Ich habe dann alle Teile zusammengefügt und den Lichtkegel sowie das Fading des Tons programmiert. Der erste Prototyp wurde noch mit dem Mousecursor gesteuert.

DI (FH) Daniel Fabry, unser Vortragender, hat die Verbindung zwischen unserem Programm und der Sensoren der Videowall hergestellt. So konnte die Installation auf Nähe und Entfernung der Person reagieren und damit die Parameter wie Geschwindigkeit und Ausschlag der Sinuskurve, sowie Position, Tonspur und Lautstärke der Musik festlegen.

Vielen Dank an Daniel Fabry Christoph Neuhold für die Aufzeichnung unseres Testlaufs.

In diesem Mini-Weberlebnis, im Fachjargon „One Page Story“ genannt, geht es um einen Dialog zwischen einer Hauskatze und einem smarten Assistenten, wie es ihn bereits heute in vielen Haushalten gibt. Anders als in der Realität zeigt der Assistent einen lebensechten Charakter und versucht, die Stimme des Haustiers zu interpretieren und Hilfestellung zu geben. Es kommt soweit, dass der Assistent in einem Vortrag die Arbeitsweise einer Bilderkennung (Computer Vision) erklärt.

Charaktere

Entstehungsprozess

Herbst 2020: Im ersten Schritt haben sich alle Studierenden gemeinsam mit dem Thema „Fluid“ auseinander gesetzt und unzählige Ansätze zur Bearbeitung des Themas gefunden. Besonders interessant fand ich das Thema „Neuronale Netze“, die in den vielen Illustrationen im Netz fast wie ein Fluid aussehen. Das Endprodukt der Lehrveranstaltung sollte eine „Geschichte“ sein, die beim Scrollen durch die Website erzählt wird.

Danach habe ich mich genauer mit neuronalen Netzen befasst, die sich im Gehirn verändern und wachsen können. Auch bei künstlichen neuronalen Netzen funktioniert das ähnlich.

Auf einem digitalen Whiteboard „Miro“ habe ich Ideen gesammelt, dem Konzept eine Form gegeben und schließlich ein Storyboard geschrieben.

Ein besonders großer Einfluss war die Erzählweise der Kindersendung „Es war einmal … das Leben“, wo die Protagonisten das Innere des Menschen besuchten. Auch der Grafikstil von „Simon’s Cat“ war mir ein Vorbild.

So wurde das Ergebnis eine Story im direkten Sinne – mit Charakteren und einem Dialog.

Dieser handelt davon, dass eine Katze mit einem Computer spricht und dieser ihr zeigt, wie neuronale Netze funktionieren und dazu führen, dass er mit ihr kommunizieren kann. Kurz darauf folgten die ersten Zeichnungen für die Gestaltung. Die Katze sollte süss, faul und verfressen sein – der Computer hilfsbereit und gut gelaunt. Dessen aussehen ist eine Hommage an den iMac der frühen 2000er Jahre.

---

Dezember 2020: Nun ging es an die Umsetzung. Die Lehrveranstaltungen im Dezember gaben uns einige Vorschläge, in welcher Technologie die Programmierung stattfinden könnte. Ich entschied mich für GSAP. Es ist ein Framework für viele unterschiedliche Projektarten und hat auch ein Plugin für Scroll-Aktionen. Ich fand auch ein Beispiel für den Aufbau, wie die Story seitenweise durchgeblättert werden kann. (Das nennt sich Scroll Snapping) So sollte verhindert werden, dass beim Betrachten Dialogboxen übersprungen werden. Rein visuell findet jedoch alles auf einem Screen statt. Die Akteure (Katze, Computer, Möbel, etc.) sind am Bildschirm fixiert.

Eine große Herausforderung war, dass Animationsschritte in sehr vielen Fällen nicht an den geplanten Stellen abgespielt wurden. Ich habe daher zusätzlich zu den Bilschirmseiten eine Timeline erstellt und die Javascript Aktionen an die Elemente auf dieser geknüpft. So konnte ich visuell prüfen, ob die Elemente richtig angesprochen wurden.

Jänner 2021: Nach zwei Neustarts, unzähligen Überarbeitungen wurde die Website fristgerecht fertig. Es blieb auch Zeit, die Charaktere weiter zu verfeinern. Dazu nutzte ich ProCreate am iPad, um meinen Zeichenstil einzufangen. Im zweiten Schritt baute ich die Formen in Illustrator nach und verbesserte die Proportionen.

Weitere Infos und Impressum

Diese Abschlussarbeit der Lehrveranstaltung „Interaction Design“ im WS 20/21 ist eine Interaktive „One-Page Story“. Mein Ziel war, ein dynamisches Weberlebnis zu schaffen, welches nur durch scrollen zum Leben erwacht. Das Projekt wurde in klassischem HTML, CSS und JS umgesetzt. Als Animationsframework kam GSAP zum Einsatz.

Idee, Storyboard, Illustrationen der Charaktere, Programmierung: Peter Beck

Als wir im Sommersemester 2020 mit unserem Projekt in der LV „Generatives Design“ begonnen, hatten Laura und ich ganz unabhängig voneinander ganz ähnliche Ideen. Laura wollte gerne Sternzeichen, das Wetter und weitere Symbole in einer Visuellen Komposition verbinden. Meine Idee war eine dynamische Lichtinstallation, die aktuelle Wetterdaten abstrahiert darstellt und so ein ständig wechselndes Erscheinungsbild hat.

Umsetzung

Der gemeinsame Nenner beider Ansätze ist ein Farbverlauf, der sich dynamisch zur Uhrzeit ändert. Dazu werden situationsbedingt diverse Objekte eingeblendet um die Tageszeit oder das Wetter zu verdeutlichen.

Im ersten Entwicklungsschritt haben wir für verschiedene Uhrzeiten, Farbverläufe und die Uhrzeiten an denen sie sichtbar sein sollen, festgelegt. Die Farben werden in der Zeit dazwischen interpoliert.

Danach wurden die Akteure gestaltet, um den Himmel lebendiger zu machen. So entstanden Wolken, Vögel, ein Zeppelin und sogar ein UFO. Diese wurden teilweise per Zufall und teilweise zu bestimmten Zeiten eingeblendet.

• 

• 

• 

• 

• 

Ergebnis

Als wir fertig waren und die Animation auf großen Bildschirmen und einer Leinwand abspielen konnten, war das gesamte Potential der Arbeit sichtbar: wir haben eine universell einsetzbare immersive Installation gestaltet, die das Ambiente in einen Raum verändert.

Wenn die Farbwerte an Phillips Hue oder an RGB Leds weitergeleitet werden, lässt sich Projektionsfläche noch weiter vergrößern.

Team & Umsetzung

Laura Varhegyi: Konzept
Peter Beck: Konzept & Programmierung
Jennifer Marban und Nina Radeschnig: Illustration der Akteure (Wolken, Vögel, …)

Created 2020 by Peter, Laura, Jenni, Nina / IND18

Eines der angenehmen Projekte während des COVID-Semesters an der FH JOANNEUM war das Kunstprojekt.

PROTECT beschreibt die Diskrepanz zwischen der tatsächlichen und der scheinbaren Schutzwirkung.

• 

Robuste Arbeitskleidung in leuchtenden Farben schützt zuverlässig vor Staub, Schmutz und Verletzungen. Vor einer Ansteckung von COVID-19 hat sie ganz offensichtlich keine Wirkung und die Bevölkerung wird angehalten, einen Mund- und Nasenschutz zu tragen.

Dabei ist „Schutz“ ein relativ filigraner Begriff. Auch in Arbeitskleidung kann man sich verletzen. Auch mit einer Mundschutzmaske können Viren in die Atemwege gelangen. Werden wir ausreichend geschützt? Oder geht es dabei nur um das Gefühl von Sicherheit?

Protect hinterfragt die Situation in der Baubranche im Frühjahr 2020. Mitte März wurde aufgrund der Ausbreitung von COVID-19 von der Regierung Schutzmaßnahmen eingeleitet, die die Wirtschaft beinahe zum Stillstand gebracht haben. Systemrelevante Dienste wie der Lebensmittelhandel, Müllabfuhr, Apotheken und Ämter blieben unter bestimmten Sicherheitsvorkehrungen geöffnet. Anders sah es auf den Baustellen aus. Arbeiter wurden in vielen Fällen dem Risiko einer Ansteckung ausgesetzt, da anfangs aus wirtschaftlichen Gründen auf einen ausreichenden Schutz vor Ansteckung verzichtet wurde. Je nach Tätigkeit mussten mehrere Personen auf engsten Raum arbeiten und schlafen. Das führte unter anderem Anfang Juli 2020 bei einer Grazer Baufirma zu einer rasanten Ausbreitung des Virus.

Die Arbeit mit den Seitenmaßen von 100x100cm stellt die österreichische Bevölkerung dar. Die drei Nägel an der rechten oberen Ecke repräsentieren die Corona Statistik – bestätigte Fälle, genesene Patienten und Tote.

https://www.instagram.com/p/CEzXOJWHjL2/

Fotos vom Entstehungprozess

• 

• 

• 

• 

• 

Die spannendste Arbeit des fünften Semesters ist die interdisziplinären Lehrveranstaltung „Research and Knowledge“. Hier arbeiteten wir ein Thema aus und gestalteten ein kurzes Video und ein Poster. Ich habe mich in meiner Soloarbeit für das Thema Haptik & Design entschieden.

Wir leben in einer Gesellschaft, in der sich immer mehr am Bildschirm abspielt. Wir spielen, wir arbeiten, wir kaufen ein: immer mehr Vorgänge finden online statt.

Trotz der Digitalisierung hat Haptik immer noch einen großen Stellenwert in unserer Gesellschaft. Etwas mit den Händen zu begreifen macht etwas tatsächlich real und lässt es nachhaltig im Gedächtnis verankern.

Wie erleben wir Objekte in unserer Umgebung? Was ist ein „praktisches“ Produkt? Fühlt sich unsere Wohnungstür wirklich einladend an?

Die zentrale Frage dieser Arbeit ist, wie das Design über Haptik die Emotionen der Menschen beeinflusst und wie wir das als Gestalter*innen nutzen können. Erzählungen aus Interviews, aber auch persönliche Erfahrung des Autors werden mit Literatur aus dem multisensorischen Marketing verknüpft. Es wird ein Einblick gewährt, wie wir Dinge unserer Umwelt im Gedächtnis verinnerlichen.

Design und Material von Produkten sind wichtiger Faktoren, die sich diese Vorgänge zu Nutze machen. Designer*innen sind gefordert, etwas zu schaffen, das angefasst werden will.