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

Creative Technologists – Tracing the City

Creative Technologists – Tracing the City

In dem Kurs „Creative Technologists“ wurde in verschiedenen, kurzen Sprints und einem Abschlussprojekt ein Einstieg in die gestalterischen Möglichkeiten mit technischen Mitteln gegeben. Im Mittelpunkt stand dabei die Programmierung mit Javascript.

Deconstructing Mondrian

Aufgabe

Werke eines Künstlers analysieren und mithilfe von p5js einen Algorithmus entwickeln, der ähnliche Bilder errechnet.

Herangehensweise und Idee

Während anfangs noch meine Überlegung war, Rembrandts Werke nachzuahmen, fiel meine Auswahl schnell auf Mondrians Kompositionen, die er zwischen 1920 und 1940 malte.

Element 17@4x.pngElement 17@4x.png

Sie zeigen völlig abstrahierte Strukturen; horizontale und vertikale Linien, die sich ergänzen und verschiedene viereckige Formen bilden. Diese Werke folgen klaren Regeln, weshalb sie sich auch gut für einen Algorithmus eignen.

About Mondrian (Englisch)

Mondrian was born in 1872 and grew up in a creative environment. In 1892 he got his degree in education and started giving classes while attending art courses at the same time. Shortly after, he moved to Amsterdam and soon had his first exhibition. Back then, he drew typical dutch art: still life. Through several influences, like his involvement in theosophical movement or multiple exhibitions about cubism like Moderne Kunstkrieg, he developed a very abstracted and minimalist style which was also influenced by his spiritualism. He founded De Stijl together with the painter Van Doesburg. Since 1920, his paintings where purely abstract and followed a grid. He put his focus on rhythm, minimalism, and harmony.

Aufbau

In meinem Algorithmus betrachte ich seine Kompositionen als ein zweidimensionales Raster, das später durch mehrere horizontale Linien ergänzt wird und sich damit noch einmal unterteilt. Wichtig ist auch die Harmonie und der Rhythmus: kleinteilige Bereiche werden ergänzt durch gröbere, es entsteht niemals eine Symmetrie. Die Größen der Felder sind auch nicht völlig zufällig, meist ähneln sie sich. Große Felder sind ähnlich lang oder breit wie andere große, für kleine Felder gilt das gleiche.

Farben

Mondrian nutzt ausschließlich die Grundfarben rot, blau, gelb sowie schwarz und weiß. Durch keine der Farben entsteht jedoch eine Tiefenwirkung. Die schwarzen Linien können genauso als Flächen gesehen werden die der Rest der Komposition. Um eine ähnliche Wirkung wie in Mondrian Kompositionen zu erreichen, habe ich zehn seiner Werke analysiert und notiert, welche Farben er wie oft nutzt. Dabei wird allerdings natürlich außer Acht gelassen, wie diese Farben genutzt werden, sondern nur beachtet, wie oft.

Element 10@4x.pngElement 10@4x.png

Daraus entstand dann der Algorithmus, wie folgt erklärt:

mondrian.pngmondrian.png

Probleme

Es ist schwierig, dem Algorithmus Harmonie beizubringen. Dadurch wirken viele der Ergebnisse zu beliebig. Außerdem ist die Farbgebung noch zu zufällig. Man hätte beobachten sollen, wie Mondrian die Farben in seinen Malereien nutzt, nicht nur, wie oft.

Ergebnisse

ergebnisse.pngergebnisse.png

sketch-5.pngsketch-5.png
sketch-2.pngsketch-2.png
sketch-3.pngsketch-3.png
sketch-7.pngsketch-7.png
sketch-6.pngsketch-6.png
sketch-4.pngsketch-4.png
sketch-8.pngsketch-8.png
sketch-9.pngsketch-9.png

Weitere Übungen

Nachfolgend einige weitere Übungen aus dem Kurs, wie zum Beispiel dem keyboard hack.

Element 9@2x.pngElement 9@2x.png
Element 10@2x.pngElement 10@2x.png
Element 8@2x.pngElement 8@2x.png
Element 11@2x.pngElement 11@2x.png

Making Things Move

Aufgabe

Einen Zeichenbot bauen, der durch ein p5js-Frontend und Johnny Five im Backend angesteuert wird.

