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 - Jonathan Jonas

In diesem Kurs werden die grundlegenden Kompetenzen und Möglichkeiten der prozessorientierten Gestaltung in einer Reihe von gestalterischen Übungen und Analysen vermittelt und gemeinsam erarbeitet. Es gibt einen breiten Überblick über Facetten, Methoden und Werkzeuge sowie Einblicke in die elementaren handwerklich-technischen Verfahren und Konzepte der prozessorientierten Gestaltung. Dabei findet eine künstlerisch-gestalterische Auseinandersetzung mit den entsprechenden Technologien statt.

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=01_|_Musteranweisung&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=343534&.png „Musteranweisung“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Aufgabenstellung“) Im ersten Teil der Aufgabe sollte eine schriftlich eine Zeichenanweisung verfasst werden die von mehreren Probanden ausgeführt werden sollte.

Im zweiten Teil sollte die für Menschen verständliche Anweisung in eine für Maschinen (Processing) verständlichen übersetzt werden. ![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Umsetzung“) Ich habe versucht meine Anweisung simpel und eindeutig zu verfassen, um das Augenmerk auf den Zufall zu lenken.

03Template_Muster_Regeln.jpeg03Template_Muster_Regeln.jpeg
01Template_Muster_analog.jpeg01Template_Muster_analog.jpeg
02Template_Muster_digital.jpeg02Template_Muster_digital.jpeg

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Fazit:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Fazit“) Ich bin mit den Ergebnissen sehr zufrieden weil sie genau so Aussehen wie ich es mir vorgestellt habe. Interessant finde ich vor Allem den Unterschied in der „Interpretation“ des Zufalls zwischen Mensch und Maschine. Bei der menschlichen Interpretation sieht man ein verlangen Gleichmäßigkeit zu erzeugen, während die Maschine auch Häufungen bildet.

![GPS Drawing](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=02_|_GPS_Drawing&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=343534&.png „GPS Drawing“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Aufgabenstellung“) In der ersten Teilaufgabe sollten wir uns mit Hilfe eines Smartphones mit dem GPS-Tracking vertrautmachen, indem wir unseren Namen oder Initialen abgehen und aufzeichnen. Die Daten sollten dann mit Processing visualisiert werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Umsetzung“) Nachfolgend sieht man meine Initialen die ich auf einer brachliegenden Fläche getrackt habe.

Bildschirmfoto 2014-03-05 um 12.39.25.pngBildschirmfoto 2014-03-05 um 12.39.25.png

Bildschirmfoto 2014-03-05 um 12.36.43.pngBildschirmfoto 2014-03-05 um 12.36.43.png

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Aufgabenstellung“) In der zweiten Teilaufgabe sollten wir eine Weganweisung durch Straßenzüge verfassen und diese von einem Partner ablaufen lassen und umgekehrt. Der abzugehende Weg sollte per GPS-Tracking aufgezeichnet und anschliessend mit Hilfe von Processing visualisiert werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Umsetzung“) Nachfolgen sieht man die Wegbeschreibung von [Ron Leisner](https://incom.org/profil/5104 „Ron Leisner“) und das Ergebnis meines GPS-Trackings.

Wegbeschreibung:

  • Beginn des Trackings in Warthestr. 19
  • Laufe in Richtung Hermannstr.
  • Biege links in die Hermannstr. ein
  • Biege rechts in die Thomasstr. ein
  • Biege rechts in die Altenbraker Str. ein
  • Biege links in die Jonasstr. ein
  • Biege links in die Ilsestr. ein
  • Biege rechts in die Thomasstr. ein
  • Biege rechts in die Selkestr. ein und laufe bis zum Parkeingang
  • Umrunde nun ein Mal den Park, laufe dabei über die Jonasstr. Ecke Wittmannsdorfer Str. bis Schierker Str. Ecke Selkestr.
  • Biege nun links in die Selkestr. ein
  • Biege rechts in die Nogatstr. ein
  • Biege rechts in die Ilsestr. ein
  • Biege links in die Schierker Str. ein
  • Biege links in die Altenbraker Str. ein
  • Gehe über die Nogatstr. und Hermannstr. zurück zum Startpunkt und beende das Tracking

Bildschirmfoto 2014-03-05 um 12.38.39.pngBildschirmfoto 2014-03-05 um 12.38.39.png

screen.pngscreen.png

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Fazit:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Fazit“) Mir ist aufgefallen das GPS-Tracking bei den Initialen nicht sehr genau war. Das könnte aber damit zusammen hängen dass in der nähe der FH die dichte GSM-Masten nicht so hoch ist. Beim zweiten Tracking in Berlin habe ich den Eindruck dass es genauer war, was aber auch mit den längeren wegen zusammen hängen kann.

