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 Interface-Werkstatt-Kurs von Fabian Morón Zirfas haben wir in vier verschiedenen Aufgaben und einem Abschlussprojekt experimentell die gestalterischen Möglichkeiten von Soft- und Hardware erforscht.

Einleitung

Ziel des Kurses war es, einen Einblick in die Arbeit eines „Creative Technologist“ zu bekommen, eine Person, die die Schnittstelle zwischen Technologie und Gestaltung bedient und mit prozeduralen, prozessorientierten oder generativen Prozessen arbeitet. Dabei sammelten wir erste Erfahrungen mit der Programmierung von Software mit Javascript (P5.js, Johnny-Five, Node.js) und lernten den Umgang mit der Kollaborationsplattform GitHub kennen.

Aufgabe 1: Deconstructing Master Artists mit P5.js

In der ersten Aufgabe sollten wir uns ein frei gewähltes Kunstwerk aussuchen und dieses analysieren. Anschließend entwickelten wir einen Algorithmus, der verschiedene Versionen des Werkes generieren kann. Dabei sollten wir darauf achten, keine festen Werte zu benutzen, sondern stattdessen Regeln finden, die zum Beispiel dafür sorgen, dass das Werk frei skalierbar bleibt.

Aufgabe 1: Umsetzung

Für die Umsetzung sollten wir Javascript nutzen, was für mich eine kleine Herausforderung darstellte, da ich zuvor noch nie programmiert hatte. Um es mir nicht zu schwer zu machen, habe ich mir ein relativ einfaches Werk des Künstlers Simon C. Page ausgesucht.

Meine kurze Analyse ergab, dass es sich bei dem gesamten Werk sehr offensichtlich um mehrere Kreise bzw. Kreisausschnitte handelt.

Sea_See_C.jpgSea_See_C.jpg
SeaSeeC_Analysis.jpgSeaSeeC_Analysis.jpg

Ich kam relativ schnell auf die Idee, das Kunstwerk mit alternativen Farbpaletten zu programmieren, die sich dann „interaktiv“ auswählen lassen.

Output_2_color.pngOutput_2_color.png
Output_1_Color.pngOutput_1_Color.png
Output_3_color.pngOutput_3_color.png
Output_4_color.pngOutput_4_color.png

Für mich als Anfänger war es die größte Herausforderung, die Lederhaut des Auges zu programmieren, da diese aus der Schnittmenge von zwei gleich großen Kreisen besteht. Wie das Ganze mit Javascript machbar ist, findet man auf dieser Seite: http://walter.bislins.ch/blog/index.asp?page=Schnittfl%E4che+zweier+Kreise+berechnen

Aufgabe 1: Ergebnis

DMA.gifDMA.gif

Aufgabe 2: Keyboard Hack

In der zweiten Aufgabe ging es darum, aus Computer-Schrott etwas neues zu erschaffen, in diesem Fall aus dem PCB-Board einer alten USB-Tastatur. Unserer Kreativität wurde dabei keine Grenze gesetzt und es war uns freigestellt, ob wir beispielsweise einen Tea-Timer mit einem Makro Programm bauen oder einen Controller für ein mit Javascript programmiertes Spiel.

Aufgabe 2: Umsetzung

Ich entschied mich dazu, einen relativ simplen Controller für das Musikprogramm Ableton Live zu entwerfen, weil ich schon immer einen eigenen Controller bauen wollte, aber nie die Zeit dazu hatte. Der schwierigste Part war dabei tatsächlich geeignete Tasten-Kombinationen zu finden, da ich möglichst keine bereits belegten Tasten nutzen wollte.

IMG_20191117_165148.jpgIMG_20191117_165148.jpg
IMG_20191117_181615.jpgIMG_20191117_181615.jpg
IMG_20191117_184205.jpgIMG_20191117_184205.jpg
IMG_20191117_172124.jpgIMG_20191117_172124.jpg
IMG_20191117_195939.jpgIMG_20191117_195939.jpg

Leider ist es mir nach vielen Versuchen nicht gelungen, Tasten in Verbindung mit STRG/CTRL und SHIFT zu verlöten, da es nach dem Ausbau aus dem ursprünglichen Tastaturgehäuse gar nicht so leicht war, diese Tasten auf dem PCB-Board ausfindig zu machen. Letztendlich habe ich dann Tasten wie §, $, % und & benutzt, da man diese relativ selten braucht.

Aufgabe 2: Ergebnis

Trotz einiger Probleme finde ich das Ergebnis recht zufriedenstellend und man kann die Box tatsächlich problemlos benutzen, um beispielsweise Szenen in Ableton zu starten, natürlich wären auch andere Anwendungen denkbar. Mein Learning bei diesem Projekt ist auf jeden Fall, sich vorher die Leiterbahnen genau anzuschauen, bevor man alles auseinander rupft.