In dieser Aufgabe habe ich mit Phil und Milan zusammengearbeitet.

Herangehensweise und Idee

Idee war es, eine einfache Soundvisualisierung zu machen. P5js analysiert im Frontend den Sound und der Bot zeichnet dann den Ausschlag einer Amplitude, z. B. der Lautstärke. So lassen sich am Ende verschiedene Sounds visuell miteinander vergleichen.

Zunächst wollten wir den Bot auf eine Rolle Papier zeichnen lassen, die immer weiter rollt. Milan kam dann aber die Idee eines viel kompakteren Designs: Eine Drehscheibe, auf der ein Papier liegt und ein Stift, der an einem Arm befestigt ist und darauf zeichnet.

Das Frontend haben wir so programmiert, dass es einen Sound analysiert und einmal die Werte der Amplitude der derzeitigen Lautstärke übergeben kann, aber auch nur seperiert die der tiefen, mittleren oder hohen Töne. 

Funktionsweise

drawingbook.pngdrawingbook.png

Der Zeichenbot

Er besteht aus einer Lego-Konstruktion, an die ein Arduino, ein Servo und ein Stepper-Motor befestigt ist. Der Servo bewegt den Arm des Stiftes. Der Stepper-Motor, dessen Geschwindigkeit sich durch das Interface verändern lässt, dreht den Untergrund.

89598014_533120020671290_9111900511488966656_n.jpg89598014_533120020671290_9111900511488966656_n.jpg
interface.pnginterface.png

Probleme

Es war schwierig, für den Stift einen sicheren Halt zu finden. 

Der Stepper-Motor, der für die Drehscheibe zuständig ist, ließ sich mit Johnny-Five nur schwer steuern; wir haben es nicht hinbekommen, das Tempo während des Betriebs anständig zu ändern. 

Außerdem schränkt die Musik die kreativen Möglichkeiten ziemlich ein; man kann es selbst kaum beeinflussen. Dadurch sind die Ergebnisse vielleicht nicht sehr spannend.

Ergebnisse

Wie angekündigt, haben wir verschiedene Sounds bzw. Songs analysieren lassen, jedes Mal die Amplitude der Lautstärke. Wir haben zwei leicht verschiedene Algorithmen verwendet, weshalb bei einigen in der Mitte ein sauberer Kreis entsteht, bei anderen aber nicht.

1_sax.png1_sax.png
2_goa.png2_goa.png
3_dizzy.png3_dizzy.png

Tracing the City

Aufgabe

Einen Datensatz finden, der mit Berlin in Verbindung steht, diesen in Javascript analysieren und ihn zweidimensional (mithilfe von p5js) visualisieren. Ziel war es nicht, auf eine Problematik aufmerksam zu machen; das Ergebnis musste nicht unbedingt „lesbar“ sein, es ging um den kreativen und experimentellen Umgang mit Daten. Im Nachhinein wurden die Ergebnisse mit dem Zeichenplotter im Berliner CityLAB auf 20*20cm große Blätter geplottet. 

Für diese Aufgabe habe ich mit Milan zusammengearbeitet.

Idee

Obwohl wir ursprünglich überlegt hatten, Statistiken über Berliner Studenten oder sogar Litfaßsäulen zu durchforsten, entschieden wir uns, Stolpersteine anzuschauen. Der Berliner Künstler Gunter Demnig hat diese erfunden; es gibt (derzeit) über 8000 von ihnen in der Stadt. Stolpersteine sind allein historisch betrachtet sehr eng mit Berlin verbunden; sie machen auf einige der vielen Opfer des Nationalsozialismus aufmerksam. Es ging uns aber keinesfalls darum, ein politisches Statement zu setzen; viel mehr wollten wir das Projekt aus einer gänzlich anderen Perspektive betrachten.

Verlauf

Der Datensatz hatte zu jedem Stolperstein eine Adresse, den Namen und das Geburtsjahr der jeweiligen Person. Um die Adressen in eine Einheit umzuwandeln, die wir in unserem Code verwenden können, haben wir sie mithilfe eines Tools in GPS-Koordinaten umgewandelt. 

Unsere Vision war es, die Positionen der Steine in Relation mit den Geburtsjahren analysieren und visualisieren. 

