Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Parametric Design | Datenvisualisierung mit Spirographen

Parametric Design | Datenvisualisierung mit Spirographen

Den Kurs Parametric Design habe ich gewählt, um ein grundlegendes Verständnis für Coding zu erlangen. Als komplette Anfängerin in dem Bereich hat es mir wirklich sehr viel Spaß gemacht schrittweise verschiedene Möglichkeiten im Coding in JavaScript ausprobieren und gemeinsam im Kurs Probleme und Ergebnisse offen besprechen zu können.

Idee

Als besonders interessante Möglichkeit ist mir in den Übungen und Kursabschnitten zuvor immer wieder die parametrische Gestaltung mit Hilfe von in JavaScript definierten Reglern aufgefallen. Der zu einer Handlung auffordernde Charakter von solchen Slidern, der durch einen Code beeinflusste visuelle Elemente als Resultat ausgibt, schien für mich als Studentin im Bereich Interfacedesign großes Potential und kreativen Spielraum zu bieten.

Spirographen als visuelles Tool für Datenvisualisierungen

Für mein Konzept entschloss ich mich dazu, ein Tool zur spielerischen Datenvisualisierung zu gestalten, welches bspw. in Form einer App dabei helfen kann, eigene Tätigkeiten zu tracken, oder tägliche Zielsetzungen zu erreichen. Damit die Benutzung auch Spaß macht, sollte das Ganze natürlich auch visuell ansprechend sein. Da wir im Kurs immer wieder auch mit mathematischen Formeln und Spiralen gearbeitet haben, kamen mir Spirographen als visuelles Element in den Sinn.

Nach ein bisschen »Mathenachhilfe« und Online-Recherche fand ich einige Webseiten, die Online-Spirographen zeigten, und Webseiten, die mathematische Herangehensweisen erklärten. Das hat mir sehr geholfen, die verschiedenen Parameter zu verstehen, mit denen ich Spirographen zeichnen und dessen Form beeinflussen kann. Ich entschied mich für eine Basis-Formel, mit der ich zunächst einen recht simplen Spirographen zeichnen konnte. Ich erstellte drei Slider, deren Werte ich jeweils mit einem Paramter der Formel verknüpfte. 

Das hat gut geklappt, jedoch war sah der Spirograph immer relativ ähnlich aus. Deshalb kaufte ich mir zusätzlich ein analoges Zeichen-Set, wie es so manche evlt. noch aus der Kindheit kennen. Das war hilfreich für mich, um besser verstehen zu können, welche Faktoren welchen Einfluss haben und wie ich die Formel anpassen bzw. variieren kann, um bestimmte Spirographen-Formen erzeugen zu können.

IMG_0151_b.pngIMG_0151_b.png
7180M6dS3JL._AC_SX679_b.png7180M6dS3JL._AC_SX679_b.png
230304_Spiros_Incom.jpg230304_Spiros_Incom.jpg

Prozess

230304_Spiros_Incom2.jpg230304_Spiros_Incom2.jpg

Im nächsten Schritt variierte ich die Formel und testete verschiedene Ansätze mit den Parametern. Mein Ziel war, dass man anhand des Spirographen die jeweiligen drei Parameter schnell visuell begreifen konnte. Die Slider haben 5 Schritte. Die Kategorien und Parameter sind natürlich nur beispielhaft.

1| Zeit (wenig viel): Zur Orientierung zeichnete ich 5 Ringe auf den Canvas, so kann man anhand der Größe den Zeitaufwand ablesen. 

2| Umfang der Thematik (spezifisch allgemein): Je »aufgeblähter« der Spirograph, umso umfangreicher die Auseinandersetzung 

3| Intensität: Je konzentrierter die Auseinandersetzung, umso dichter die Linien

Da ich aber wollte, dass es auch für die Nutzer einen logischen und wieder erkennbaren Zusammenhang zwischen Input und Output geben sollte, war es am Schluss für mich fast schwieriger ein stimmiges Gesamtbild zu erzeugen. Es war gar nicht so einfach vier Spirographen übereinander zu zeichnen und gleichzeitig die verknüpften »Daten« jedes einzelnen noch differenziert erkennen zu können. Ein Großteil des Prozesses bestand nachdem das Grundgerüst des Codes stand, darin mit den Farben, Konturen und Formeln verschiedene Reihenfolgen und Multiplikatoren für die Parameter auszuprobieren und interessante, stimmige Arten von Spirographen zu kombinieren.

230304_Spiros_Incom3.jpg230304_Spiros_Incom3.jpg
230304_Spiros_Incom5.jpg230304_Spiros_Incom5.jpg

230304_Spiros_Incom6.jpg230304_Spiros_Incom6.jpg

Spirograph_Free_MacBook_Pro_1_Desktop_Mobile.jpgSpirograph_Free_MacBook_Pro_1_Desktop_Mobile.jpg

Hilfreiche Links & Quellen

Fazit

Den Kurs kann ich wirklich für absolut jeden empfehlen! Der Workload ist mehr oder weniger selbst bestimmbar und die Projektziele und -erwartungen ebenso. Es gibt kein richtig und kein falsch - nur ganz viele Möglichkeiten. Es lohnt sich allemal die vielen bereitgestellten Tutorials anzuschauen und auch selbst online zu recherchieren, denn es gibt immer ein offenes Ohr für Fragen, Zeit für deren Klärung und einen interessanten Austausch im Kurs über die anderen Projekte, Probleme und Erkenntnisse. Als jemand der zu Kursbeginn wirklich großen Respekt und absolut keine Ahnung vom Coding hatte, kann ich nur betonen, dass man schneller reinkommt als man denkt (und wenn nicht, ist das auch okay). Die größte Erkenntnis für mich war, dass es normal und sogar üblich ist, sich im Internet nach ähnlichen Themen, Codeansätzen oder -beispielen umzusehen, und auch mit bestehenden Codes einfach rumzuspielen. Das macht nicht nur großen Spaß sondern bringt ziemlich schnell zumindest kleine Erfolgserlebnisse :)

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Dr. Sebastian Meier

Zugehöriger Workspace

Parametric Design

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords