http://ifdblog.org/public-interaction/wp-content/uploads/2010/09/Dokumentation_JP by Interaction Design Magdeburg

Interaktives Plakat â&#x20AC;&#x2022;Sachverhalte begreifbar gestalten

NEU-GEAR

JĂśrg Petzold

Inhalt Inhalt............................................................................................................................... 2 Thema............................................................................................................................. 3 Brainstorming............................................................................................................. 4–5 Recherche................................................................................................................... 6–7 Moodboard.................................................................................................................. 8–9 Processing.............................................................................................................. 10–11 Konzepte................................................................................................................. 12–13 Der Entwurf............................................................................................................. 14–15 Technische Umsetzung................................................................................................ 16 Modellbautechnische Umsetzung................................................................................ 17 Digitale Umsetzung................................................................................................ 18–19 Die Programmierung.............................................................................................. 20–21 Aufbau..................................................................................................................... 22–23

Thema Das Interaction-Projekt der Hochschule Magdeburg-Stendal im Sommersemester 2010 stand unter dem Leitsatz „Interaktives Plakat – Sachverhalte begreifbar machen“. So wurde es vier tapferen Studenten zur Aufgabe gemacht das breite Feld der Naturwissenschaften zu erschließen und mit den heute gegebenen digitalen Mitteln, wie Processing, ausgewählte Teilbereiche der Physik, Mathematik, Chemie oder Biologie neu darzustellen.

Wichtig war hierbei, dass die Installation dem N utzer durch spielerische Interaktion den Vorgang begreiflich macht.

Brainstorming Da unsere Ideen im Raum Magdeburg angesiedelt sein sollten, durchstreiften wir die Stadt auf der Suche nach Einrichtungen und Plätzen, die geeignet erschienen um Passanten „Sachverhalte begreifbar zu machen“. Besonders stellte sich mir der Bereich um die Sternbrücke dar. Viel Raum, viel Grün und die Nähe zur Elbe waren perfekt um Unmengen verschiedenster Installationen Platz zu geben und einen kleinen interaktiven Erlebnispark zu schaffen.

Um die vielen Fassetten der 足Naturwissenschaften kennenzulernen, begannen wir unser Projekt mit einem XXL-Brainstorming und versuchten den verschiedenen T 足 eilbereichen 足Namen, Entdeckungen und 足Erfindungen zuzuordnen indem wir eine Wand mit Haftzetteln spickten.

Recherche Zu guter Letzt galt es sich einen Naturwissenschaftler zu suchen, der durch seine Erkenntnisse die Menschheit nachhaltig beeinflusst hatte. Meine Wahl fiel auf das Multitalent Leonardo da Vinci. Sein vielschichtiges Wirken ermöglichte es mir ein breites Feld an Ideen zu untersuchen. Letztendlich faszinierte mich aber eines seiner Geräte, welches Leonardo da Vinci zwar erdachte, aber nie baute. Denn zu früheren Zeiten wäre dies eindeutig als Gottes lästerung interpretiert worden. Die Rede ist von der „Unendlichkeitsmaschine“, welche eine unvorstellbar langsame Bewegung erzeugen kann. Durch hintereinanderschalten von mehreren Zahnradgetrieben, wobei jedes aus einem kleinen und einem großen Zahnrad auf einer Achse besteht, lässt sich eine Umdrehungs geschwindigkeit von „1/10/s“ auf dem ersten Getriebe in eine Umdrehungsgeschwindigkeit von „1/eine Billion Jahre“ auf dem letzten Getriebe umwandeln, was länger ist, als unser Universum besteht.

Moodboard

Processing Nachdem wir uns grundlegend mit dem Thema des Hauptprojekts aus足einander gesetzt hatten, w 足 urde es nun Zeit das Handwerkszeug zu lernen um interaktive, digitale 足Visualisierungen zu erstellen. Das Instrument unserer Wahl war in diesem Fall Processing. Processing ist ein simples Programm, bei dem eine vereinfachte Version der JavaProgrammiersprache zum Einsatz kommt.

1. E inbindung von Schrift in die Programmierung und Simulation eines Radiergummis 2. S imulation von Schwerkraft bei einem springenden Ball 3. A bprallen eines Balls im Winkel 4. A bprallen von B辰llen in Array listen 5. P rogrammierung eines einfachen Zahnrads 6. E ntwicklung eines Icons zur besseren Wiedererkennbarkeit unseres Projektes. Hier mit eingebetteten Zahnradbildern.

Die hier aufgezählten Übungen dienten als Grundlage um mit den wichtigsten Befehlen u mgehen zu können. Weitere, hier nicht aufgeführte Aufgaben halfen das Gelernte zu vertiefen und in anderen Zusammenhängen anzuwenden.

Konzepte Gefesselt von der Idee der Unendlichkeitsmaschine war es nun an der Zeit ein Moodboard zu erstellen um alle Gedanken einzufangen, die es mir erlauben würden dieses Konzept passend zum Projekt „Public Interaction“ umzugestalten.

Es ging also um Zahnräder und deren Übersetzungsverhalten. Jetzt fehlte der Entwurf einer Installation, welche diese Problematik aufgreift, umsetzt und möglichst noch deutlicher darstellt, als es ein rein analoger Aufbau je könnte. Zu dem war es mein Anspruch, dass jeder Benutzer Spaß am Neuentdecken entwickelte. So ergaben sich die verschiedensten Ideen, welche ich auf skizzierte um dann doch Eine nach der Anderen für ungeeignet zu halten.

Kurbeln über verschiedene Übersetzungen bringt einen Ball zum schweben

Kurbeln über verschiedene Übersetzungen bringt ein Männchen zum laufen

Treten über verschiedene Übersetzungen bringt ein Männchen zum fahren

Der Entwurf Nachdem wir mit dem Programm Processing langsam vertraut wurden, schien mir dann jedoch eine Installation aus analogem und digitalem Zahnrad praktisch und umsetzbar. Dies sollte für Jedermann erreichbar auf einem Tisch platziert w. Durch drehen des analogen Zahnrades bewegte man die d igitalen auf dem Bildschirm. Um jedes einzelne der drei digitalen Zahnräder anzusteuern, war ein Schieberegler geplant. Ein zusätzlicher Reiz s ollte die Übersetzung noch deutlicher machen, da ab einer bestimmten Geschwindigkeit das menschliche Auge einfach zu träge ist um die Bewegung noch deuten zu können.

Zu diesem Zeitpunkt war bereits klar, dass sich das Vorhaben nicht mit einem Potentiometer realisieren lassen würde. Da also in jedem Fall ein Motor als Grundlage für das Eingabemedium herhalten musste, fasste ich auch gleich den Entschluss die S cheibe je nach Übersetzung durch den Motor zu bremsen und dem Benutzer so die Kraftübertragung erfahrbar zu machen. Wohl wissend, dass die Zeit knapp bemessen war wäre dies der Feinschliff für meinen Prototypen.

Scheibe dreht sich Kugeln fliegen nach außen und erreichen ein höheres Energiele

mögliche Änderung der Feldgrö anderer Übersetzung Scheibe dreht sich Kugeln fliegen nach außen und Scheibe dreht sich erreichen höheres Energielevel Kugeln fliegen nach außenein und erreichen ein höheres Energielevel mögliche Änderung der Feldgrößen bei anderer mögliche Änderung der Übersetzung Feldgrößen bei anderer Übersetzung

Scheibe dreht sich Kugeln fliegen nach außen und erreichen ein höheres Energielevel

Scheibe dreht sich Scheibe dreht sich Kugeln fliegen nach außen und Kugeln fliegen nach außen und erreichen ein höheres Energielevel erreichen ein höheres Energielevel

mögliche mögliche Änderung der Feldgrößen beiÄnderung der Feldgrößen bei anderer Übersetzung mögliche Änderung der Feldgrößen bei anderer Übersetzung anderer Übersetzung