![Bildmaschine](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=03_|_Bildmaschine&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=343534&.png „Bildmaschine“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Aufgabenstellung“) Bei dieser Aufgabe sollten wir mit typografischen Mitteln Vorlagen erzeugen die dann von Probanden an einem Computer der mit Eye-Tracking ausgestattet ist analysiert wurden. Die daraus entstehenden Trackingdaten sollten dann Mit Processing visualisiert und zu einem Plakat verarbeitet werden.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Umsetzung“) Als typografische Grundlage habe ich mich für einen Songtext (Samy Deluxe - Ego) entschieden. Aus diesem habe ich mit Processing Wortwolken in Form von den drei Buchstaben des Songtitels generiert.

E.pdf PDF E.pdf
G.pdf PDF G.pdf
O.pdf PDF O.pdf
Ego.pdf PDF Ego.pdf

Die so entstandenen Vorlagen wurden dann von meinen Probanden am Eye-tracker analysiert. Anschliessend wurden die Tracking-daten mit Processing weiterverarbeitet Lichtpunkte entlang des Trackings gezeichnet wurden. Die Lichtpunkte verändern je nach Dauer des Trackings ihre Farbe im HSV-Farbkreis. Ausserdem hat jeder Lichtpunkt eine individuellen grad an Verschwommenheit der sich danach richtet wie lange der Proband auf den Punkt gestarrt hat.

screen2013121719448.pngscreen2013121719448.png
screen2013121719120.pngscreen2013121719120.png
screen20131217185450.pngscreen20131217185450.png
screen20131217192043.pngscreen20131217192043.png

Als letztes habe ich die Ergebnisse aus Processing mit Photoshop zu einem Plakat kombiniert.

plakat.jpgplakat.jpg

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Fazit:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Fazit“) Mich hat fasziniert wie gut sich der Blick der Probanden lenken lässt. Das Endergebnis lässt rein optisch nicht darauf schließen wie viele Arbeitschritte und Techniken erforderlich waren. Trotzdem wäre ohne das Eyetracking die Individualität der einzelnen Buchstaben nicht so groß.

![I/O Apparat](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=04_|_I/O_Apparat&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=343534&.png „I/O Apparat“)

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Aufgabenstellung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Aufgabenstellung“) Es sollte mit Adruino ein Apparat gebaut werden der eine Eingabe in eine Ausgabe wandelt. Die Wahl der Ein- bzw. Ausgabe war frei.

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Umsetzung:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Umsetzung“) Mein Grundgedanke war es einen interaktiven WG-Eikaufs-/Erinnerungszettel zu entwerfen. Dafür wollte ich einen Apparat bauen der acht Schaltflächen hat, die acht Verbrauchsmaterialien des Haushalts symbolisieren. Jede Schaltfläche sollte auch als Indikator dienen der zum einen darauf aufmerksam macht dass das Verbrauchsmaterial eingekauft werden muss (durch leuchten), und zum anderen welcher Mitbewohner mit dem einkaufen an der Reihe ist (durch verschiedene Farben).

Das Gehäuse ist aus einem Stück Buchenholz gefräst. Für jede Schaltfläche befindet sich ein 30mm großes Loch in die Oberschale des Gehäuses indem gelaserte Acrylgrasplättchen eingelassen sind. Darunter befindet sich ein bedrucktes Transparentpapier mit Piktogrammen für die jeweilige Schaltfläche. Hinter dem Transparentpapier ist noch eine Acrylgrasplatte mit Rundausschnitten aus Kupfergewebe die als kapazitiver Sensor dienen. Unter jeder Schaltflächen ist eine RGB-Led verbaut die den Status der Schaltfläche anzeigt. Die RGB-Leds werden mit 3 Shiftregistern angesteuert.

1.jpg1.jpg
2.jpg2.jpg
3.jpg3.jpg
4.jpg4.jpg
5.jpg5.jpg
6.jpg6.jpg
7.jpg7.jpg
8.jpg8.jpg

Arduino Code

