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. Die Affordanz solcher Slider, die durch einen Code beeinflusste visuelle Elemente als Resultat ausgeben, 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.

Prozess

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.

Hilfreiche Links & Quellen

Codes, die mir geholfen haben, besser zu verstehen, was ich machen muss und wie ich denken muss:  

https://p5js.org/examples/simulate-spirograph.html 
https://www.maissan.net/articles/javascript-spirograph
https://codepen.io/thebabydino/pen/zxdXbq
https://www.youtube.com/watch?v=bqRvLR3PLf0&t=309s
https://jsfiddle.net/dwahlin/DZtwD/

Inspiration von bereits existierenden Online-Spirographen:

https://nathanfriend.io/inspiral-web/
http://nbremer.github.io/spirograph/
https://output.jsbin.com/rifoyu

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. 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 :)