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

Eingabe, Ausgabe. Philipp Pfingsttag.

Dokumentation des Kurses „Eingabe, Ausgabe. Grundlagen der prozessorientierten Gestaltung“ mit Prof. Monika Hoinkis in Zusammenarbeit mit der Interface Werkstatt unter Leitung von Fabian Morón Zirfas.

_01_.png_01_.png

Musteranweisung analog

Erster Input Ein Input kann auf verschiedene Weisen erfolgen, zum Beispiel auch durch eine simple, „handschriftlich“ verfasste Zeichenanweisung, welche durch andere Personen analog ausgeführt wird.

Aufgabenstellung In der ersten Teilaufgabe sollte eine Musteranweisung formuliert werden, welche von den anderen Kursmitgliedern, später auch von fremden Personen analog - mit Stift und Papier - ausgeführt werden sollte. Dabei konnte die Anweisung sehr präzise ausfallen, aber auch Varianzen oder gar zufällige Parameter enthalten.

01_Pattern_analog_.jpg01_Pattern_analog_.jpg

Analoge Eingabe Die Grundüberlegung meiner Musteranweisung war es, eine Art Schaltkreis bzw. Platinenlayout zu generieren, welches aus parallel laufenden Geraden und orthogonalen Winkeln besteht, die durch Punkte verbunden sind. Dabei sollten sich die Linien nicht kreuzen oder berühren - „Tron“ lässt grüßen.

01_Pattern_analog_2.jpg01_Pattern_analog_2.jpg

Ergebnis Die meisten Ausführungen der anderen Kursteilnehmer entsprachen meiner Grundüberlegung, jedoch gab es einige interessante Ausnahmen.

01_Pattern_analog_3.jpg01_Pattern_analog_3.jpg

Ausnahmen Da ich die Punktgröße nicht näher spezifiziert hatte, wurde mit unterschiedlichen Punktgrößen gearbeitet, aber durchgehend die gleiche Linienstärke benutzt, obwohl diese ebenfalls nicht näher spezifiert war.

01_Pattern_analog_4.jpg01_Pattern_analog_4.jpg

Die meisten Linien wurden parallel zum „Rand“ der Zeichenfläche gezeichnet - wovon ich eigentlich intuitiv ausgegangen bin - bis auf eine Ausführung, welche die Linien in einem Winkel von 45 Grad abbildete und zu dem die Anweisung „Linien dürfen sich nicht kreuzen“ missachtete - ein lustiger Zufall wie sich später noch herausstellen wird.

Wiederholung Nach den Ausführungen der anderen Kursteilnehmer habe ich die Anweisung verfeinert, Punktgröße und Linienstärke fest definiert und Personen zwischen 11 und 70 Jahren malen lassen - ein Besuch meiner Familie in Berlin kam da sehr gelegen.

01_Pattern_analog_5.jpg01_Pattern_analog_5.jpg

01_Pattern_analog_6.jpg01_Pattern_analog_6.jpg

Beobachtungen Es war wirklich interessant zu beobachten, auf welche Art und Weise verschiedene Persönlichkeitstypen versuchten, die Musteranweisung auszuführen und auszulegen.

Während manche Personen sehr drauf bedacht waren, die Musteranweisung möglichst genau und „richtig“ auszuführen, haben andere Personen gezielt die undefinierten bzw. nicht näher spezifizierten Parameter ausgenutzt, um ein Muster mit Abweichungen und Varianzen zu generieren.

Musteranweisung digital

Processing Anschließend sollte die analoge Musteranweisung in Processing „übersetzt“ bzw. programmiert werden. Leider konnten in Processing nicht alle Parameter originalgetreu nachgebildet oder nur mit sehr großem Aufwand programmiert werden - daher musste ich auf den „Tron-Parameter“ (Linien dürfen sich nicht kreuzen) leider verzichten.

01_Pattern_digital_1.jpg01_Pattern_digital_1.jpg

Processing Code

float px;
float py;

void setup() {

  size(1440, 890);                        // A4 Verhältnis
  smooth();
  background(255);                        // Papierfarbe
  frameRate(30);

  strokeWeight(2);                        // Definition Linien-Stärke
  fill(0);                                // Definition Kreis Farbe
}

void draw() {

  //rotate(radians(45));                  // Canvas Rotation um 45° Grad
  //translate(0,-450);

  px = constrain(px, 0, width);           // Außerhalb des Papiers wird nicht gemalt!
  py = constrain(py, 0, height);

  float y = py + random(-500, 500);       // Linienlänge nicht definiert = Zufall
  float x = px + random(-500, 500);  


  for (int i = 0; i < 2; i = i + 1) {     // Linien stehen stehts orthogonal zueinander

if (i%2 == 0) {
  println("horizontal");              // Zeiche horizontale Linien ...

  line(px, py, x, py);
  ellipse(px, py, 7, 7);

  px = x;

} else {
  println("vertical");                // ... und vertikale Linie im Wechsel

  line(px, py, px, y);                // ... die stets durch einen Punkt verbunden sind
  ellipse(px, y, 7, 7);

  py = y;
}

 } 
}

void mousePressed() {
background(255);
    }

Zufall Zufälligerweise hat ein Kursmitglied die analoge Anweisung falsch ausgeführt, in dem es die Regel „Linien dürfen sich nicht kreuzen“ missachtet hat - letztendlich kommt diese Ausführung der digitalen Umsetzung in Processing am nächsten:

01_Pattern_digital_2.jpg01_Pattern_digital_2.jpg

_02_.png_02_.png

GPS Drawings

Malen mit GPS In der ersten Teilaufgabe sollten wir uns mit den Vor- und Nachteilen des GPS-Trackings vertraut machen. Hierzu installierten wir die App „Runkeeper“ auf unseren Smartphones und versuchten unsere Namen auf dem Campus zu zeichnen bzw. nachzulaufen. Die Daten wurden anschließend in Processing visualisiert.

02_GPS_Campus_1.jpg02_GPS_Campus_1.jpg

Blind Operator Eine detailierte Wegbeschreibung zu formulieren, welche durch einen „Blind Operator“ ausgeführt wird, war Gegenstand der nächsten Aufgabe. Dabei sollte diesmal nicht nur der Campus als Zeichenfläche dienen, sondern ganz Berlin.

Nushin, mein Blind Operator erhielt von mir folgende Beschreibung:

Starte deine Tour in der Nähe der Haltestelle Niederbarnimstraße, an der Shishbar Bar Mirsham - Starte nun dein Tracking. Laufe die Boxhagener Straße auf der rechten Seite entlang, bis du die Straßen Gabriel-Max-Straße und Gärtnerstraße/Mainzerstraße gekreuzt hast und biege anschließend rechts in die Straße Wismarplatz ab.

Laufe nun die komplette Seumerstraße auf der rechten Seite gerade aus entlang, bis du die Straßen Grünbergerstraße, Krosseren Straße, Wühlistraße und Simplonstraße gekreuzt hast. Nun solltest du in der Niemannstraße sein, die nächste Straße die du nun kreuzt, ist die Revaler Straße.

Jetzt wird‘s wieder gemütlicher: Laufe die Simon-Dach-Straße auf der rechten Seite entlang, bis du die Wühlistraße, die Krosseren Straße und die Grünberger Straße überquert hast; wenn du dich die ganze auf der rechten Straßenseite gehalten hast solltest du jetzt wieder an der Bar „Mirsham“ herauskommen.

Pausiere nun dein Tracking - Jetzt wird‘s lustig, wir müssen nämlich kurz umziehen: Biege nach rechts ab (Gabriel-Max-Straße) und laufe bis zur Kreuzung Grünberger Straße/Gabriel-Max-Straße.

Starte nun dein Tracking und laufe einen möglichst großen Kreis/Radius um den Mittelpunkt der Kreuzung, indem du jede Straßenseite überquerst, bis du wieder am Punkt stehst, an dem du das pausierte Tracking wieder aufgenommen hast.

Pausiere dein Tracking erneut. Laufe die Grünberger Straße entlang, bis zur Kreuzung Gärtnerstraße/Grünberger Straße.

Und weil es soviel Spaß machen wir dasselbe nochmal: Starte dein Tracking und und laufe einen möglichst großen Kreis/Radius um den Mittelpunkt der Kreuzung, indem du jede Straßenseite überquerst, bis du wieder am Punkt stehst, an dem du das pausierte Tracking wieder aufgenommen hast. Pausiere dein Tracking.

Bald geschafft! Laufe die Gärtnerstraße entlang, bis zur Kreuzung Krosseren Straße/Gärtnerstraße.

Schalte dein Tracking wieder ein. Weil Zick-Zack-Laufen enorm viel Spaß macht, wechsele wieder abwechselnd die Straßenseite, bis du die Kreuzung Gabriel-Max-Straße erreicht hast.

Jetzt hast du es wirklich geschafft! Glückwunsch!

PacMan vs. GPS Nushin hat meine Beschreibung korrekt ausgeführt und erhielt dafür einen kleinen Pacman „Ghost“, der in Wirklichkeit größer ist als der Boxhagener Platz:

02_GPS_Blind_2.jpg02_GPS_Blind_2.jpg

_03_Eyetracking.png_03_Eyetracking.png

Bildmaschine

Eyetracking Labor Für die Bearbeitung der nächten Aufgabe erhielten wir zunächst eine Einweisung in die Technik des Eyetracking Labors. Die Aufgabe bestand nun darin, durch typografische Auszeichnungen wie Textgröße, Zeilenabstand und andere auffällige Formatierungen, die getracke Augenbewegung so zu beeinflussen, dass durch das bloße Lesen eines Textes eine gewollte Form bzw. ein Bild entsteht, welches wiederum in Processing modifiziert und ausgegeben werden kann.

Versuche Für die ersten Augenblicke im Eyetracking Labor habe ich mich für Gedichte und Textzeilen zum Thema Vergänglichkeit und Zeit entschieden, welche ihrer Bedeutung entsprechend in verschiedenen Formen (z.B. Kreis als stilisierte Uhr, Undendlichkeit als „Acht“ bzw. als Sanduhr) gesetzt wurden:

03_Eyetracking_1.jpg03_Eyetracking_1.jpg

Verschiedene Auszeichnungs-Parameter die getestet wurden waren zum Beispiel: » Serifen vs. serifenlose Schriften » Versal vs. Minuskelsatz » Erhöhter vs. verminderten Zeichenabstand

Ergebnis Die besten bzw. genausten Formen wurden mit Versalbuchstaben in einer relativ kleinen Schriftgröße erreicht. Einzelne, fett gesetzte Worte eigneten sich sehr gut dafür, die Aufmerksamkeit gezielt auf einen bestimmten Punkt zu richten.

Zeitmacht Als Präsentationform habe ich mich für ein kleines Booklet entschieden, welches aus beidseitig bedruckten, transparenten Papieren besteht. Diese „Layer“ unterstützen das Thema der Vergänglichkeit, da bestimmte Texte verblassen, während andere erst sichtbar werden. Durch spiegelverkehrt gesetzte Texte und andere kleine Besonderheiten lädt das Booklet zum explorativen Erkundung ein.

03_Eyetracking_Book_1.jpg03_Eyetracking_Book_1.jpg

03_Eyetracking_Book_2.jpg03_Eyetracking_Book_2.jpg
03_Eyetracking_Book_3.jpg03_Eyetracking_Book_3.jpg

_04_Arduino.png_04_Arduino.png

I/O Apparate

Arduino Die letzte Aufgabe bestand darin, einen auf dem Arduino Mikrocontroller basierenden, funktionsfähigen Prototypen bzw. „Apparat“ zu entwickeln, welcher auf einen bestimmten Input einen bestimmten Output liefert. Die Wahl der Sensoren und Komponenten zur Ein- und Ausgabe waren dabei frei wählbar.

Konzeption Mein Hauptintention bei der Konzeption des Apparates war es, einen „nützlichen“ Gegenstand zu entwickeln, den ich im täglichen Leben einsetzen kann und mich vor etwas warnt, das ich als Mensch nur schwer bzw. nicht unmittelbar wahrnehmen kann.