#define SHIFTPWM_NOSPI
const int ShiftPWM_latchPin=A0;
const int ShiftPWM_dataPin = A2;
const int ShiftPWM_clockPin = A1;
const int capsendPin = 13;
const bool ShiftPWM_invertOutputs = false; 
const bool ShiftPWM_balanceLoad = true;
int buttonstat[8][2] = {{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0},{0,0}};
int buttonval[8] = {0,0,0,0,0,0,0,0};
int ledstats[3] = {0,255,0};
int ledcolor[2] = {0,100};
#include <ShiftPWM.h>
#include <CapacitiveSensor.h>
const int sensivity =30;
long previousMillis = 0;
long interval = 100;
int BLINK = 0;
CapacitiveSensor   touch[8] = {CapacitiveSensor(capsendPin,2),CapacitiveSensor(capsendPin,3),CapacitiveSensor(capsendPin,4),CapacitiveSensor(capsendPin,5),CapacitiveSensor(capsendPin,6),CapacitiveSensor(capsendPin,7),CapacitiveSensor(capsendPin,8),CapacitiveSensor(capsendPin,9)};
int buttoncal[8] = {0,0,0,0,0,0,0,0};;
int cal[8] = {0,0,0,0,0,0,0,0};
int counter[8] = {0,0,0,0,0,0,0,0};

void setup(){
  Serial.begin(9600);
  ShiftPWM.SetAmountOfRegisters(3);
  ShiftPWM.Start(75,100);
}

void loop()
{    
  unsigned long currentMillis = millis();

  if(currentMillis - previousMillis > interval) {
    previousMillis = currentMillis;   
    if (BLINK == 0)
      BLINK = 100;
    else
      BLINK = 0;
  }



  for (int i=0; i<8; i++){

    Serial.print(touch[i].capacitiveSensor(sensivity));
    Serial.print("\t");

    if (cal[i] == 0){
    for(int j=0; j<50; j++){
        buttoncal[i] = buttoncal[i] + touch[0].capacitiveSensor(sensivity);
    }
      cal[i] = 1;
        buttoncal[i] = buttoncal[i]/50;
}    

if(touch[i].capacitiveSensor(sensivity)>100){


      counter[i] = counter[i]+1;
      if(counter[i] == 50) {
              if (buttonstat[i][1] == 2)
                buttonstat[i][1] = 0;
              else
                buttonstat[i][1] = buttonstat[0][1]+1;
      }
      if(counter[i] == 500) {
              if (buttonstat[i][0] == 0) {
                buttonstat[i][0] = 1;
              } else {
                buttonstat[i][0] = 0;}
      }
    } else  { counter[i] = 0;}

   ShiftPWM.SetHSV(i,ledcolor[buttonstat[i][0]],255,ledstats[buttonstat[i][1]]);   
}
}

IMG_0395.jpgIMG_0395.jpg

final.jpgfinal.jpg

![H2](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=Fazit:&fid=e9d80446a6744aea503aa46822cfb24e&fs=15&fc=EA003D&.png „Fazit“) Dieses Teilprojekt hat mich am meisten gefordert, mir aber auch am meisten spaß gemacht. Leider konnte ich am Präsentationstag kein voll funktionsfähigen Apparat präsentieren weil es in den letzten Zügen der Fertigstellung Probleme gab. Da ich ein kompaktes Gehäuse für meinen Apparat einsetzen wollte konnte ich keinen Arduino Uno verbauen und musste auf einen ATTINY ausweichen. Dieser hatte allerdings Probleme mit einigen Arduino Libraries die ich verwendet habe. Ich hoffe aber das ich die Probleme noch löse da ich sehr viel Zeit und Elan in den Bau und die Programmierung gesteckt habe.

![H1](http://jonathan.h1660464.stratoserver.net/incomheader/?tx=00_|_Kursfazit&fid=e9d80446a6744aea503aa46822cfb24e&fs=20&fc=343534&.png „Kursfazit“)

Der Kurs hat mir einen guten Einblick in das prozessorientierte Gestalten gegeben. Die Kombination mit der Interface Werkstatt war sehr gelungen da man so zusätzlich noch die technisch handwerklichen Fähigkeiten vermittelt bekommen hat.

Im Großen und Ganzen hat mir der Kurs sehr gut gefallen. Ich hätte mir für das letzte Teilprojekt noch etwas mehr zeit gewünscht, was aber eher daran lag dass ich zu viel Komplexität umsetzen wollte.

Ein Projekt von

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: MH foto: Fabian Morón Zirfas

Entstehungszeitraum

Wintersemester 2013 / 2014