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

Dokumentation des Kurses »Creative Technologists - Tracing The City« bei Fabian Morón Zirfas (WiSe 19/20)

Deconstructing Master Artists

Aufgabe

Die erste Übung bestand daraus, eine berühmte, kunstschaffende Person und eines ihrer Werke auszusuchen und dieses in p5.js in seinem Genotyp nachzubilden.

Über Kandinsky

Wassily Kandinsky (16. Dezember 1866 - 13. Dezember 1944)  war ein russischer Maler und Kunsttheoretiker und wird allgemein als einer der Pioniere der abstrakten Kunst angesehen. In 1896 begann er in München zu studieren, doch mit dem Ausbrechen des ersten Weltkriegs kehrte er nach Russland zurück. Nach der Oktoberrevolution übernahm er die erste Leitung des Instituts für Künstlerische Kultur in Moskau. Seine künstlerische Ausdrucksart wurde jedoch bald als zu individualistisch und bourgeois abgelehnt. 1920 kehrte er auf Einladung von Walter Gropius nach Deutschland zurück und unterrichtete zwischen 1922 und 1933 am Bauhaus. Nach der Schließung der Schule durch die Nazis verbrachte er den Rest seines Lebens in Paris.

Kandinskys Stil war anfänglich inspiriert von den frühen Werken Monets. Er empfand, dass die Farben fasst unabhängig vom eigentlichen Inhalt der Gemälde seien. Dies wurde zur Grundlage seines eigenen Schaffens: Der Ausdruck durch Farbe und nicht objektive Wahrheiten. Kandinskys Frühwerk zeigt zudem einen eindeutigen Einfluss durch Pointilismus und Fauvismus. Als Kunsttheoretiker war er auch direkt von musikalischen Strukturen inspiriert, da diese natürlicherweise abstrakt sind. Anfang der 1920er Jahre und somit zu Beginn seiner Phase als Bauhaus-Lehrer wandelte sich sein ehemals sehr dynamischer Stil in Richtung geometrischer Kompositionen um. Seine späteren Werke nach dem Bauhaus wurden wiederum ein Mischung: Eine Verbindung zwischen freien Farbdarstellungen und geometrischen Abstraktionen mit lebhaften Farbharmonien.

Kreise im Kreis (1923)

Kandinskys Werk „Kreise im Kreis“ (1923, 98,7 x 95,6 cm, Philadelphia Museum of Art) steht am Anfang seiner Bauhaus-Phase. Es zeigt mehrere überlappende, semi-transparente, farbige Kreise in unterschiedlichen Größen und Umrandungen innerhalb eines dominanten, schwarzen Kreises. Das Farbschema basiert auf den Komplementärfarben im RYB-Farbraum. Zusätzlich sind mehrere Linien in unterschiedlicher Länge und Orientierung, die sich teilweise wiederholen im Bild positioniert. Der Hintergrund wird durch farbige, ebenfalls semi-transparente, spotlight-ähnliche Kegel bestimmt.

Wassily_Kandinsky-Kreise_im_Kreis_(1923).jpg
Wassily_Kandinsky-Kreise_im_Kreis_(1923).jpgWassily_Kandinsky-Kreise_im_Kreis_(1923).jpg

Der erste Ansatz bestand in der Umsetzung der Linien und Kreise, da diese den Grundbestandteil der Komposition bilden. Dies fand vorerst in 2D statt. Allerdings war die Vision einen 3D, interaktiven Sketch zu erstellen, sodass im nächsten Schritt die Umwandlung zu WebGL versucht wurde. In dieser Version sollte der dominante Kreis als Overlay existieren und man sollte in der Lage sein, mit Hilfe einer Orbit-Kamera die Linien und Kreise innerhalb des Overlays nach belieben zu positionieren. Doch WebGL zeigte sehr schnell einige Limitationen auf. Sowohl die Realisierung eines Overlays als auch das korrekte Rendering von Outlines waren praktisch innerhalb des Zeitrahmens nicht umsetzbar.

Die einzige weitere Herausforderung war die Umsetzung der Komplementärfarben im RYB-Farbraum, da dieser in p5.js nicht nativ unterstützt wird. Grundsätzlich empfiehlt es sich im HSV-Farbraum zu arbeiten, da dort auf einfachste Art und Weise harmonische, randomisierte Farben erzeugt werden können. Zusätzlich ist es sehr einfach spektral naheliegende Farben zu erzeugen, weshalb hier auch grundsätzlich damit gearbeitet wurde. Um allerdings die richtigen Komplemente zu generieren findet eine Farbkonvertierung HSV->RGB->RYB->(Komplement bilden)->RGB->HSV statt. Von den beiden Ausgangsfarben werden dann die Umgebungsfarben mit Hue ±20 und Saturation/Value 75 ±25 abgeleitet.

Screenshot - 2019-10-27_01060.pngScreenshot - 2019-10-27_01060.png
Screenshot - 2019-10-27_01058.pngScreenshot - 2019-10-27_01058.png
Screenshot - 2019-10-30_01075.pngScreenshot - 2019-10-30_01075.png
Screenshot - 2019-10-27_01062.pngScreenshot - 2019-10-27_01062.png
Screenshot - 2019-10-27_01064.pngScreenshot - 2019-10-27_01064.png
Screenshot - 2019-10-27_01067.pngScreenshot - 2019-10-27_01067.png
Screenshot - 2019-10-30_01077.pngScreenshot - 2019-10-30_01077.png

ezgif-6-f19f62f3453f.gifezgif-6-f19f62f3453f.gif

Finale Ergebnisse

sketch_2.pngsketch_2.png
sketch_3.pngsketch_3.png
sketch_1.pngsketch_1.png

Schwarze Beziehung (1924)

„Schwarze Beziehung“ (1924, 35,8 x 36,2 cm, Museum of Modern Art New York) entstand ebenfalls am Anfang von Kandinskys Bauhaus-Phase und verfolgt ein ähnliches Prinzip, wie „Kreise im Kreis“: Das Verhältnis zwischen einer schwarzen Form zu einer Zusammensetzung aus verschiedenen, farbigen, geometrischen Formen.

Wassily_Kandinsky-Schwarze_Beziehung_(1924).jpg
Wassily_Kandinsky-Schwarze_Beziehung_(1924).jpgWassily_Kandinsky-Schwarze_Beziehung_(1924).jpg

Die zweite Umsetzung eines Werkes von Kandinsky war lediglich ein zusätzlicher Versuch, der allerdings nicht so gut funktionierte wie der Erste. Dies liegt hauptsächlich daran, dass die Formen nicht nur übereinander gelegt wurden, sondern auch teilweise komplexere Polygone zusammengesetzt wurden und diese Strukturen korrekt nachzubilden stellte sich als eine in der verbleibenden Zeit nicht zu stemmende Aufgabe heraus.

Finale Ergebnisse

sketch_3.pngsketch_3.png
sketch_11.pngsketch_11.png
sketch_12.pngsketch_12.png
sketch_8.pngsketch_8.png
sketch_2.pngsketch_2.png
sketch_5.pngsketch_5.png
sketch_6.pngsketch_6.png
sketch_1.pngsketch_1.png


Making Things Move

Aufgabe

Der Entwurf einer Zeichenmaschine mit p5.js als Frontend und Johnny-Five als Backend mit Motoransteuerung über einen Firmata-geflashten Arduino.

Umsetzung

P2250560.jpgP2250560.jpg
P2250570.jpgP2250570.jpg
P2250561.jpgP2250561.jpg
P2250567.jpgP2250567.jpg
P2250564.jpgP2250564.jpg
P2250573.jpgP2250573.jpg

Der ursprüngliche Ansatz bestand darin eine Art Musik-/Soundvisualisator zu bauen, da die Rotationsplattform bereits für ein anderes Projekt vorhanden war, lediglich der DC-Motor noch temporär montiert werden musste. Auch der Rest der Konstruktion wurde aus vorhandenen Teilen hergestellt. Der DC-Motor wurde auf Grund eines fehlenden zweiten Motorboards manuell angesteuert. Die Linearachse wurde mit einem Stepper-Motor realisiert, welcher über den Arduino, vom Johnny-Five Backend kontrolliert wurde.

Und an diesem Punkt begannen die Probleme, da der Stepper wahlweise gar nicht funktionierte oder nur in eine Richtung vernünftig. Allerdings ohne einen konkret lösbaren Bug.

Über die Arduino IDE:

Über Johnny-Five:

Schlussendlich wurde die Musikvisualisierung wegen der erhöhten Komplexität als Ziel vernachlässigt. Die nächste Idee bestand darin, eine Art Spiel zu entwickeln, wo bestimmte Patterns und ein Stichwort im Frontend angezeigt werden und die spielende Person die Aufgabe hat, dieses Stichwort durch Bewegen des Papiers zu zeichnen. Nach einem Test stellte sich heraus, dass dies sehr schwierig war und der Code und auch die Hardware (oder Hardwaresteuerung allgemein; die Hardware war eher unzuverlässig) größerer Anpassung bedurfte, die auf Grund fehlender Zeit auch nicht mehr umgesetzt werden konnten.

Screenshot from 2020-03-12 22-44-39.pngScreenshot from 2020-03-12 22-44-39.png

P2250749.JPGP2250749.JPG


Tracing The City

Aufgabe

Künstlerische Visualisierung in p5.js und Plotten von Berlin-bezogenen Daten.

Datensatz

Der gewählte Datensatz dokumentiert die Binnenwanderung zwischen den Bezirken innerhalb Berlins zwischen 2005 und 2013. Die Daten stammen vom Amt für Statistik Berlin Brandenburg und sind unter CC BY 3.0 lizenziert.

Screenshot - 2020-01-24_01430.pngScreenshot - 2020-01-24_01430.png

Idee

Die Idee zur visuellen Umsetzung des Datensatzes war die Gegenüberstellung zwischen Dynamik und Statik.
Die Linien symbolisieren den Durchschnitt der Zu- und Abwanderung von Bezirk zu Bezirk. Anfänglich war das Herkunftsgebiet mit zusätzlichen Kreisen am Ende markiert, während das Zielgebiet ein offenes Ende hatte. Um die Komplexität etwas zu reduzieren wurde dieser Aspekt schlussendlich weggelassen. Die Anzahl der Linien wird bestimmt durch die Menge der Umzüge. Die Fächerung der Linien wurde variiert, sodass am Ende eher eine Art Shading entstand und einzelne Linien meist nicht mehr direkt erkennbar sind.
Die Kreise stehen für die Zu- und Abwanderung der einzelnen Bezirke in den jeweiligen Jahren. Dabei sind die roten Kreise die Ab- und die orangen Kreise die Zuwanderung.

test-02_col.pngtest-02_col.png
test-03a.jpgtest-03a.jpg
test-03b-01.jpgtest-03b-01.jpg
test-03.pngtest-03.png
test-04b.pngtest-04b.png
test-04a.pngtest-04a.png

test-05.jpgtest-05.jpg

Plotten

Das Plotten auf das 20x20cm Endformat fand am Plotter des CityLabs statt. Für die Linien wurde ein Bleistift und für die Kreise Fineliner verwendet. Doch im Prozess taten sich einige Probleme auf.
Das erste, vorhergesehene Problem war das, des Bleistiftabriebs. Der Versuch des Anspitzens scheiterte zuerst, wodurch beim ersten Testplot ein gewisses Misalignment entstand. Danach funktionierte das Anspitzen zwischendurch etwas besser, damit auch die Linien nicht zu breit und indistinkt werden konnten.
Weitere Probleme die entstanden:

  • Die Konvertierung der SVGs zu validen GCODE funktionierte letztendlich nur, wenn sie aus Sketch kamen

  • Die Optimierung des GCODEs funktionierte praktisch nicht

  • Durch die fehlende Optimierung wurden die Linien beim Testplot nicht logisch abgefahren, sondern von jedem Linienbündel mal hier und mal da eine Linie (siehe Video unten ab 0:00)

  • Im finalen Plot wurden die Linien nun logisch geordnet, aber anstatt bidirektional zu zeichnen fuhr der Plotter die Linien immer nur aus einer Richtung ab, sodass er absetzte und zurückfuhr. Dadurch wurde praktisch die doppelte Strecke/Zeit benötigt (siehe Video unten ab 0:09)

  • Bei der Konvertierung der Kreise wurde praktisch die unterschiedlichen Bounding Boxen auf die Canvas-Size hochskaliert, wodurch auch zwischen den beiden Farben ein Misalignment entstand

  • Das Web-Interface des Plotters funktionierte nur stabil, wenn es über ein Live Ubuntu abgerufen wurde

Abgesehen von diesen technischen Problemen funktioniert das Bild an sich auch nicht 100%ig (besonders auch im Vergleich zu der digitalen Version), da die Differenz in der Intensität der Zeichenmittel zu hoch ist. Das Linien-Shading geht dabei strukturell durchaus unter. Zusätzlich gibt es noch einen weiteren „Glitch“, der die Komposition aber eher visuell ansprechender gemacht hat und das ist die unperfekte Art und Weise, wie der Plotter Kreise zeichnet. Dadurch bekommen diese einen sehr organischen Charme und erinnern an die Jahresringe eines Baumes, was auch als Bild konzeptionell im Zusammenhang mit Urbanismus und dem mehr oder weniger organischen Wachsen/Verändern einer Stadt interessant ist.

20200117_165547.jpg20200117_165547.jpg
20200122_134618.jpg20200122_134618.jpg

Ergebnisse

img119.jpgimg119.jpg

img120.jpgimg120.jpg

Fazit

Von allen im Kurs durchgeführten Projekten hat für mich persönlich lediglich Deconstructing Master Artists zufriedenstellend funktioniert. Alle anderen wurden durch Probleme jeglicher Art aufgehalten. Dies finde ich an sich vollkommen akzeptabel, da es durchaus die Realität ist, wenn man mit Technologie arbeitet. Ein*e Pilot*in ist ein lernintensiver Beruf. Dies liegt nicht daran, dass es heutzutage übermäßig anspruchsvoll wäre ein Flugzeug im Normalbetrieb zu fliegen, sondern, weil man genau wissen muss was es zu tun gibt, wenn die Technik mal nicht funktioniert. So, nur das meist weniger auf dem Spiel steht, verhält es sich für die meisten technischen Anwendungen. Diese Erfahrung lässt sich nur durch Trial-and-Error gewinnen und wenn immer alles richtig läuft, kann man fast davon ausgehen, dass man etwas falsch macht. Aus dieser Perspektive stören mich die letztendlichen Ergebnisse in keiner Art und Weise, denn ich weiß auch wie viel Zeit ich bereits investierte und hätte, wenn es nicht noch andere Verpflichtungen geben würde, auch kein Problem gehabt mich mehr mit den Technologien auseinanderzusetzen.

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