Konzeptfindung

Unsere Idee kam aus einer Grund-Recherche ganz am Anfang des Kurses. Aufgabe aller Kleingruppen war es alle unserer verschiedenen Bildschirme zusammenzutragen und Informationen wie: Auflösung, Größe, Eingabe, Voreingestellte Schriftgröße, Farb-genauigkeit, etc. aufzulisten. Uns fiel auf, dass die voreingestellte Schriftgröße diser verschiedenen Screens nicht in erster Linie davon abhing, wie weit man vom Bildschirm entfert ist.

Was wäre also, wenn nicht nur die Schrift, sondern der gesamte Content einzig und allein von der Distanz des Betrachters abhängt?

Welche Möglichkeiten ergeben sich aus dieser Einschränkung?

Diverse Bildschirme und ihre Eigenschaften.

Unsere Skizzen aus der Anfangsphase des Konzepts.

Recherche

Erster Schritt unseres Projektes war es, über Anwendungen einer Distanzgesteuerten Eingabe zu recherchieren. Hier sind 3 Anwendungen aufgefallen, die uns sinnvoll erschienen.

1. Ein Gestalterisches Objekt, welches je nach Distanz des Betrachters unterschiedlich aussieht.

2. Ein interaktives Plakat, welches auf Distanz Aufmerksamkeit auf sich zieht und dem Betrachter nach Annäherung mehrere relevante Informationen einblendet.

3. Eingaben, die man am PC sonst mit anderen Hilfmitteln erreicht (scrollen, zoomen, Objekte bewegen, etc.)

Inspiriert wurden wir zum Beispiel von dem „Zerseher“, bewegten Plakaten, wie man sie auf „https://swissincss.com/“ oder „https://page-online.de/kreation/der-trend-geht-zu-animierten-plakaten/“ sehen kann und der Apple Watch. Auch in der Tiefe der Abbildung vermuteten wir interessante Anwendungsmöglichkeiten.

Technik

Mit p5js gelang es uns relativ schnell auf die Kamera unserer Laptops zuzugreifen und mit einer Face detection library die Distanz der Augen des Betrachters zu ermitteln. Diese Distanz der Augen zueinander bezieht sich natürlich auf die Distanz des Betrachters zum Bildschirm an dem die Kamera befestigt ist.

Sind die Augen weit auseinander, so steht die Person näher am Bildschirm. Sind sie nah aneinander so ist die Person weit weg.

Wir haben in Erwägung gezogen ein Distanzmessgerät zu benutzen um die Distanz noch genauer ermitteln zu können. Hier kamen jedoch 3 Probleme auf.

1. Man kann nur in einer Linie messen. Die Kamera hat einen größeren Winkel.

2. Die Messweite ist für einige Anwendungen nicht angemessen.

3. Mit der Kamera können wir auch die horizontale und vertikale Position messen, welche uns für die Zukunft noch mehr Möglichkeiten auf macht.

Prototypen

Im zweiten Schritt erforschten wir verschiedene Verhaltensweisen eines distanz-gesteuerten Interfaceses. Wir programmierten beide einige verschiedene Prototypen mit Hilfe von p5js, die die Eingabe der Abstandsmessung allesamt unterschiedlich verarbeitet haben. Mit diesen Hilfsmitteln experimentierten wir an den Bezügen von Objekt und Text.

Hier sieht man ein Gegesetzliches Verhalten der beiden Elemente.

Bild 1: fern

Bild 2: nah

Die Box kommt näher, wie man es erwarten würde. Der Text jedoch wird kleiner bzw. bleibt für den Betrachter gleich groß, da er sich gleichzeitig annähert.

In diesem Beispiel wird der große Kreis kleiner je näher man kommt.

Ab einer bestimten Distanz kommen von außen extra Kreise dazu.

Hier könnte man zum Beispiel zusätzliche Informationen vermitteln, die von einer größeren Distanz sowieso unleserlich und somit verschwendeter Platz wären.

Dies ist eine Variation vom Beispiel davor. Hier kommen die extra Kreise aus dem ersten Kreis heraus.

In diesem Beispiel beeinflusst man wieder 2 Objekte mit seiner Distanz. Die Konturen nähern sich an bzw. entfernen sich voneinander. Hält man für 3 Sekunden still während sie sich überlappen hat man „Gewonnen“.

Hier haben wir eine Art scrolling Mechanismus,

Die Kreise bewegen sich nach innen in die Mitte bis sie verschwinden. Je näher man sich dem Bildschirm nähert, desto schneller bewegen sie sich. Geht man weiter zurück bewegen sich die Kreise nach außen.

Dies ist ein Versuch dem Bildschirm einen Charakter zu geben. Nähert man sich dem Bildschirm, verschwindet die „Warnung“ komplett im Roten Bildschirm.

