CYT-WatchFaces

Projektübersicht

Im zweiten Projekt des Kurses Programmiertes Entwerfen 1 bestand die Aufgabe darin, experimentelle Watchfaces für ein neues Smartwatch Konzept zu entwickeln. Die zugrunde liegende Idee ist ein neuartiger Chip, der besonders effizient mit einfachen zweidimensionalen Formen wie Kreisen umgehen kann. Bildbasierte Inhalte sollen vermieden oder nur sehr sparsam eingesetzt werden. Die Darstellung der Uhrzeit soll zwischen klar lesbar und abstrakt variieren.

Gefordert waren mindestens drei eigenständige Watchface-Prototypen, die sich in ihrer Abstraktion unterscheiden. Während einige Entwürfe eine klar ablesbare Uhrzeit bieten, sollen andere stärker auf Atmosphäre, Bewegung oder symbolische Darstellung setzen. Wichtig war dabei, dass sich die Zeit trotz experimenteller Ansätze schnell erfassen lässt, wie es bei Uhren im Alltag notwendig ist.

Die Gestaltung erfolgte unter klaren technischen und ästhetischen Vorgaben. Das Format war ein 960 mal 960 Pixel großes Quadrat mit schwarzem Hintergrund. Erlaubt waren nur weiße, graue und eine einzelne Akzentfarbe. Die Umsetzung erfolgte mit p5js für die Darstellung und matterjs für die physikalische Simulation.

—

Segment Storm

Die entwickelte Uhr zeigt die aktuelle Uhrzeit im HH:MM Format in Form eines klassischen digitalen Siebensegmentdisplays. Jedes Zeichen besteht aus kleinen grauen Punkten, insgesamt 120 Stück. Zusätzlich bewegen sich 120 blaue Punkte frei im Raum. Diese sind physikalisch simuliert mit matterjs, stoßen aneinander und werden an den Rändern des 960 mal 960 Pixel großen Canvas reflektiert. Der Hintergrund ist schwarz, die Uhrzeit erscheint in Grau, Blau dient als einzige Akzentfarbe.

Im Verlauf jeder Minute ersetzt pro Sekunde ein blauer Punkt gezielt einen grauen Punkt der Minutenanzeige. Die Punkte ordnen sich nacheinander an die vorgegebenen Positionen. Gleichzeitig wird pro Minute ein weiterer Punkt der Stundenanzeige ersetzt. So verändert sich die Anzeige kontinuierlich im Rhythmus der Zeit, von Grau zu Blau. Die Bewegung der Punkte erzeugt ein lebendiges, aber dennoch ruhiges Bild.

Die Arbeit verzichtet vollständig auf Texturen oder Bilder und nutzt ausschließlich einfache Kreise. Die Darstellung bleibt dadurch klar und systemnah. Die visuelle Umsetzung verdeutlicht das Vergehen der Zeit durch eine langsame, nachvollziehbare Transformation. Dabei bleibt die Uhrzeit stets auf einen Blick ablesbar.

Der Name Segment Storm bezieht sich auf die Kombination aus statisch angeordneten Segmentpunkten und den dynamisch umherfliegenden Punkten, die wie ein Sturm nach und nach die Segmente einnehmen.

Watchface Planets

Planets ist ein animiertes Watchface, das die Zeit durch die Anzahl bewegter Punkte auf vier konzentrischen Ringen darstellt – ganz ohne klassische Ziffern oder Zeiger. Von außen nach innen zeigen die Ringe Sekunden, Minuten und Stunden an.
Die Anzahl der „Planeten“ auf jedem Ring entspricht dem jeweiligen Ziffernwert. Ein äußerer Ring mit 60 Punkten markiert die Sekunden, wobei der aktuelle durch ein gelbes Pulsieren hervorgehoben wird.

Die ursprüngliche Idee, die Punkte wie ein Spinnennetz mit Linien zu verbinden, erwies sich in der Umsetzung als problematisch: Bei niedrigen Ziffern entstanden kaum Linien, das Design wirkte leer und instabil.
Aus diesem Grund wurde das Netzkonzept verworfen – stattdessen rückte die Bewegung selbst in den Fokus. So entstand ein minimalistisches, aber dynamisches System, das Zeit durch kreisende Planeten vermittelt.

Das Watchface reagiert auf Bewegung und durchläuft dabei drei Phasen: Zunächst bewegen sich die Planeten ruhig auf festen Bahnen (Phase 1),
dann beschleunigen sie und beginnen zu leuchten (Phase 2),
und schließlich verlassen sie ihre Bahnen, kollidieren miteinander und mit den Bildschirmrändern (Phase 3).
Sobald die Bewegung endet, kehrt das System in seinen Ausgangszustand zurück.

Technisch wurde Planets mit JavaScript und der Physik-Engine Matter.js realisiert. Die Planeten folgen echten physikalischen Regeln – sie stoßen sich ab, bewegen sich frei oder bleiben auf ihren Bahnen, abhängig von der aktuellen Phase. Ergänzt wird das Ganze durch einen animierten Sternenhimmel mit Sternschnuppen, die jede Minute für einen Moment auftauchen und das Erlebnis visuell abrunden.

Watchface Binary

Die Uhr zeigt die aktuelle Zeit in binärem Format an und unterteilt sich in drei Hauptkomponenten: Stunden, Minuten und Sekunden. Jede dieser Komponenten wird in Binärzahlen umgewandelt – dargestellt durch Rechtecke für Einsen und Kreise für Nullen. Die Stunden befinden sich oben links (grau), die Minuten mittig rechts (grün) und die Sekunden unten links (weiß).

Alle Zeitkomponenten verhalten sich realistisch unter dem Einfluss der Schwerkraft und sind elastisch in ihren jeweiligen Rahmen aufgehängt. Diese Aufhängung erfolgt über vier sichtbare Verbindungen (Constraints) pro Block, deren Farben je nach Zeitkomponente variieren. So wird gewährleistet, dass die Uhrzeit lesbar bleibt, sollten die Rahmenboxen aufgrund von Bewegung auf einer anderen Seite liegen.

Die Simulation der Bewegung, welche später über einen Motion-Sensor erfasst werden soll, erfolgt über die Tasten W, A, S und D. Ein Druck auf die Leertaste setzt die Schwerkraft wieder auf die Standardrichtung nach unten zurück.

Die Uhr aktualisiert sich kontinuierlich über eine tick()-Funktion, die jede Sekunde auf Zeitänderungen prüft. Ändert sich eine Komponente, wird die alte Darstellung entfernt, eine neue erstellt und mit passenden Verbindungen versehen. Alle drei Zeitkomponenten arbeiten dabei unabhängig voneinander.