Energielevel wird durch LEDs angezeigt Energielevel wird durch LEDs angezeigt

Energielevel wird durc

Energielevel wird durch LEDs angezeigt

Übersetzung durch regler eingestellt ->Drehbarkeit der kurbel wird schwerer Übersetzung durch regler eingestellt oder leichter ->Drehbarkeit der kurbel wird schwerer Energielevel wird durch LEDs angezeigt Energielevel wird durch LEDsoder angezeigt leichter

Übersetzung durch ->Drehbarkeit der oder leichter Übersetzung durch regler eingestellt Übersetzung durch regler eingestellt der kurbel wird schwerer schwerer Übersetzung durch regler eingestellt ->Drehbarkeit der kurbel wird->Drehbarkeit oder leichter ->Drehbarkeit der kurbel wird schwerer oder leichter oder leichter

Technische Umsetzung Es stellte sich die Frage: reicht Processing als einzelnes P rogramm aus oder müssen zusätzliche Komponenten wie zum Beispiel das Arduino Board oder der Wii-Controler zum Einsatz kommen. Möglichkeiten gab es viele, nur welches war die Wirkungsvollste? Da mir die Arbeit mit dem Arduino Board schon bekannt war und ich dazu auch einen Lösungsweg im Kopf hatte, begann ich die Umdrehungen eines Motors über das Board auszulesen. Leider war Arduino nicht schnell genug um schnelle Umdrehungen zu registrieren.

Motor mit Platine und Anschluss

Da ich bereits in den ersten Processingstunden das Icon über Mouse-X-Werte gesteuert hatte,musste ich nur noch eine Programmierung finden, die es mir ermöglichte den X-Wert unendlich zu erhöhen. Nachdem das geschafft war, wurde der vorhandene Motor nur noch mit einer analogen-Maus-Platine gekoppelt und so konnte ich allein mit Processing, einem Motor und ein wenig Elektronik mein Ziel erreichen.

Modellbautechnische Umsetzung Die elektronischen Bestandteile mussten nun in eine passende Hülle integriert werden. Kernstück m eines Aufbaus war wie schon erwähnt der Motor auf der Platine, welcher Processing steuerte. Auf die Welle dieses Motors wurde ein Zahnrad aus Plexiglas befestigt, welches dem Benutzer als Eingabemedium diente. Dieses Zahnrad sollte auf drei digitale Zahnräder auf einem in die Konstruktion eingelassenen Monitor greifen können. Um dies zu bewerkstelligen, befestigte ich den Motor auf einer Schiene, die durch Magnete in die jeweiligen drei Stufen

einrastet. Die Erkennung der Stufen erfolgt über Taster, die bei den Magneten eingebaut sind und somit dem Programm sagen können, welche Stufe momentan aktiv ist. All dies wird nur noch in einen Rahmen aus MDF-Platten gefasst und durch eine Stoffverkleidung optisch aufgewertet.

Unverkleideter Prototyp ohne Zahnrad - Aufbau aus MDF Platten (schwarz)

Digitale Umsetzung Nachdem jetzt der Aufbau klar war, ging es an die Umsetzung. Um mir über die Ausmaße und die nötigen Komponenten meiner Installation klar zu werden, war es nur sinnvoll mit der Programmierung zu beginnen. Wir nutzen Processing, welches ein kleines, aber mächtiges Werkzeug ist um mit dem Computer Bildhaft zu interagieren. Formen und Farben wurden nun nicht länger gemalt, sondern generiert. Mit Hilfe von Processing programmierte ich

ahnräder und deren Reaktionen auf Z meine Eingaben. Diese Zahnräder können jetzt durch Abfrage der MausX-Position gedreht werden. Zusätzlich geben zwei Balken an der Seite die aktuelle Rotationsgeschwindigkeit wieder, welche durch den Vergleich der vorherigen und aktuellen Maus- X-Position berechnet wird. Durch Nutzen einer Processing Library war es möglich die Größe der Balken auch akustisch wiederzugeben, was die Augen entlastet und den Aufbau ungemein einprägsamer macht.

