Bei dem Projekt „Airlight” handelt es sich um eine temporäre Lichtinstallation. Diese macht gemessene Luftdaten ausgewählter Innenräume der Universität mithilfe von Licht sichtbar. Dadurch wird auf einen Blick erkennbar, ob die Temperatur und der Kohlendioxidwert im Raum besorgniserregend sind. Ergänzt wird die Lichtinstallation durch eine Website, auf der eine digitale Lichtinstallation in Form eines 3D-Modells die temporäre Installation langfristig dokumentiert und erlebbar macht. The „Airlight“ project is a temporary light installation. It uses light to visualise measured air data from selected indoor spaces at the university. This makes it possible to see at a glance whether the temperature and carbon dioxide levels in the room are cause for concern. The light installation is complemented by a website where a digital light installation in the form of a 3D model documents the temporary installation in the long term and brings it to life.
Team
Das Team, das das Projekt „Airlight” umgesetzt hat, besteht aus Maxi Glaser (21) und Laura Beier (20). Wir sind beide Studentinnen und studieren im 3. Semester Kommunikationsdesign in Münchberg. Unsere Stärken sind ungefähr gleich verteilt und liegen bei folgenden Programmen: After Effects, InDesign, Figma, OpenProcessing, Blender und Webflow.
____________________________________________________________
The team that implemented the „Airlight“ project consists of Maxi Glaser (21) and Laura Beier (20). We are both students and are in our third semester of communication design in Münchberg. Our strengths are roughly evenly distributed and lie in the following programmes: After Effects, InDesign, Figma, OpenProcessing, Blender and Webflow.
Filmische Dokumentation
Bilder der Umsetzung
Lichtinstallation
Digitale Lichtinstallation
https://airlight-2-editor.superhi.hosting/index.html
Zine
Pitchdeck
Deutsch
____________________________________________________________
Englisch
Links zum Quellcode & Prototypen
Digitale Lichtinstallation:
https://airlight-2-editor.superhi.hosting/index.html
Code der Website (digitalen Lichtinstallation):
https://nextcloud.hof-university.de/s/ZLjipgmBi4km4pB
Code für die Lichtinstallation:
_________________________________________
15 | Abschlusspräsentation
Die Abschlusspräsentation ist eine gekürzte Version des finalen Pitchdeck.
14 | Konzeption des Präsentationsvideos
Für das Präsentationsvideo haben wir uns verschiedene Varianten überlegt. Eine beinhaltet den Einsatz einer Drohne, die beiden anderen sind ohne Drohne umsetzbar.
Die Herausforderung bei unserem Projekt besteht zum einen darin, die Verbindung zwischen realer und digitaler Lichtinstallation darzustellen. Sowie die Tatsache, dass sich die Farben der Lichtinstallation anhand von gemessenen Luftdaten verändern und somit die Luftqualität in Innenräumen anzeigen.
Schlussendlich haben wir uns für die Storytelling-Variante entschieden. Zwar ist die Lichtinstallation von außen nicht so gut zu sehen, dafür kommt aber die eigentliche Funktion, die Luftqualität der Innenräume anzuzeigen, gut rüber.
13 | digitale Lichtinstallation
Das 3D-Modell hatten wir bereits auf einer Website verwendet. Dort haben wir den Hintergrund angepasst und eine Überschrift eingefügt.
Im nächsten Schritt haben wir das 3D-Modell drehbar gemacht und mithilfe von A-Frame die Lampen darin platziert. Nachdem feststand, wie die Lampen platziert werden sollten, war das kein Problem, aber es war ein sehr zeitintensiver Prozess, da wir sehr viele Lampen platzieren wollten. Ein Problem war, dass sich die Lampen zunächst nicht mit dem Modell gedreht haben. Dieses Problem konnten wir jedoch lösen.
Parallel dazu haben wir unter dem Modell einen Text sowie die Farbbreakpoints eingefügt. Neben dem Modell befindet sich eine Anzeige mit dem aktuellen Datum und der Uhrzeit.
Dann haben wir versucht, eine Zeitachse einzubauen, mit der man sich die Lichtinstallation rückblickend ansehen kann. Die Zeitachse hat irgendwann funktioniert, allerdings nicht mit den gemessenen Luftdaten, sondern mit zufälligen Daten. Außerdem hat sie noch keine Veränderungen im Modell bewirkt, da zu diesem Zeitpunkt die Lampen noch nicht vorhanden waren.
Eines unserer größten Probleme war es nämlich, die Lampen mit dem Spreadsheet zu verbinden. Da die Luftsensoren zeitweise nicht funktionierten und sich dann im Spreadsheet etwas geändert hat, sodass wir den Datencode umschreiben mussten, hatten wir Zeitprobleme. Wir haben dann beschlossen, die Zeitachse wegzulassen. Auch, weil sie nach zahlreichen Versuchen immer noch nicht mit dem Spreadsheet und dem 3D-Modell zusammengearbeitet hat.
Schlussendlich sah die finale Website dann wie folgt aus:
https://airlight-2-editor.superhi.hosting/index.html
Code
12 | Lichtinstallation
Beim Aufbau der Lichtinstallation sind wir auf ein Problem gestoßen: Damit alles funktioniert, muss die ganze Zeit ein Computer mit dem Code in der Uni sein. Dafür haben wir bereits folgende Lösung gefunden: Wir lassen einen ausgeliehenen Mac mini aus der Uni die ganze Zeit laufen.
Daraus folgte, dass wir doch, wie ganz am Anfang überlegt, zwei Codes haben. Einen für die Lichtinstallation und einen separaten, der die komplette Webseite beinhaltet.
Ansonsten verlief der Aufbau der Lichtinstallation ziemlich problemlos und der Code funktionierte bis auf einen kleinen Fehler, den wir schnell beheben konnten, einwandfrei.
Von außen sieht die Lichtinstallation gut aus und ist im Dunkeln gut zu erkennen. Das einzige Manko ist, dass Lichterketten in angrenzenden Räumen und eine andere Lichtinstallation die Wirkung etwas beeinträchtigen.
11 | Code für die Lichtinstallation
Den Code für die Lichtinstallation haben wir zusammen mit der KI ChatGPT geschrieben und uns die einzelnen Schritte erklären lassen. Das war sehr hilfreich, denn den Großteil des Codes mussten wir über die Weihnachtspause schreiben, in welcher wir nicht die Möglichkeit hatten während der Codeentwicklung, das ganze an den Lampen zu testen. Glücklicherweise hat die Zusammenarbeit mit ChatGPT sehr gut funktioniert, denn der Code hat Vorort nach einer kleinen Nachbesserung sehr schnell funktioniert und die Lampen wurden angesprochen.
Den finalen Code findet man hier:
https://nextcloud.hof-university.de/s/ziiHAndXPDinpKJ
10 | 3D-Modell des Campus
Eine Phase unserer Lichtinstallation ist es, die Installation mithilfe eines 3D-Modells des Campus im Web zu simulieren. Dafür benötigten wir ein Modell des Campus.
Zunächst haben wir versucht, ein Modell von früheren Studierenden zu bekommen, was leider nicht funktioniert hat. Also haben wir es in Blender selbst gebaut.
Dafür haben wir Bilder vom Campus gemacht, die wir als Vorlage verwendet habe. Zunächst haben wir mit dem Haupthaus begonnen, dann haben wir Fenster und die Schräge hinzugefügt. Danach kamen die Treppe und das Gebäude, in dem sich das Studio befindet, hinzu. Wir sind also mit einfachen Dingen gestartet und dann immer weiter ins Detail gegangen.
Nachdem wir uns in Blender zurechtgefunden hatte, war es kein Problem, das Modell zu bauen – es hat nur lange gedauert. Probleme sind erst beim Exportieren aufgetaucht, als plötzlich Wände verschwunden waren. Das konnten wir aber beheben.
Außerdem haben wir uns dazu entschieden, das Modell grau zu lassen, da wir es einerseits nicht hinbekommen haben, das Modell mit Farben zu exportieren, und es andererseits für unseren Zweck nicht unbedingt notwendig ist, das Modell einzufärben. Da wir Lampen im Modell platzieren und diese einfärben wollen, könnte ein farbiges Modell die Sichtbarkeit der Lampen beeinflussen.
Website: https://campus-modell-editor.superhi.hosting/index.html
Code: https://nextcloud.hof-university.de/s/xTyGfYGHAnYcLj9
09 | Farb-Experimente
Um Sicherzugehen, dass die Philipps Hue Lampen unsere Farbcodierung richtig anzeigt, haben wir mit einer privaten Phillips Hue und der App Hue Essentials nochmal verschiedene Farben ausprobiert. Unser Wunsch war es, dass die Farben auffällig genug sind. Denn beim ersten Ausprobieren der Ansprache der Lampen waren manche Farbtöne noch etwas schwach.
Zu Beginn haben wir einen ersten Test gemacht, um die App und die Lampenfarben auszuprobieren:
Anschließend haben wir die beiden Farbpaletten nochmals ausprobiert und angepasst.
Farbpalette Temperatur:
Farbpalette Co2:
Nach diesem Experiment haben wir die Farben bei den Lampen in der Hochschule angewendet. Manche Farben wurden bedauerlicherweise weiterhin nicht so kräftig angezeigt, wie wir es uns ursprünglich vorgestellt haben. Aus diesem Grund haben wir im Nachhinein im Code selbst nochmals diese jeweiligen Farben leicht angepasst. Die finale Farbskala war dann die folgende.
08 | Lampen-Experimente
Für die Lichtinstallation haben wir zunächst die Lampen in den entsprechenden Räumen platziert und mit Klebeband befestigt. Dabei haben wir versucht, sie in jedem Raum an derselben Stelle zu platzieren. Dies war jedoch aufgrund anderer Lichtinstallationen oder Notausgängen nicht immer möglich.
Anschließend haben wir die Lampen mithilfe der Philips-Hue-Dokumentation (https://developers.meethue.com/develop/get-started-2/)) angesprochen. Das hat nach einigem Rumprobieren dann auch funktioniert. Am Ende wussten wir, wie man die Lampen an- und ausschaltet und wie man die Farbe und Helligkeit ändert.
Anschließend haben wir die Farben aus unserer Farbskala ausprobiert, um zu sehen, wie sie bei den Lampen aussehen.
Erster Test: Lampe ausschalten
Zweiter Test: Farbänderung
Dritter Test: Ausprobieren unserer ausgewählten Farben
07 | Projektstand: 16.12.2025
06 | Code-Experimente
Zunächst haben wir uns A-Frame angeschaut, das wir für unser 3D-Modell des Campus benötigen. Danach haben wir einen HTML-Code mit Sublime Text geschrieben und ein Blender-Modell importiert. Leider ließ sich das Modell nicht im Browser öffnen. Dann erhielten wir den Hinweis, den Code mit dem SuperHi Editor zu schreiben, mit dem wir dann auch problemlos ein Blender-Modell laden konnten.
Anschließend haben wir mit A-Frame zunächst drei Quadrate erstellt, die die Räume simulieren sollen. Danach haben wir die Verbindung zu den Luftdaten der Luftsensoren hergestellt und die Farbbreakpoints eingefügt. So wurden in jedem Raum auf der linken Seite die Farben für CO₂ und auf der rechten Seite die Farben für die Temperatur angezeigt.
Website: https://airlight-prototype-live-editor.superhi.hosting/index.html
Code: https://nextcloud.hof-university.de/s/6ZeEaSWLe67KpHc
05 | Entwicklung der Farbcodierung
Um mit den Philips Hue Lampen die Temperatur- und CO2-Werte der Räume des Campus sichtbar machen zu können braucht es ein System, das die Werte in Stufen von Optimal bis Kritisch einordnet und dann in Farben übersetzt. Dafür benötigen wir also eine Farbskala für Temperatur, als auch für CO2. Hierfür haben wir 2 Versuche gestartet. Dabei haben wir auf der Website Coolors.de Farbpaletten mit jeweils 5 Farben erstellt, die einen guten Verlauf von der Farbe für den kritischen Wert zur Farbe für den optimalen Wert darstellen.
Da wir auch gleichzeitig berücksichtigen müssen, dass die beiden Farbpaletten gut miteinander harmonieren ohne zu ähnlich zu sein und trotzdem coole Farbverläufe zwischen den beiden entstehen können haben wir nochmal zusammen mit der KI ChatGPT 3 Varianten von Farbpaletten erstellt.
Aus unserem zweiten Versuch, eine Farbskala zu erstellen, haben wir bereits zwei Varianten ausgewählt, die mit den Philips-Hue-Lampen gut funktionieren würden. Wir müssen nämlich auch bedenken, dass nicht alle Farben, so wie sie auf dem Bildschirm angezeigt werden, auch bei den Lampen so aussehen. Zur Sicherheit haben wir deshalb noch einmal mit ChatGPT gearbeitet, um eine endgültige Kombination aus Farbpaletten für Temperatur und CO₂ zu erstellen, die auch von Philips Hue so angezeigt werden kann. Außerdem haben wir im gleichen Schritt auch einen konkreten Plan erstellt bei welchem Wert welche Farbe angezeigt werden soll.
Um die Breakpoints genauer zu definieren, haben wir einen Code geschrieben, mit dem wir die minimalen und maximalen Werte aus den bis zu diesem Zeitpunkt gemessenen Daten ausgelesen haben. Anschließend haben wir uns daran orientiert und die Breakpoints erstellt.
https://openprocessing.org/sketch/2823390
Leider funktioniert der Code nicht mehr, da sich etwas im Spreadsheet geändert hat. Da wir den Code nach der Änderung nicht mehr gebraucht haben, haben wir ihn nicht angepasst.
Nach einigen Experimenten mit den Philips-Hue-Lampen haben wir die Farben dann noch einmal leicht angepasst, sodass unsere finalen Farbbreakpoints feststanden.
04 | Umsetzungs-Konkretisierung
Von unserer ursprünglichen Idee, zwei voneinander getrennte Unterprojekte (Lichtinstallation und Webflow-Website) zu realisieren, haben wir erst einmal Abstand genommen. Stattdessen kam die Idee auf, alles mit A-Frame zu machen. Das heißt, wir schreiben einen HTML-Code, in dem wir ein Blendermodell des Campus laden, das sich drehen lässt und bei dem sich die Farben anhand der Daten der Luftsensoren ändern. Dieser Code steuert dann auch gleichzeitig die Philips Hue-Lampen.
Zudem haben wir einen Raumplan erstellt, in dem vermerkt ist, wo wie viele Lampen platziert werden sollen.
Anfangs war die Überlegung alle Vorlesungsräume zu beleuchten. Da wir in jedem Raum aber mindestens 2 Lampen brauchen haben wir uns dazu entschieden 3 Räume wegzustreichen:
- Raum X002 (Studio)
-> Dort hat man kein Fenster nach Osten, man würde das Licht also
nicht sehen.
- Raum X204
-> Von diesem Raum sind keine Luftdaten im Spreadsheet vorhanden,
außerdem hat man hier auch kein Fenster nach Osten.
- Raum X102
Außerdem haben wir uns überlegt, wie das 3D-Modell aussehen könnte. Also ob man die Räume von innen sieht und quasi hineingehen kann oder ob man nur das Gebäude von außen mit Fenstern sieht.
Wir haben uns für die zweite Variante entschieden, da diese der tatsächlichen Lichtinstallation am ähnlichsten ist. Man sieht also nur den Campus von außen und das Licht scheint im übertragenen Sinn durch die Fenster. Das ist einmal leichter umzusetzen und bringt zudem keinen wirklichen Mehrwert, wenn man in die Räume hineinsehen kann.
03 | What, How, Why
Nachdem wir unsere Idee ausgearbeitet hatten, überlegten wir mithilfe des Why-How-What-Modells verschiedene Umsetzungsmöglichkeiten.
In den Rahmen haben wir die Grundideen zu unseren beiden Punkten – der Lichtinstallation und der digitalen Dokumentation – eingefügt. Darunter befinden sich jeweils verschiedene Varianten.
02 | Pitch Deck
01 | inhaltliche Recherche
Data Stories
Zunächst haben wir eine unabhängige Recherche von Data Stories durchgeführt, um einen Überblick darüber zu bekommen, in welche Richtung unser Projekt gehen könnte.
wissenschaftliche Fakten
Zunächst haben Maxi und ich (Laura) unabhängig voneinander allgemeine Fakten zum Thema Luft zusammengetragen.
Danach habe ich (Laura) recherchiert, welche Themen in Bezug auf unseren Unicampus interessant wären. Dabei bin ich auf die Themen „Einfluss von Verkehr und Baustellen auf die Innenraumluft” sowie „Verbreitung von Krankheitserregern in Innenräumen” gestoßen.
Parallel dazu hat Maxi Informationen zu den Themen „Mensaluft” und „Luftqualitätsveränderung durch Drucker” herausgesucht.
Daraus entstand die Idee, das Thema Verkehr aufzugreifen und es eventuell mit dem Thema Mensaluft zu verbinden bzw. uns nur mit dem Thema Mensaluft zu befassen. Nach langem Überlegen sind uns zu beiden Themen aber keine umsetzbaren Ideen eingefallen, weshalb wir noch einmal von vorne angefangen haben. Dabei ist die Idee entstanden, die Luftqualität in den Innenräumen der Uni durch Licht sichtbar zu machen. Also eine Lichtinstallation zu installieren. Diese Idee haben wir weiterverfolgt und später umgesetzt.
_________________________________________
Vorstellung von alten Arbeiten
Laura Beier
Designgrundlagen:
Magazin „Touch the Sky“ (2. Semester)
Cover und von mir gestalteter Inhalt:
Interaction Design:
Infografik auf Basis einer Harry Potter API (2. Semester)
https://openprocessing.org/sketch/2609032
Digital Design:
Typo-Website zur Schriftart „Source Code Pro“ (2. Semester)
Website:
https://www.figma.com/proto/MV1J20EdSGcmEBVholZp2y/Typo-Website--Source-Code-Pro?page-id=188%3A2&node-id=414-3115&p=f&viewport=684%2C323%2C0.03&t=oopks6qYNwHc6Zpa-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=414%3A3115
Maxi Glaser
Designgrundlagen
Magazin „Touch the Sky“ (2. Semester)
Cover und von mir gestalteter Inhalt:
Onlineanwendung:
Digital Design
Typo-Website zur Schriftart „Cormorant Garamond“ (2. Semester)
Website:
Handyanwendung:
Interaction Design