Um die Menge an Daten zu entschärfen, haben wir nicht jeden einzelnen Stein betrachtet, sondern Berlin in ein Raster unterteilt. Dabei entstanden folgende Resultate:

Probleme

Bei der Umwandlung der Adressen in GPS-Koordinaten gingen ca. 3000 der 8000 Datensätze verloren, die der Encoder nicht richtig umwandeln konnte. Außerdem ist beim Mappen der Stolpersteine auf das Canvas auch nicht die Krümmung der Erde mit einberechnet.

Element 2@4x.pngElement 2@4x.png

Jedes Resultat zeigt eine Karte von Berlin. In jedem Bereich befindet sich ein Quadrat oder ein Dreieck, dass je nach Größe anzeigt, wie viele Stolpersteine sich in diesem Bereich der Stadt befinden. Außerdem wird bspw. in dem Resultat oben rechts das durchschnittliche Geburtsjahr der Personen, zu denen die Stolpersteine in dem jeweiligen Bereich gehören, als Strich angezeigt: je weiter der Strich im Uhrzeigersinn steht, desto höher ist das Geburtsjahr. Zusätzlich wurden in den anderen Resultaten die durchschnittlichen Geburtsjahre in aufsteigender Reihenfolge miteinander verbunden.

Diese Visualisierung ist minimalistisch und abstrakt, beinhaltet dennoch auf den zweiten Blick einige Informationen. Uns gefiel aber die Kleinteiligkeit nicht. Deshalb haben wir uns mehr auf die Geburtsjahre fokussiert und den folgenden Algorithmus entwickelt:

tracingthecity.pngtracingthecity.png

Das Ergebnis sieht folgendermaßen aus:

alle.gifalle.gif

Diese Darstellung hat auf eine noch reduziertere Weise einen Zusammenhang zwischen Ort der Stolpersteine und dem Geburtsjahr der zugehörigen Personen hergestellt, ohne dabei kleinteilig zu sein. Jedes einzelne Bild wirkt wie ein eigenes Geflecht. Die verbundenen Linien suggerieren eine Art Beziehung zwischen den verschiedenen Punkten. Setzt man alle Bilder der Reihe übereinander,  entstehen zusammengehörige „Netzwerke“.

alle.pngalle.png

Um den Effekt beim Übereinanderlegen auch nach dem Plotten noch erreichen zu können, haben wir jedes einzelne entstandene Bild auf Transparentpapier geplottet. So lassen sich die Blätter einfach übereinanderlegen. 

Probleme beim Plotten

Das Papier ist sehr dünn und leicht, haftete kaum auf dem Untergrund. Dadurch verschob es sich andauernd, Wellen entstanden. Davon abgesehen ist das Papier noch sehr empfindlich.

Resultat

plots.pngplots.png

nebeneinander.pngnebeneinander.png

Fazit

Der Kurs bot einen überaus interessanten Einblick in das Berufsfeld des Creative Technologists. Ich konnte die Basics von Javascript mit p5js und Bash lernen, habe zum ersten Mal in meinem Leben gelötet, hatte einen Einstieg in die Arduino-Welt, konnte am Ende Daten analysieren sowie visualisieren und dabei mit einem Zeichenplotter arbeiten. 

Mir bot sich ein sehr interessanter Einblick in einige der vielfältigen digitalen und gleichzeitig analogen Möglichkeiten, die kreative Forscher heute haben. Ich habe einen Beruf kennengelernt, der irgendwo zwischen Elektrotechnik und Künstler angesiedelt ist. In diesem Kurs ging es sicherlich nicht darum, perfekt programmieren zu lernen, sondern eher in verschiedene Welten einzutauchen und sich einzulassen - auszuprobieren, was möglich ist, welche Technologien wir nutzen können um Neues zu erreichen. Leider war das Tempo durch die Menge der Aufgaben derart hoch, dass es kaum eine Möglichkeit gab, in ein Thema tiefer einzusteigen.

Obwohl meine Ergebnisse keineswegs perfekt sind, kann ich einiges mitnehmen und kann den Kurs nur weiterempfehlen, sollte er noch einmal stattfinden.

Ein Projekt von

Fachgruppe

Werkstattpraxis

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Fabian Morón Zirfas

Zugehöriger Workspace

Creative Technologists - Tracing the City

Entstehungszeitraum

Wintersemester 2019 / 2020