Aufgabe 3: Draw Bot

In der dritten Aufgabe sollten wir in relativ kurzer Zeit einen funktionierenden Mal-Roboter bauen, dazu sollten wir Johnny-Five in Kombination mit einem Arduino Board benutzen. Da meine Programmierkenntnisse meiner Meinung nach nicht ausgereicht hätten, habe ich mich bei dieser Aufgabe mit Carl Linz zusammengetan.

Aufgabe 3: Umsetzung

Carl und ich einigten uns darauf, einen Mal-Roboter zu bauen, der auf Musik reagiert und sich in der Intensität regulieren lässt. Dafür bauten wir einen ersten Prototypen aus Lego, der mit Hilfe einer drehenden Scheibe ähnliche Muster wie ein Spirograph zeichnete.

89598014_533120020671290_9111900511488966656_n.jpg89598014_533120020671290_9111900511488966656_n.jpg

Hier eine Grafik, die Carl erstellt hat, um die Funktionsweise zu verdeutlichen:

erklärung.pdf PDF erklärung.pdf

Das Web-Interface, das Carl zur Steuerung des Eingangssignals und des Roboters programmiert hat:

interface.pnginterface.png

Aufgabe 3: Ergebnis

3_bearbeitet.png3_bearbeitet.png
2_bearbeitet.png2_bearbeitet.png
1_bearbeitet.png1_bearbeitet.png

Aufgabe 4: Tracing the City

Die letzte und wohl schwierigste Aufgabe war es, eine Datenvisualisierung mithilfe eines Plotters zu erstellen. Dafür sollten wir einen Datensatz aus Berlin finden und diesen mithilfe eines selbst ausgedachten Algorithmus visualisieren.

Aufgabe 4: Umsetzung

Die erste Hürde war es, einen geeigneten Datensatz zu finden, anfangs wollten wir etwas mit Statistiken über Berliner Studenten oder Litfaßsäulen machen, von diesem Plan sind wir letztendlich abgewichen und haben uns für die Stolpersteine des Künstlers Gunter Demnig entschieden. Bei der weiteren Recherche ist uns bewusst geworden, wie viele Opfer allein in Berlin in der Zeit zwischen 1933 und 1945 durch Nationalsozialisten verfolgt wurden.

Als Quelle für unsere Datenvisualisierung diente uns die folgende Internetseite: https://www.stolpersteine-berlin.de/de/stolpersteine-finden 

Um die Daten für unser Projekt verwenden zu können, war es notwendig, die ehemaligen Wohnanschriften der Opfer in Koordinaten umzuwandeln, was angesichts der über 8000 Einträge eine sehr mühselige Handarbeit bedeutet hätte. Nach längerer Suche konnten wir zum Glück jedoch das folgende Tool finden, um diesen Prozess zu automatisieren: https://www.gpsvisualizer.com/geocoder/
Natürlich mussten eine Vielzahl von Adressen trotzdem noch von Hand korrigiert werden!

Anhand der Geburtsjahre der Opfer und der erstellten Koordinaten hat Carl sich einen schlauen Algorithmus ausgedacht, der in der folgenden Grafik erklärt wird:

erklärungen.pdf PDF erklärungen.pdf

Mit p5.js hat Carl dann diesen Algorithmus programmiert und anschließend eine SVG Datei erstellt. Diese musste dann zu GCode umgewandelt und optimiert werden, damit der XYZ-Plotter die Daten verstehen kann. Geplottet wurde dann übrigens im CityLab Berlin, was Fabian freundlicherweise organisiert hatte!

Aufgabe 4: Ergebis

Stolpersteine_4.pngStolpersteine_4.png

_1640774.JPG_1640774.JPG
_1640780.JPG_1640780.JPG
_1640772.JPG_1640772.JPG

Fazit

Mir hat der Kurs grundsätzlich sehr gut gefallen, leider empfand ich das Tempo des Kurses als Programmiereinsteiger etwas zu schnell und ich konnte viele Dinge nicht so umsetzen, wie ich sie mir vorgestellt hatte, da mir einfach die Javascript Kenntnisse gefehlt haben. Andererseits war es auch eine gute Möglichkeit zu lernen, wie man alternative Lösungsansätze findet, um ein ähnliches Ergebnis zu erzielen. Erfrischend fand ich den Mix aus Konzeptionieren, Basteln und Programmieren, besonders Spaß hat mir dabei der handwerkliche Teile gemacht.

Ein Projekt von

Fachgruppe

Werkstattpraxis

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Fabian Morón Zirfas

Entstehungszeitraum

Wintersemester 2019 / 2020

Keywords