1. Ohne Drehung stehen die Zahnräder, sowie die Kugeln still 2. Bei geringer Übersetzung drehen die Zahnräder langsam und der Ton ist tief 3. Eine hohe Übersetzung führt zu einer schnellen Drehung und einem hohen Ton

A. Robot zur Wiederholung der X-Koordinate der Maus B. Grundaufbau der Zahnr채der mit Regler, der f체r die Drehgeschwindigkeit steht C. Schleuderartiger Versuch um Reibung zu simulieren und die Geschwindigkeit zu verringern

Die Programmierung import java.awt.*; import javax.swing.SwingUtilities; import ddf.minim.*; import ddf.minim.signals.*; Minim minim; AudioOutput out; SineWave sine; float[] winkel1 =new float [25];//groß float[] winkel2 =new float [17];//mittel float[] winkel3 =new float [10];//klein float rot=0; int h=25; int b=h; float dreh; float pdreh; float hoch;

// add the oscillator to the line out out.addSignal(sine); } void draw() { noCursor(); background( 0 ); //hier ist pmouseX riesig und mouseX klein bzw. umgedreht if( centering ) // don‘t to add the robot mouse movement to ‚mouseMovement‘ { centering = false; } else{ // add normal mouse movement to ‚mouseMovement‘

//Kugel float sollY, istY; float drehung = 0; //Variablen zur Verzögerung float drehungGeschwSoll = 0; float drehungGeschwIst = 0; float winkel[] = new float[4]; int pmousex = 0, mouseMovement = 0; boolean centering = false; //3 Stufen boolean stufea=true; boolean stufeb=false; boolean stufec=false; PFont font; PImage z; void setup() { size(800,600); imageMode(CENTER); z = loadImage(„radaktiv.png“); rectMode(CORNERS); for(int i=0;i<winkel.length;i++){ winkel[i]=i*PI/(winkel.length/2); } minim = new Minim(this); // get a line out from Minim, default bufferSize is 1024, default sample rate is 44100, bit depth is 16 out = minim.getLineOut(Minim.STEREO); // create a sine wave Oscillator, set to 440 Hz, at 0.5 amplitude, sample rate from line out sine = new SineWave(440, 0.5, out. sampleRate()); // set the portamento speed on the oscillator to 200 milliseconds sine.portamento(200);

}

if(mouseX > width-50 )// if cursor is at left or right side of the window, move it to center { centering = true; moveCursor2(); } if( mouseX < 50)// if cursor is at left or right side of the window, move it to center { centering = true; moveCursor(); }

//get velocity //sollY wird von velocity hochgemapped und positiv gemacht sollY = abs(map(giveVelocity(), 0, 50, 0, height/2)); //auslenkungspunkt bewegt sich weiter istY = istY + 0.1 * (sollY-istY); //mausklicks für verschiedene übesetzungen (ohne mausklick = mittlere stufe) if(mousePressed && (mouseButton == LEFT)){ stufea=true; stufeb=false; stufec=false; //Balken an den Seiten fill(istY-100,255-istY,0); rect( 0,height, 50,height-istY/3 ); rect( width-50,height, width,heightistY/3 ); } else if(mousePressed && (mouseButton == RIGHT)){

