Die Studierenden lernen die elementare Darstellungsprinzipien, grundlegende Techniken der Programmierung und algorithmisches Denken kennen.
In zwei Kurzprojekten und kleinen Übungen probieren die Studierenden die systematischen Organisation von Zeichenbeziehungen in Fläche, Bewegung und interaktives Verhalten aus. Ziel ist es am Ende des Semesters Gestaltung als System zu erfahren und eigenständig erste einfache Regelwerke in eine Programmiersprache übersetzen zu können.
Prof. Andreas Pollok, Benno Stäbler, Prof. Benedikt Groß
Watch Faces CT2
In diesem Projekt aus dem Kurs Programmiertes Entwerfen haben wir experimentelle Watchfaces für Smartwatches entworfen. Basis war ein neuer Chip, der physikalische Elemente gut unterstützt. Ziel war es, drei Prototypen zu entwickeln, die die Uhrzeit von klar bis abstrakt darstellen – aus einfachen Formen und schnell erfassbar.
Gestalterisch waren wir auf Schwarz, Weiß, Grau und eine Akzentfarbe beschränkt. Sounds sollten dezent bleiben. Die Prototypen (960 × 960 px) wurden mit JavaScript und der Physics Engine Matter.js umgesetzt. In dieser Online-Ausstellung zeigen wir, wie Zeit durch Form, Bewegung und Interaktion neu erlebbar wird.
Ballons
Ballons entstand aus der bildlichen Idee, dass Ballons einen Kasten mit der Uhrzeit nach oben tragen. Aufgrund der starken Bildhaftigkeit und technischer Hürden wurde das Konzept jedoch stark abstrahiert.
In der finalen Umsetzung fallen nun Kreise (Sekunden) und Dreiecke (alle 5 Sekunden) in den Canvas. Die Uhrzeit wird durch fallende Ziffern aus Rechtecken dargestellt. Ein großer, steuerbarer Kreis (Ball) interagiert mit den Objekten – jedoch ohne die Uhrzeit zu stören, dank gezielter Kollisionsfilter in JavaScript. So entstand ein physikbasiertes Watchface mit klar erkennbarem Zeitfluss in das man selbst eingreifen kann.
Rad
Beim Watchface Rad stand Interaktion im Fokus. Zentrales Element ist ein drehbares, dreigeteiltes Rad. Vom oberen Rand fallen kontinuierlich farbige Kugeln. Treffen sie auf einen Radabschnitt in gleicher Farbe, fallen sie hindurch – bei ungleicher Farbe prallen sie ab.
Die Uhrzeit wird durch größere, schwarze Kreise dargestellt, die im Stunden-, Minuten- und Sekundentakt um das Rad rotieren – angelehnt an analoge Zeiger.
Technisch wurde das Rad teils in Matter.js und teils in p5.js umgesetzt, um Darstellungsprobleme zu umgehen. Kollisionsfilter sorgen für die farbbasierte Interaktion. Durch einfaches Mapping der aktuellen Zeit lassen sich die Kreise immer korrekt platzieren. Das Ergebnis: ein präzises, interaktives Watchface mit klarer Formsprache.
Magnete
Magneten ist ein experimentelles Watchface, bei dem ein frei beweglicher Ball ein Feld aus rotierenden Rechtecken beeinflusst – ähnlich wie Kompassnadeln richten sie sich immer zum nächstgelegenen Ball aus. Sechs statische Hindernisse lenken den Ball ab und verändern jede Minute zufällig ihre Position.
Ein vertikaler Balken zeigt die aktuelle Stunde an: Seine Höhe wächst mit dem Stundenwert und invertiert mithilfe eines Blend-Modes die darunterliegenden Farben – Zeit wird so auch räumlich erfahrbar.
Umgesetzt wurde das Konzept mit Matter.js für die Physik und p5.js für die Darstellung der Elemente. Das Ergebnis ist ein dynamisches, abstraktes Spiel aus Bewegung, Richtung und Fläche.