Letztendlich habe ich mich dafür entschiedenen, eine „intelligente“ Uhr für mein Büro zu konstruieren, welche mich über die Kohlenstoffmonoxid-Konzentration in der Luft informiert und mir durch eine Art „Schnapp-Atmung“ zu verstehen gibt, dass es nun höchste Zeit ist, den Raum zu lüften.

03_Ventilate_.jpg03_Ventilate_.jpg

Die Eingabe erfolgt also über einen CO2-Sensor, während die Ausgabe über einen pulsierenden Ring aus RGB-LEDS erfolgt, welcher je nach CO2-Konzentration verschiedene Zustände annehmen kann:

03_Ventilate_2.jpg03_Ventilate_2.jpg

Pulse Width Modulation Über Pulse-Width-Modulation (PMW) wird das Pulsieren des LED-Rings ermöglicht, welcher über die PMW-fähigen, digitalen Pins 5, 9 und 10 mit einem Arduino Micro verbunden ist.

03_Ventilate_3.jpg03_Ventilate_3.jpg

Im Prinzip können LEDs nur die Zustände „Ein“ oder „Aus“ annehmen; durch Pulsbreitenmodulation ist es aber möglich, das Intervall zwischen diesen Zuständen gezielt zu steuern. Durch die Trägheit des menschlichen Auges entsteht dadurch die Illusion, dass die LED dunkler (längeres Intervall) bzw. heller (kürzeres Intervall) leuchten würde.

CO2 Sensor Ein neuer CO2-Sensor benötigt eine Betriebdauer bzw. „Einbrennzeit“ von ca. 48 Stunden, bis konstante Werte über einen analogen Pin auslesen werden können.

03_Ventilate_4.jpg03_Ventilate_4.jpg

Das liegt am besonderen Funktionsprinzip von Metalloxid-Hableitergassensoren: Das zu messende Gas (hier CO2) regiert direkt mit einem erhitzten Metallplättlichen im Sensor, welcher je nach Konzentration des Gases seine Leitfähigkeit verändert.

Tinkertime Die Umsetzung gestaltete sich schwieriger als gedacht: Da es mir wichtig war, so wenig „Technik“ wie möglich zu zeigen, habe ich versucht alle Teile in einer flachen, runden Aluminiumdose unterzubringen, die hinter der Uhr befestigt werden sollte.

03_Ventilate_5.jpg03_Ventilate_5.jpg

Frustration Nachdem ich exakt 5  mm große Löcher in gleichmäßigen Abständen in eine Aluminiumdose gebohrt hatte, habe ich versucht, einen Ring aus 8 direkt verbundenen RGB-Leds zu konstruieren. Da jede RGB-LED vier Beine besitzt, die sich nicht berühren dürfen, erforderte dies unter Berücksichtigung meiner eher unterdurchschnittlichen Lötfähigkeiten stundenlange, frustierende Präzisionsarbeit.

03_Ventilate_6.jpg03_Ventilate_6.jpg

Freude Nach einigen Fehlschlägen war es ein wirklich schönes Gefühl, alle LEDs leuchten zu sehen - jede unsaubere bzw. nicht leitende Lötstelle hatte nämlich zur Folge, dass der ganze Ring nicht funktionsfähig war.

Kompromiss Obwohl ein Arduino Micro recht kompakt in seiner Bauweise ist, passte er leider nicht mehr in die Aluminiumdose und musste daher „ausgelagert“ werden.

Sketch Durch den Einsatz von Delays und verschieden Intervall-Längen wurde versucht, das Pulsieren des LED-Rings der Frequenz der menschlichen Atmung nachzuempfinden.

03_Ventilate_7.jpg03_Ventilate_7.jpg

Probleme Während Tests und Anpassungen des Codes habe ich bemerkt, dass eine LED stets eine leichte Farbabweichung gegenüber den anderen LEDs zeigt - während alle LED Orange leuchteten, leuchte die betroffene LED z.B. eher Grün als Orange. Letztendlich hat sich herausgestellt, dass diese eine LED von einem anderen Hersteller gefertigt wurde und sich deshalb die (additive) Farbmischung abweichend verhielt.

Code

int sensorValue;