Hier wird die „Personal Space“, wie sie in verschiedenen Ländern wahrgenommen wird extern dargestellt. Der Benutzer stellt sich vor den Bildschirm und dann wird angezeigt, in welchem Land die Distanz in der er sich zum Bildschirm befindet als „Personal Space“ betrachtet wird.

Vertiefungsphase

Im dritten Schritt entschieden wir uns es wäre das beste ein Interaktives Plakat zu erstellen um die Funktionsweise und die Vorteile unseres Systems darzustellen.

Das „interaktive Plakat“ sollte von weit weg nur eine Große Überschrift aufzeigen, die den Zuschauer auffordert näher zu kommen. Kommt er/sie näher, so kommen über eine Animation neue Contents dazu.

Diese Idee war in p5js leider zu kompliziert zu Implementieren, da Layout und Gestaltung keine Stärken von p5js sind und es uns mit unserem code nicht gelang assets zu laden.

Deswegen entschieden wir uns wie für eine simplere und spielerische herangehensweise, diese Eingabemethode rüberzubringen.

In diesem Abschnitt habe wir uns wie davor grundsätzlich alle Arbeit fair aufgeteilt, jedoch hat sich Maximilian mehr auf den Code spezialisiert und Oliver mehr auf das gesammte Erscheinungsbild, wir haben uns trotzdem immer wieder gegenseitig unterstützt.

Wir haben drei Spiele erstellt, die dem Betrachter näher bringen sollen, wie die Steuerung funkitioniert. Hierdurch wird der Betrachter mit Spaß dazu gebracht sich an diese Eingabemöglichkeit zu gewöhnen.

Wenn man eine Auswahl treffen muss, um das Spiel zu ändern oder neu zu starten wird zwischenzeitlich deutlich wie diese Mechanik selbst für traditionelle Aufgaben benutzt werden kann.

Alternative

In dieser Alternative erstellten wir eine art Distanz-Schreibmaschine. Je nach Distanz zum Bildschirm kann man durch die Buchstaben scrollen. Tritt man nach rechts wird der aktive Buchstabe oben an den String angehängt.

Gestaltung

Unsere Gestaltung sollte minimalistisch werden, um den Benutzer nicht unnötig vom Wesentlichen abzulenken. Also entschieden wir uns klare Signalfarben und Formen zu benutzen.

Später haben wir unsere Farbwelt noch einmal reduziert um den Benutzer noch mehr zu fokusieren. Wir haben Grün zur Hauptfarbe gemacht. Hierdurch wird schneller klar, welches Objekt aktiv und welches passiv (Dunkelgrau) ist. Bei unserem Rot haben wir die Helligkeit etwas zurückgeschraubt und sind mehr ins Violette gesteuert. hierdurch wirkt das Objekt einerseits statischer aber auch weniger bedrohlich und signalisierend.

Für die Font haben wir uns für die Consolas entschieden. Durch die Monospace Font und dadurch, dass wir nur Großbuchstaben benutzen wirken Worte mehr wie Objekte, was Das Gestaltungsbild nochmal vereinfacht und einheitlich macht.

Abgabe

In dem fertigem Prototypen haben wir also drei verschiedene Spiele, die leicht unterschiedlich funktionieren, aber alle mit der Distanz gesteuert werden. Das Menü, dient praktisch einerseits dazu das Spiel auszuwählen aber konzeptionell auch zum Schildern wie dieses Konzept in einem konventionellen Menü Einsetzbar ist. Zusätzlich haben wir eine Bestätigungs/Abbruch-Mechanik eingebaut. Wenn man einen Schritt nach links geht wählt man ein Spiel aus oder startet es. Nähert man sich dem Bildschirm extrem so wid das Spiel abgebrochen und man gelangt zum Hauptmenü.

Unsere Gestaltung dient zur Erklärung der Steuerung. Hierfür haben wir erstmal ein einladenden Startscreen mit Icon entworfen, der für eine kleine Animation platz macht, sobald die kamera zwei Augen erkennt. Nach 10 inaktiven Sekunden wird der Startbildschirm neu geladen.

Weiterentwicklung

Sollten wir an diesem Projekt weiterarbeiten, wäre es nützlich nochmal mehrere Möglichkeiten der Distanzmessung zu testen. Obwohl wir die Idee, ein Distanzmessgerät zu nutzen vorerst verworfen haben, wäre es eine gute idee mit einem Array von diesen Messgeräten über Arduino zu arbeiten. Damit wär es immernoch möglich nicht nur die Distanz sondern auch die Position des Betrachters zu messen. Außerdem wär es eventuell noch genauer.

Zusätzlich sollte man auch nochmal über verschiedene Anwendungen nachdenken, da dieses Konzept viele verschiedene Möglichkeiten bietet. Man könnte zum Beispiel noch tiefer in die Informations-Darstellung, Menüsteuerung und Bildverzerrung, abhängig zur Disatanz eingehen.