In unseren Seminar „Web Science“ befassen wir uns im kommenden Wintersemester 26/27 unter anderem wieder mit Creative Coding. Wir schauen uns p5.js genauer an und wollen anhand von Code-Snippets bzw. Sketches auch die Möglichkeiten für kreative Datenvisualisierungen testen. Ein Ziel ist, über den praktischen Zugang zu p5.js JavaScript Grundlagen zu lernen. KI begleitet uns dabei als Tutor, beantwortet Fragen und hilft, Probleme zu lösen. Wichtig ist aber, dass wir generierten Quellcode verstehen und nicht unreflektiert übernehmen. Daher starten wir mit einfachen Beispielen im p5.js Webeditor – erst einmal ganz ohne JavaScript Build Tools wie Vite oder Frameworks wie z.B. React.
Da in einigen Kursen immer mal wieder die Frage aufkommt, welche Formen der Datenvisualisierung es eigentlich gibt und wofür man sie gut einsetzten kann (oder eben auch nicht), habe ich eine Sammlung von p5.js Beispielen als „Formen der Datenvisualisierung“ begonnen:
Die Sammlung ist nicht nach Aussehen geordnet, sondern nach kommunikativer Absicht: Was soll die Grafik zeigen?
Zu jeder Form gehört ein lauffähiges p5.js-Beispiel – Mouseover zeigt es, Klick öffnet Code und Erläuterung. Bisher sind 11 Kategorien aufgeführt von Magnitude über Zeitverlauf bis hin zu Unsicherheit oder Raum. Ein Punkt oben rechts in jeder Beispielkachel zeigt an, was Bewegung hier leisten kann. 22 der 89 Formen können Bewegung als Bedeutungsträger nutzen, bei allen anderen ist Animation Dekoration.
Beim Creative Coding wollen wir keine vorgegebenen Diagrammformen übernehmen, sondern über Experimentieren und Ausprobieren mittels Code geeignete Ausdrucksformen für unsere Visualisierungen und Ideen finden. In der Formensammlung wird aber deutlich, dass die Grenzen fließend sind zwischen funktional, informierend und gestaltend z.B. beim Partikelfluss.
Im Creative Coding ist der Code selbst das gestaltete Medium und die Abbildung von Daten zu Form wird von uns entworfen und durchprobiert. Auch bei klarem funktionalem Ziel kann der Weg explorativ sein. Wir probieren Mappings, Parameter, Formen durch, das Ergebnis ist nicht vorab festgelegt. So bleibt der Creative-Coding-Charakter erhalten.
Die Formensammlung dient nicht als fertige Library, sondern als konzeptioneller Einstieg in Datenvisualisierung. Sie wird nach und nach erweitert, falls uns etwas fehlen sollte.