// RGB Led Setup
const int redPin = 5;
const int greenPin = 10;
const int bluePin = 9;

void setup(){
  pinMode(redPin,   OUTPUT);
  pinMode(greenPin, OUTPUT);   
  pinMode(bluePin,  OUTPUT); 
}


void loop(){

  sensorValue = analogRead(5);      
  Serial.println(sensorValue, DEC);  
 // delay(10);                      

  if(sensorValue >= 110){
    for(int redVal = 1; redVal <= 255; redVal = redVal+3) { 
      analogWrite(redPin, redVal);
      delay(5);
   }

    for(int redVal = 255; redVal >= 1; redVal = redVal-3) {    
      analogWrite(redPin, redVal); 
      delay(5);                                                         
       } 
  }

   if(sensorValue >= 100 && sensorValue <= 109){
    for(int orangeVal = 10; orangeVal <= 245; orangeVal = orangeVal+2) { 
      analogWrite(redPin, orangeVal); 
      analogWrite(greenPin, 40);
      delay(10);                                                         
   } 

    for(int orangeVal = 245; orangeVal >= 10; orangeVal = orangeVal-2) {    
      analogWrite(redPin, orangeVal);
      analogWrite(greenPin, 20);
          delay(10);                                                         
       } 
  }

   if(sensorValue >= 90 && sensorValue <= 99){
      for(int greenVal = 5; greenVal <= 255; greenVal = greenVal+1) { 
      analogWrite(greenPin, greenVal);    
          delay(10);                                                         
       } 

       for(int greenVal = 255; greenVal >= 5; greenVal = greenVal-1) {    
         analogWrite(greenPin, greenVal); 
         delay(10);                                                         
   }  
  }

   if(sensorValue < 89){
     setColor(0, 0, 255);
   }
  }


void setColor(int red, int green, int blue) {
  analogWrite(redPin, red);
  analogWrite(greenPin, green);
  analogWrite(bluePin, blue);
}

03_Ventilate_8.jpg03_Ventilate_8.jpg

_05_Fazit.png_05_Fazit.png

Der Kurs „Eingabe, Ausgabe“ war im Prinzip sehr abwechslungsreich und bot einen interessanten Einblick in Technologien wie GPS, Eyetracking, und Arduino.

Die Vorträge und Präsentationen von Monika beleuchten diese Technologien aus einer eher künstlerischen Perspektive, während sich Fabian im Interface-Labor auf die technischen Aspekte fokusierte. Diese Kombination war sehr inspiriend und machte Lust darauf, sich selbst mit der Technologie auseinander zu setzen.

Den Teilnehmern wurde eine relativ große Handlungsfreiheit in der Interpretation der Aufgabenstellungen eingeräumt, mit welcher ich anfangs etwas Probleme hatte, da ich nicht genau wusste, was nun konkret gefordert wird. Subjektiv wurde eher eine künstlerisch-konzeptionelle Herangehensweise bzw. ein kreativer „Missbrauch“ als ein technisch „perfekter“, lösungsorientierter Ansatz erwartet.

Fabians Einführung in Markdown, Github und Versionsverwaltung haben mir sehr gut gefallen, obwohl die Einführung am Anfang des Kurses etwas hastig „abgehandelt“ wurde und auf einige eher abgeschreckt wirkte, als das allen Teilnehmern die Vorteile von Github im Umgang mit Code klar geworden sind.

Persönlich hätte ich mir etwas mehr Zeit für das Abschluss- bzw. Arduino-Projekt gewünscht, da Arduino eine sehr komplexe Technologie mit hohem Frustpotential ist und meistens erst nach mehreren Iterationsstufen zum „spürbaren“ Erfolg führt.

Im Prinzip ist „Eingabe, Ausgabe“ ein sehr experimentieller Kurs, welcher den Fokus auf den Prozess und nicht unbedingt auf das Ergebnis setzt. Alternativ hätte der Kurs auch „Alles mal ausprobieren“ heißen können, was nicht unbedingt negativ gemeint ist.

Ein Projekt von

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Fabian Morón Zirfas foto: MH

Entstehungszeitraum

Wintersemester 2013 / 2014