stufea=false; stufeb=false; stufec=true; //Balken an den Seiten fill(istY-100,255-istY,0); rect( 0,height, 50,height-istY*2 ); rect( width-50,height, width,heightistY*2 ); } else{ stufea=false; stufeb=true; stufec=false; //Balken an den Seiten fill(istY-100,255-istY,0); rect( 0,height, 50,height-istY ); rect( width-50,height,width,height-istY ); } float Xwert = map(mouseX, 50, 550, 0,500); //360°(winkel=dreh)ist eine länge dreh = map (mouseX, 50, (width-50), 0, TWO_PI); //Übersetzungsgeschwindigkeit //äußeres rad if(stufea==true){ dreh=dreh*2.65; } //mittleres rad if(stufeb==true){ dreh=dreh*4; //kleines rad } if(stufec==true){ dreh=dreh*6.7; } //mittig translate(width/2,height/2); zahnrad(dreh); //Ball zeichnen und auslenken pushMatrix(); //Übersetzungen //Soll gibt geschwindigkeitssteigerung der Kugeln an if(stufea==true){ drehungGeschwSoll = 0.02 * giveVelocity(); //0.1 beeinflusst die zeit der weiteren drehung nach stillstand der Maus drehungGeschwIst = drehungGeschwIst + 0.1 * (drehungGeschwSoll - drehungGeschwIst); drehung -= drehungGeschwIst; float freq = map(istY, 0, 200, 60, 200);

sine.setFreq(freq); rotate(drehung/3); //geschwindigskeist ellipse for(int i=0;i<winkel.length;i++){ rotate(winkel[i]); fill(255); ellipse(0,height/2-30, 20+(istY/3)/10,20); } } if(stufeb==true){ drehungGeschwSoll = 0.04 * giveVelocity(); //0.1 beeinflusst die zeit der weiteren drehung nach stillstand der Maus drehungGeschwIst = drehungGeschwIst + 0.1 * (drehungGeschwSoll - drehungGeschwIst); drehung -= drehungGeschwIst; float freq = map(istY, 0, 200, 60, 600); sine.setFreq(freq); rotate(drehung/2); //geschwindigskeist ellipse for(int i=0;i<winkel.length;i++){ rotate(winkel[i]); fill(255); ellipse(0,height/2-30, 20+(istY/2)/10,20); } } if(stufec==true){ drehungGeschwSoll = 0.06 * giveVelocity(); drehungGeschwIst = drehungGeschwIst + 0.1 * (drehungGeschwSoll - drehungGeschwIst); drehung -= drehungGeschwIst; float freq = map(istY, 0, 200, 60, 1200); sine.setFreq(freq); rotate(drehung);

//geschwindigskeist ellipse for(int i=0;i<winkel.length;i++){ rotate(winkel[i]); fill(255); ellipse(0,height/2-30, 20+istY/10,20); } } popMatrix();

// if you remove this line, the will be no delay robot.mouseMove( p.x, p.y ); } catch (AWTException e) { } }

void moveCursor2() { } try { // Move the cursor float giveVelocity(){ Robot robot = new Robot(); //velo = abstand zwischen letzter und Point p = new Point( int( 50 ), int( jetziger position height*0.5 ) ); if( pmouseX>550&&mouseX<250){ SwingUtilities.convertPointToScreen( float velo= ((width-50)-pmouseX)p, this ); (mouseX-50); // if you remove this line, the will be no println( „pmouseX“ +pmouseX + „, delay mouseX = „ + mouseX +“, velo: „+velo); robot.mouseMove( p.x, p.y ); return velo; } } catch (AWTException e) { else if(pmouseX<250&&mouseX>550){ } float velo= (pmouseX-50)-((width-50)} mouseX); println( „pmouseX“ +pmouseX + „, void stop() mouseX = „ + mouseX +“, velo: „+velo); { return velo; out.close(); } minim.stop(); else{ super.stop(); float velo = pmouseX-mouseX; } println( „pmouseX“ +pmouseX + „, mouseX = „ + mouseX +“, velo: „+velo); return velo; } } mouseMovement = 0;

//platziert das Zahnradbild void zahnrad ( float rot){ pushMatrix(); rotate(rot); pushMatrix(); image(z,0,0,600,600); popMatrix(); popMatrix(); } //Robot Ansteuerung void moveCursor() { try { // Move the cursor Robot robot = new Robot(); Point p = new Point( int( width-50 ), int( height*0.5 ) ); SwingUtilities.convertPointToScreen( p, this );

Aufbau 23