Technische Grundlagen des Interaction Design

Ein freies Collaborationsprojekt initiiert durch das MAD Lab • Mannheim Digital Lab - Hochschule Mannheim

1 Processing

1.1 Was es ist

Processing ist eine leicht zu lernende Programmiersprache, die für kreative Menschen gemacht ist, die ohne Vorkenntnisse Dinge mit dem Computer umsetzen möchten. Es ist auf visuelle Projekte ausgerichtet und bietet unzählige Erweiterungen, die es möglich machen zum Beispiel 3D Daten von der XBox Kinect oder Videobilder zu verarbeiten. Weiterhin ist es auch die Grundlage zum Programmieren von Hardware auf der Basis von Arduino, was später im Kurs behandelt wird. Daher lohnt es sich wirklich sich mit Processing auseinander zu setzen und es zu lernen. Sowohl die Programmiersprache, als auch die Entwicklungsumgebung (auch als IDE "Integrated Development Environment" bezeichnet) heissen Processing. Besonders ärgerlich ist es, dass "processing" ein geläufiges englisches Wort im Technischen Kontext ist, und so die Suche im Netz, zB: "audio processing" sehr schwierig sein kann. Daher wird Processing auch häufig mit P5 abgekürzt.

2

1.2 Installation

http://processing.org/download zu finden. Betriebsystem auswählen, herunterladen, ggf. zip-Archiv entpacken, erhaltene .DMG-Datei durch Doppelklick öffnen und das Programmicon auf den Ordner ziehen. Nun ist Processing im Prinzip installiert. der Rest der Installation geschieht beim Erstmaligen Öffnen des Programms. Dann installiert sich ein Ordner Namens Processing im Pfad [rootdirectory]/Benutzer/[homedirectory]/Dokumente/

Zunächst muss das Programm, in dem man mit Processing programmiert herunterladen. Es ist kostenlos und unter 3

In diesem automatisch, neu angelegten Ordner befindet sich unter Umständen zunächst gar nix. Hier werden jedoch alle Projekte, die man mit Processing macht gespeichert, sofern, man nicht einen anderen Ort angibt. Weiterhin sollte man einen Ordner anlegen, der libraries heisst. In diesem Ordner befinden sich die Erweiterungen, wie Plugins, mit denen Man auf bereits erstellte Software zugreifen kann. Diese Erweiterungen, die libraries sind meist kostenlos erhältlich. Mehr dazu später. Wir haben also den Ordner /Benutzer/[homedirectory]/Dokumente/Processing

in dem alles wichtige drin ist, und die Software im Programme-Ordner.

4

1.3 Erste Schritte beim Programmieren Jetzt doppelklicken wir das Icon des Programms Processing, dass wir im Ordner Programme finden. Es öffnet sich ein Fenster mit einem leeren Textfeld. Hier wird der Sourcecode des Programmes geschrieben. Wir sehen in der Fensterleiste, dass das Projekt gleich als Namen sketch und das Datum erhält. Das Fenster hat auch weitere Teile wie einen schwarzen Bereich unten, der uns jetzt aber nicht interessieren soll. Oben ist ein Bereich der an einen Musicplayer erinnert. Fährt mit der Maus drüber wird die jeweilige Funktion erklärt. Alles bezieht sich auf das Programm, das unten im Textfeld entstehen wird. Man kann also das Programm starten, stoppen, exportieren, neues anlegen,… Klar.

5

1.4 Jetzt geht's los...!

Um gleich anzufangen und zu sehen, wie einfach es ist, könnt ihr ellipse(50, 50, 80, 80);

OK, aber…? …wie kommt man drauf, dass man gerade ellipse schreiben muss, und nicht etwa circle oder sonstwas? Die Antwort findet sich, wenn Ihr das farbige Wort ellipse selektiert und Apfel-Shift-f macht: Es öffnet sich ein Browser mit einer Seite, auf der die Funktion, die den Kreis gemacht hat genau erklärt wird. Diese, und alle anderen Seiten, zu denen man durch Apfel-Shift-f gelangt wurden mit der Installation von Processing lokal gespeichert und sind so auch offline verfügbar. Die selbe Rubrik gibt es jedoch auch online in der Rubrik Reference, die sich jedoch auf die neueste Version von Processing bezieht. Und einer Liste aller Sachen, die es so gibt in Processing gibt, findet man oben auf der Seite im Menü unter Language!

in das Fenster tippen und auf das Play-Icon klicken,

um Eurer erstes Programm zu starten! Es sollte sich ein weiteres Fenster öffnen, in dem ein Kreis zu sehen ist! Das ist das Ergebnis Eures ersten Programms!

Im Rahmen dieses Skriptes wird die Programmiersprache "Processing" nicht weiter vertieft. Das Beispiel oben ist jedoch von der Website, auf der sich neben diesem Getting Started Tutorial auch weitere befinden: http://processing.org/learning/ Die ersten vier sollte man sich auf jeden Fall verinnerlichen. Das Tutorial Objects empfehle ich für einen späteren Zeitpunkt. Eine wesentlich schöne Plattform zum lernen und Vertiefen ist http://www.creativecoding.org. Die Website gliedert sich in 15 grundsätzliche Kapitel und weitere, vertiefende Kapitel für die Bereiche Audio, Video, Text, Workflow und Data.

6

2 Generation Gestaltung

2.1 Was es ist

Als Generative Gestaltung bezeichnet man den Entstehungsprozess von Design, das vom Computer erstellt wird und nicht nur unter zu Hilfenahme eines Computers. Das ist ein Unterschied. Ein Bild, welches man mit zB Photoshop erstellt, wurde mit Hilfe des Computers gemacht, jedoch dient die Software auf dem Computer lediglich als Werkzeug. Bei der generativen Gestaltung dagegen hat man es mit einem Algorithmus zu tun, der eigenständig zB. ein Bild oder ein Video erstellt.

Entscheidend ist der Prozess der Erstellung. Diese Gliedert sich in zwei Teile: Zum Einen das Erstellen durch den Computer und zum Andern die Entscheidung des Gestalters, wie Einfluss darauf genommen wird. (Und nicht zuletzt die Entscheidung, wann das "gewünschte" Ergebnis erreicht wurde und der Gesamte Prozess als abgeschlossen Betrachtet wird.)

tion des Menschen, etwa dem Verändern eines Parameters im Code, erfolgt die "Antwort" des Computers mit dem generierten Bild oder Video. Der Mensch übernimmt die Entscheidung über den Verlauf und kann so sein ästhetisches Empfinden zum Ausdruck bringen, auch wenn der tatsächliche "Ausdruck" durch den Computer geschieht.

Generation Gestaltung kommt in seiner reinen Form meines Erachtens als Kunst, zum Selbstzweck als ätherisches Produkt aus Mensch und Maschine vor. Davon Abgeleitet findet man sie oft im Bereich der Infografik, Typografie, Musikvideo,…. Hier verschwimmen oft die Grenzen zwischen traditioneller Gestaltung und generativen Gestaltung

Das Buch Ich bin kein grosser Freund von Büchern, aber bezüglich generativer Gestaltung gibt es ein Standardwerk, dass jeder kennen und benutzen sollte. Es heisst - man wundere sich - "Generation Gestaltung". Was mir am Buch am besten gefällt, ist dass es wesentlich mehr ist als ein Buch. Es wird ergänzt durch eine Website, die nicht nur den Code unzähliger Beispiele zum Download bereithält, sondern in der auch die Autoren auf Fragen antworten und so das Ganze eine lebendige Wissensplattform statt einem totem Buch darstellt. Die URL zum Buch, das sowohl in der Bücherei mehrfach vorliegt, als auch einfach kaufendert ist, lautet: http://www.generative-gestaltung.de

Dies e beiden Teile des Prozesses erfolgen meist abwechseln, was auch einen gewissen Dialog mit dem Computer darstellt. Auf jede Ak8

wa Zufall und Rauschen, Schwingungsfiguren oder Baumdiagramm behandelt werden.

Das Buch gliedert sich in drei Teile: • Einer Bilderstrecke schöner Arbeiten, • einem Teil mit einfachen Beispielen bezeichnet als Grundlegenden Prinzipien, in der systematisch die Bereiche Farbe, Form, Typo und Bild behandelt werden, • einem Teil, indem schwierigere Beispiele gezeigt werden und Komplexe Methoden genannt wurde, und Themenschwerpunkte wie et9

3 OSC - Open Sound Control

3.1 Vorbemerkung

Vernetzung von Computern ist nicht einfach eine weitere Technik, sondern hat eine eigene Qualität. Es wird vielleicht deutlich in dem, was ich immer sage: der Computer, der Mensch - das Netz, die Gesellschaft. Mit dem Verbinden von mehreren Computern mit einander kann man mehr als nur die Rechenkapazität erhöhen. Mal kann Konzepte mit Struktur erstellen: Das das Eine die Bedienung oder Steuerung des Anderen sein kann, oder Information an beliebig viele "Aussenposten" verteilen, oder… Vernetzung von Computern zeigt schliesslich auch, dass es Interaction Design um mehr als nur Screendesign geht. Sich kurz Zeit nehmen und über das Wesen von Vernetzung Gedanken machen ist sicher lohnenswert.

11

3.2 Was es ist

OSC ist ein Netzwerkprotokoll, mit dem sich kleine Datenmengen von einem Computer zum anderen übertragen lassen. Es gibt Libraries und ist auf vielen Systemen implementiert, so auch bei ObjectiveC und somit auf dem MacOS und iOS, also auch auf dem Mac und iPhone, iPad und iPod. Und auch dem Quartz Composer, was es leicht macht für den Mac sehr einfach Anwendungen zu schreiben, die Netzwerkfunktionen haben. Aber OSC kann noch mehr: da es ein schlankes Netzwerkprotokoll ist, wird es auch zu Ansteuerung von anderen Geräten, insbesondere in der Musik, benutzt. So können viele Geräte OSC ausgeben oder sind leicht dazu kompatibel zu machen. Während midi speziell für Musikinformation wie welche Note und Anschlagstärke konzipiert ist, ist OSC allgemeiner, kann aber natürlich auch solche Informationen übertragen. allgemeine, jedoch nicht besonders wertvolle Infos finden sich auf der offiziellen Homepage von OSC: http://archive.cnmat.berkeley.edu/OpenSoundControl/

12

3.3 OSC und Processing

Wir werden OSC hauptsächlich in Verbindung mit Processing benutzen. Aber auch Quartz Composer und iPhone benutzen. Bei Processing wird OSC am besten mit der Library oscP5 implementiert. Man findet sie unter http://www.sojamo.de/libraries/oscP5/ und kann sie dort downloaden. Um oscP5 zu installieren legt man den oscP5 Ordner in …/Dokumente/Processing/libraries/ und startet Processing neu, sollte es offen sein. Mit der Installation befinden sich auch Beispiele bei den anderen Exemples ganz unter in der Sektion "Contributed Libraries". Unbedingt Empfehlenswert, sich diese mal anzuschauen. Am besten mit dem Sketch "oscP5sendreceive" anfangen.

13

3.4 Beispiel OSC

Ein kleines Beispiel soll die Kommunikation zwischen zwei Programmen auf einem Rechner zeigen und dann darauf folgend den Computer mit einem iPhone verbinden.

Von Processing werden werden die x-y-Daten der Maus-Position gesendet, die vom Quartz Composer als Angaben zur Positionierung eines Objektes genutzt werden. Beweggt man also die Maus im Processing Fenster, bewegt sich synchron dazu etwas im Quartz Composer.

Zu nächst erstellen wir das Programm in Processing. Wir gehen dabei von dem Beispiel "oscP5sendreceive" aus, welches bereits eine Netzdresse benutzt, die wir auch benutzen wollen: die eigene, also den selben Computer. Hier kann man auch einen anderen Computer im Netzwerk auswählen, aber wir wollen ja die Daten an ein anderes Programm, den Quartz Composer, der auf dem gleichen Computer läuft, schicken.

Wir verändern zunächst die Fenstergrösse auf 300x300px, legen schöne Füll- und Strich-Farben an und entfernen alle Kommentare, da die zwar helfen, zunächst zu checken, was gemacht wird, aber dann doch viel Platz wegnehmen und es so oft unübersichtlich machen. Also, Kommentare lesen, verstehen und löschen. Dann ändern wir das Programm dahingehend ab, dass eine message nicht nur geschickt wird, wenn die Maustaste geklickt wird, sondern ständig. Dazu nehmen wir alles aus der mousePressed()-Funktion und kopieren in die draw()-Funktion. Den Teil, wo die Daten empfangen werden, wo nach einem osc-Event schaut wird, brauchen wir nicht, weil unser Programm nur senden soll: löschen. Jetzt sollte unser Programm etwa so aussehen:

Das Beispiel ist bewusst einfach gehalten, um die Funktionsweise der Datenübertragen klar zu machen. Natürlich könnten die Daten vom Quartz Composer aufbereitet werden und daraus etwas spannenderes gemacht werden als nur ein Objekt anzuzeigen. Ebenso könnten die Daten von Processing etwas spannenderes sein als nur die MausPosition. Aber um OSC zu verstehen ist das schon ganz ok.

14

Kreis auf dem Bildschirm. Wenn wir das zweite Beispiel "OSC Sender.qtz" öffnen, sehen wir, das alles so funktioniert, wie wir es wollen: wir bewegen in dem einen Fenster das Objekt und im anderen wird genau die selbe Bewegung wiedergegeben. Wir schliessen wieder das Beispiel "OSC Sendernetz" da wir den Teil von Processing aus machen wollen.

Nun machen wir uns an das Programm im QC (Quartz Composer), der die Daten empfangen soll. Wir öffnen dazu ein leeres Dokument mit der Templateeinstellung "Basic Composition". Da ist im Prinzip nix drin, nur ein Patch, der einen Hintergrund malt. Dann öffnen wir das Library-Fenster (Menü Window>Show Patches Library), sofern es nicht schon offen ist, und suchen im Feld ganz unten nach "OSC", da wir einen Patch brauchen, der OSC empfangen kann. Nicht nur, das wir mit dem "OSC Receiver.qtz" etwas finden, dass nach genau dem klingt, was wir suchen, sondern in der Beschreibung sehen wir, dass es auch eine Beispiel Composition gibt, die wohl die Funktion erklärt. Natürlich schauen wir uns zuerst das Beispiel an und sehen, das es eigentlich genau das tun sollte, was wir brauchen: es empfängt aus dem Netz zwei variablen x und y und bewegt entsprechen ein en

In unserem Processing Programm haben wir noch nicht wirklich uns darum gekümmert, was eigentlich geschickt werden soll, sondern erst das OSC Objekt initialisiert und eine Lookback-Adresse als NetAddress angegeben. Jetzt müssen wir dafür sorgen, dass die Mauskoordinaten geschickt werden. Dazu definieren wir uns eine Variable, mausx, als float, die die x Koordinate halten soll. Weiterhin initialisieren wir uns ein neues OscMessage Objekt, das die Variable halten wird und das wir später durch das Netzwerk senden. Da QC zur Positionierung auf dem Bildschirm nicht mit Pixeln arbeitet, sondern den Koordinatenursprung im Fenstermittelpunkt hat und das Fenster stehst 2 Einheiten breit ist, müssen wir mausx, das in unserem Bsp von 0 bis 300 (Fensterbreite: width) geht, auf einen Bereich von -1 bis 1 kappen. das geht sehr praktisch mit der map()-Funktion: mausx = map(mausx, 0, width, 1, -1); Damit wird der Wert -1 wenn die Maus ganz links ist und 1, wenn die Maus ganz weit rechts am Fenster ist. Diesen Wert fügen wir nur unserer OscMessage mittel add() zu. Diese gefüllte OscMessage wird nun mit oscP5.send(xMessage, myRemoteLocation); verschickt. Fertig. 15

Alles zusammen sieht so aus:

float mausx = mouseX;

Bevor wir es jetzt ausprobieren können, müssen wir noch eine Kleinigkeit beachten: Der Port an dem die beiden Programme arbeiten muss der gleiche sein. Im Processing Programm hatte wir 12000 angegeben und so muss auch beim QC dies als Port angegeben sein:

OscMessage xMessage = new OscMessage("x"); mausx = map(mausx, 0, width, -1, 1); xMessage.add(mausx); oscP5.send(xMessage, myRemoteLocation);

Jetzt machen wir genau das selbe für die Y-Koordinate mit mouseY und height und dann sollte unsere draw()-Funktion so aussehen:

So nun kann es ausprobiert werden und sollte funktionieren!

Ausbau So funktioniert es und man könnte aufhören, allerdings kann man den Code etwas hübscher machen und das so richtig zum tragen, wenn es später darum geht das iPhone mit anzubinden!

16

Im Moment übertragen wir zwei variablen x und y über das Netz. Geht, aber man könnte es auch mit einer machen: Mit einem Array! Dann müssen wir nur eine Variable senden und die draw()-Funktion sieht viel aufgeräumter aus:

Jetzt sollte wieder alles genauso funktionieren! Natürlich muss dann auch das QC Dokument verändert werden: Statt zwei Float-Variablen erstellen wir eine Floats m und nehmen den Ausgang vom Patch und splitten die beiden Werte mit einem "Structure Index Member"-Patch in die beiden Werte auf:

Als nächstes werden wir das Objekt von einem anderen Computer, um genau zu sein dem iPhone, ansteuern. Dazu verwenden wir die die Software TouchOSC, das leider mit 3,99 inzwischen kostenpflichtig geworden ist. Aber ich denke, das Geld lohnt sich, da die App auch auf dem iPad läuft.

TouchOSC besteht eigentlich aus zwei Teilen: Dem Editor, der auf dem Mac läuft, mit dem man Layout mit Reglern und Schaltern gestalten kann. Und dem iPhone Programm, mit dem man dann die Befehle über OSC ausgeben kann. Man baut sich sozusagen erst die App auf dem Mac und überträgt es dann auf das iPhone. 17

Den Editor lädt man sich hier runter touchosc-editor-1.5.6-osx.zip (Mac) und die iPhone App gibt es hier: http://itunes.apple.com/app/touchosc/id288120394?mt=8

Und dann ein XYPad Objekt, dass wir schön skalieren, positionieren und einfach m nennen:

Der Editor ist etwas unübersichtlich, aber letztlich ok. Man muss nur wissen, dass man viele Funktionen durch ein Context-Menü auf der App-Darstellung findet. Dann ist eigentlich alles sehr selbst erklärend. Wir erstellen uns zunächst eine Page, die wir marray nennen:

Um dieses Layout nun auf das iPhone zu bekommen, sichern wir das TouchOSC Dokument, klicken auf den grünen Sync-Button und starten die iPhone App und gehen dort auf Layout>Add (ganz oben auf der Seite!) und wählen den Computer, der jetzt erscheinen müsste.

18

Danach erscheint das Layout in der Liste, das wir dann auswählen. Danach wählen wir unter "Connections" OSC aus und nehmen die Einstellungen für den Computer vor: Unter "Host" tragen wir die IP des Rechners ein, die wir unter Systememeinstellungen>Netzwerk finden. Danach tragen wir den Port ein, der in unserem Beispiel im QC auf 12000 eingestellt war.

Nun gehen wir in der App zurück, klicken auf "done", oben rechts und sollten das Layout sehen, das wir im Editor auf dem Mac erstellt haben:

19

Und wenn wir jetzt das QC-Dokument öffnen, sollte das Objekt unserem Befehlen vom iPhone folgen! Geil, wa?

20

4 Quartz Composer

4.1 Was es ist

Die Software Quartz Composer ist von Apple und inzwischen ein integraler Bestandteil von Apple's Entwicklungsumgebung XCode, mit der quasi alle Software für MacOS und iOS erstellt werden. Mit dem Quartz Composer, häufig auch als QC abgekürzt, ist eine Entwicklungsumgebung, speziell für visuell und interaktiv ausgerichtete Projekte und kommt ohne eine eigene Programmiersprache aus. Im Quartz Composer verbindet man dagegen sogenannte "Patches" miteinander, um den Programmablauf zu konstruieren.

Mit dem Quartz Composer lassen sich Programme schreiben, die nicht nur mit dem Quartz Comer laufen, sondern auch in Safari, dem MoviePlayer oder als ScreenSaver benutzt werden können. Der Quartz Composer ist also ein recht universelles Tool.

22

4.2 Installation

Die Installation gestalten sich leider etwas schwierig und ist soweit ich weiss nur mit einem Developer Account bei Apple möglich. Wenn man diesen hat, kann man entweder in XCode über das Menü "XCode>Open Developer Tool>More Developer Tools…" oder direkt über die URL https://developer.apple.com/downloads/index.action?name=for%20 Xcode%20-# unter der Rubrik "Graphics Tools for XCode" den Quartz Composer downloaden. Hat man keinen Developer Account bei Apple muss ich euch die dmg-Datei direkt geben.

23

4.3 Einstieg

Wie gesagt, besteht ein Programm in XCode aus sogenannten Patches, die mit einander verbunden werden. Daher haben die meisten Patches Eingänge und Ausgänge, mit denen sie verbunden werden. Je nach Typ des Patches wird der Eingang entsprechend verändert und über den Ausgang zum nächste Patch übergeben. Eine Liste aller zur Verfügung stehenden Patches finden man in der "Patch Library" - ein Icon zum öffnen des Fensters befindet sich in der Toolbar oder im Menü "Window". Um einen bestimmten Patch zu benutzen, zieht man diesen aus der Patch Library auf die Arbeitsfläche des Editor-Fensters. Neben dem Editor Fenster gibt es auch den sogenannten "Viewer", der die Ausgabe darstellt.

24

4.4 Beispiel Projekt QC

Hier ein kleines Beispiel: Wir bauen ein Programm, in dem ein Bild der Maus folgt.

Billboard-Patches, der mit "Image" beschriftet ist. Das machen wir, in dem wir auf den kleinen Kreis nebe der Ausgangsbeschriftung klicken und bei gehaltener Maustaste zum Eingang des Ziel-Patches draggen. Es entsteht dabei eine Linie, die, wenn wir sie über einen Eingang eines anderen Patches ziehen, gelb, orange oder rot wird. Das signalisiert, ob die Verbindung valide und gut ist (gelb) oder möglich (orange) aber nicht besonders sinnvoll ist. Auch als orange angezeigte Verbindungen können aber auch sinnvolle Verbindungen sein! Genauso verbinden wir die Ausgänge "X Position" und "Y Position" mit den jeweiligen Eingängen des Billboard-Patches. Jetzt Wechsel wir zum "Viewer"-Fenster und schauen uns das Result an: Voila! Das Bild sollte der Moaus folgen! Das erste Programm im QC!

Dazu suchen wir uns im "Patch Library" Fenster den Patch "Mouse" (unten im Fenster ist ein textfeld, mit dem an die Liste der Patches filtern kann) und ziehen es auf die Arbeitsfläche des Editor-Fensters (nicht auf den "Viewer"!). Dieser Patch gibt uns als Ausgang die Xund Y-Koordinaten des Mauszeigers. Anschliessend suchen wir uns eine Bilddatei im Finder, die wir der Maus folgen lassen wollen und ziehen die Datei aus dem Finder direkt auf die Arbeitsfläche des Editor-Fensters. Alternativ hätten wir uns auch den "image Importer"Patch aus der Patch Library holen können und hätten dann auch Bilddateien aus dem Netz importieren können! Als letztes suchen wir uns in der Patch Library einen Patch names "Billboard" und ziehen auch den auf die Arbeitsfläche. Der Billboard-Patch ist ein universeller Patch zum ausgeben positionieren und verändern von Bildern. Nun verbinden wir die Patches auf der Arbeitsfläche: Von dem Image-Patch verbinden wir den Ausgang "Image" mit den Eingang des 25

Wenn wir jetzt alles noch etwas schöner machen wollen, könnten wir weitere Einstellung zB. im Billboard-Patch vornehmen. Dazu öffnen wir das Fenster "Patch Inspector" aus der Toolbar und wechseln ggf. mit dem Popup-Menüin diesem Fenster zur Rubrik "Parameters" oder blenden die Parameter direkt im Editor Fenster über das Menü "Editor>Show Parameters" ein (Probiert beides aus). Wenn un im Editor ein Patch selektiert wird, sehen wir die einstellbaren Parameter. Meist sind diese identisch mit den Eingängen des Patches. Wenn wir jetzt das Bild zB. etwas kleiner machen wollen, verändern wir den Wert "Width" von 1 zu 0.2 zum Beispiel. Resultat: das Bild wird kleiner. Klar. An dieser Stelle ist es angebracht zu erwähnen, das das Koordinatensystem des QC etwas merkwürdig ost: Der Nullpunkt ist nicht wie etwa Processing oben links, sondern in der Mitte und zum Rand ist es immer - egal wie gross das Fenster ist eine Einheit weit. Das Fenster ist also genau zwei Einheiten breit. wir positionieren im QC also nicht nach Pixeln sondern absolut. Das nervt zwar schnell, hat aber den Vorteil, das die Grösse des Ausgabe Fenster egal ist. Man kann es grösser oder kleiner machen und die Proportionen der Positionierung bleiben erhalten. Als weiter Spielerei kann man Farbe, Drehung, Transparenz,… verändern. Die Parameter, deren Eingang im Editor mit einem andern Patch verbunden sind, kann man nicht editieren. Die werden durch den verbundenen Patch verändert.

Als keine Übung, kann man statt dem Image-Patch auch das VideoPatch benutzen und mit den Filter-Patches diese verändern! 26

4.5 PlugIns

Für den Quartz Composer gibt es unzählige Erweiterungen, die es zB. möglich machen, externe Hardware, wie etwa die Xbox Kinect, zu benutzen. Mann kann sich diese PlugIns wie Libraries vorstellen. Es gibt etliche Websites, die eine Sammlung von QC PlugIns bereithalten. PlugIns installiert man, in dem man sie in den Ordner "/Library/Graphics/Quartz Composer Plug-Ins/" kopiert. Eventuell existiert der Ordner nicht - dann muss man ihn selber anlegen. Manche PlugIns müssen jedoch in das Verzeichnis "/Library/Graphics/Quartz Composer Patches/" kopiert werden. Da man nie genau weiss, in welchem Ordner es sein muss, kopiere ich es immer in beide. Um die Plugins zu benutzen muss nach dem kopieren QC neu gestartet werden. Patches, die meist durch die PlugIns bereitgestellt werden, finden sich in der "Patch Library" in der Rubrik "-PlugIn".

27

5 OpenCV

5.1 Was es ist

OpenCV steht für Open Computer Vision und ist ein Framework zur Mustererkennung. Die OpenCV Version auf die wir eingehen, ist eine sehr abgespeckte, für Processing optimierte Version von OpenCV. Mit unserer Version von OpenCV kann man Videos abspielen, Bilder manipulieren und die wichtigste Funktion, welche nur OpenCV bietet, Gesichter, Augen Mund und Nase erkennen. Im Prinzip kann man OpenCV beibringen alles zu erkennen was man will, dies erfordert aber sehr gute Informatik Kenntnisse und ist für uns wenig praktikabel.

29

5.2 Installation

Für Windows http://sourceforge.net/projects/opencvlibrary/files/opencv-win/1.0/ OpenCV_1.0.exe/download

Normalerweise müsste alles Problemlos funktionieren, es gab aber letztes Semester bei einigen OSX Usern Probleme bei der Installation, die wir nicht lokalisieren, beheben konnten.

Die Version von OpenCV mit der wir arbeiten ladet ihr Euch von der Webseite.

Wenn ihr nun die Installation abgeschlossen habt, benötigt ihr noch die Library, welche ihr in euren Processing Libraries Folder kopiert.

http://ubaa.net/shared/processing/opencv/download/opencv.zip http://ubaa.net/shared/processing/opencv/

Es gibt eine Version für OSX und eine für Windows User.

Eueren Libraries Folder findet ihr, wenn ihr ihn nicht umkopiert habt, unter OSX/

Die Installation ist in beiden Fällen recht gut auf der Seite beschrieben, nur die Links sind recht schwer zu finden.

../Dokumente/Processing/libraries Falls ihr unter diesem Pfad noch keinen Libraries Folder habt müsst ihr in erstellen und dann die Datei dort reinkopieren.

Für OSX benutzt folgenden Link http://ubaa.net/shared/processing/opencv/download/01/opencv-fra mework.1.1.dmg

30

OSX Nun noch Processing, am besten den kompletten Rechner neu starten und schon müsste es funktionieren.

Eines vorweg, einige der Beispiele in den Examples funktionieren nicht auf Anhieb. Die Library für Processing wurde schon lange nicht mehr weiterentwickelt und die Java Entwicklung hat die Library überholt.

Wenn ihr zb. versucht das Beispiel Blob zu starten erhaltet ihr folgende Fehlermeldung

Windows

31

Dem Programm fehlt der Link zu einer Class, der Fehler ist aber sehr schnell zu beheben. und schon müsste das Beispiel funktionieren. Importiert einfach die Klasse java.awt.* Also schreibt unter die Zeile

import hypermedia.video.*;

Schaut euch die Beispiele mal an und experimentiert ein wenig damit. Vieles ist in OpenCV möglich und in Verbindung mit anderen Dingen, wie zb. der Kinect sind wenige Grenzen gesetzt.

einfach

import java.awt.*;

32

6 Xbox Kinect

6.1 Was es ist

Mit der Xbox Kinect ist ein Consumer Device, mit dem Video, Infrarot, 3D Daten und Audio aufgenommen werden kann und Audio ausgegeben werden kann. Zudem kann die Kinect mit einem Motor auch bewegt werden. Von besonderem Interesse ist hierbei die Möglichkeit des 3D, da es in den anderen Bereichen andere, hochwertigere und preiswertere Systeme gibt. Im 3D Sensoring Bereich ist die XBox Kinect eine gute, preiswerte Möglichkeit, zumal entsprechende Software weit verbreitet ist.

Um die Kinect mit dem Computer (hier nur Mac) zu benutzen, braucht man Libraries und eine Programmierumgebung, mit den das Gerät angesprochen werden kann und Daten empfangen werden können. Als Programmierumgebung benutzen wir Processing. Die Libraries, die Processing benötig, um mit der Kinect zu kommunizieren stellen Funktionen zur Verfügung, die in dem eigenen Code aufgerufen werden können. Auf diese Weise ist es recht einfach, die im Prinzip komplizeierte Technik einzusetzen. Es geht nicht darum, zu

verstehen, wie die Kinect Funktionniert, sondern darum, die zur Verfügung gestellten Funktion und die Möglichkeiten der Kinect zu nutzen um möglichst unkompliziert eigenen Ausdruck mittels Technik zu finden. Die Kinect ist das Herzstück vieler Installationen im interaktiven Bereich.

Wir werden uns im Rahmen des Kurses und dieses Skriptes ausschliesslich mit den Libraries SimpleOpenNI für Processing, ein Wrapper für OpenNI (http://www.openni.org/) und NiTE (http://www.primesense.com/solutions/nite-middleware/) beschäftigen. Alternativen werden am Ende des Kapitels kurz angesprochen.

Da SimpleOpenNI ein Wrapper ist, der auf andere Funktionen zugreift ist mit verminderterer Leistung zu rechnen. Auch Processing selbst ist bekanntlich nicht die schnellste Entwicklungsumgebung, doch ist letztlich die Leistung hoch genug um in Echtzeit Raumdaten zu verarbeiten und auch im begrenzten Umfang in Echtzeit damit zu arbeiten. Da das verarbeitende Sketch (Programm in Processing) auf dem selben Computer läuft auf der die 3D Daten zunächst von der Hardware empfangen und vorverarbeitet werden, kann mehr Leistung erreicht werden, wenn mit mehreren Computern gearbeitet wird und die Aufgaben verteilt werden.

SimpleOpenNI unterstützt Video, Infrarot und 3D Daten jedoch weder Audio Input, noch Output und auch nicht den Motor der Kinect.

34

6.2 Installation

Um die Libraries zu installieren benötigt man das Programm "Terminal", das sich in dem Ordner /Programme/Dienstprogramme/Terminal.app befindet: (Klick auf das Icon um Terminal anzuzeigen)

Öffne das Programm und wechsel durch den linux-Befehl cd (change directory) in das Verzeichnis, dass ihr runtergelassen habt, also tippt cd Da die entsprechenden Libraries nicht bei Processing mit installiert werden, ist es nötig, diese zu installieren. Die Dateien des gesamten Projektes finden sich unter http://code.google.com/p/simple-openni/ Dort sucht man sich am besten das Downloadpaket, welches die neueste Version trägt und auch NiTE beinhaltet, also "OpenNI_NITE_Installer…" Das installieren selbst ist etwas komplizierter, wird aber unter http://code.google.com/p/simple-openni/wiki/Installation gut erklärt. Dennoch hier alles nochmal in meinen Worten:

MacOSX: Entpacke ggf die zip-Datei im Download-Ordner, sofern das nicht schon passiert ist. Ihr solltet jetzt einen Ordner haben, der "OpenNI_NITE_Installer-OSX" heisst.

in das Terminal-Fenster und drop dann das Verzeichnis, in das man wechseln möchte in das Termanl-Fenster. Es müsste nun so etwas wie "cd /Users/[username]/Downloads/OpenNI_NITE_Installer-OSX" im Terminal-Fenster stehen. Tippe nun die RETURN-Taste um den Befehl abzuschicken. An dem, was nun vor dem $-Zeichen steht, sieht man, in welchem Verzeichnis man gerade ist. Das sollte das gedownloadete OpenNI-…-Verzeichnis sein. Um den Installier zu startet, tippt man sudo ./install.sh Danach wird man aufgefordert, das Passwort für den Mac einzugeben. Das sollte man wirklich immer nur tun, wenn man dem Installier trauen kann! Im Prinzip kann der Installier jetzt alles auf Eurem Computer machen. Einem Befehl vorrangeganenem "sudo" das Passwort zu geben, ist als einer der gefährlichsten Sachen, die man überhaupt machen kann! Nur und nur dann machen, wenn man der geladenen Software trauen kann. Im Zweifel: sein lassen!! Aber wir können diesem Installier trauen und so ist es ok - diesmal. 35

Danach gehst Du wieder auf die Downloadseite http://code.google.com/p/simple-openni/downloads/list und lädst die Datei aus der Liste, die nicht "Installer" im Namen trugt. Die heisst "SimpleOpenNI-0.27.zip" oder so ähnlich (andere Version eventuell). Diese Datei ggf. entpacken und in das Libraries-Verzeichnis von Processing (.../[username]/Documents/Processing/Libraries) bewegen. Nach der Installation von Libraries sollte Processing immer neu gestartet werden. Um zu sehen, ob alles gut gelaufen ist, ist es am praktischsten, man testet eines der Beispiele, die sich in Processing im Menü unter "File>Exempels…" und dann im Fenster unten unter "Contributed Libraries > SimpleOpenNI > OpenNI > DepthImage" z.B. finden. Wenn keine Kinect angeschlossen ist, sollte das Sketch dennoch ohne rote Fehlermeldung öffnen lassen. Es erscheint dann jedoch der Kommentar: SimpleOpenNI Version 0.27 Can't open the depthMap, maybe the camera is not connected!

Wenn das so kommt, ist alles soweit höchst wahrscheinlich ok!

36

6.3 Erste Schritte mit der Kinect

Die erste Variante wird sehr schön durch das Beispiel "DepthImage" gezeigt. Kurz durch den Code gewalkt: Nachdem ein SimpleOpenNI Objekt definiert und initialisiert wurde, wird mit context.enableDepth() der Raumsensor aktiviert, und mit context.update();

Wie gesagt gibt es bei der Kinect einen Sensor, den der uns Raumdaten gibt, der interessant ist.

jeweils die neusten Daten von der Kinect, die durch die ".depthImage" Methode wie ein Videobild vorliegen, geholt. Mit

Dieser kann uns zwei verschieden Typen von Output geben:

image(context.depthImage(),0,0);

1. ein zweidimensionales Graustufenbild, das wie ein Videobild erscheint, bei dem jedoch die nahen Bereich hell sind und die weiter entfernteren dunkler werden.

wird dann das entsprechende Bild dargestellt.

2. eine sogennte "Pointcloud", bei dem wir im dreidimensionalen Raum (also einem P3D-Fenster in Processing) alles gescannten Punkte mit x-, y-, und z-Koordinaten erhalten.

Beide Varianten geben und also Raumdaten, einmal in einer zweidimensolanen Bezug und auch als einzelne Punkte im Raum. Welche Variante sich besser eignet, hängt vom Projekt ab. Es ist sicherlich sinnvoll, sich beide anzuschauen um zu erkennen, welche Möglichkeiten in beiden liegen.

Die zweite Variante, bei dem wir eine Pointcloud erhalten, benutzt dagegen die Methode ".depthMapRealWorld". Ein einfaches Beispiel wo dies gezeigt wird ist "DepthMap3d", das sich auch bei den OpenNI Exampels befindet. Das Beispiel ist in sofern etwas umständlicher als nötig, da hier mit den zwei for-Schleifen über x und y quasi über ein zweidimensionales Array gegangen wird, wo man genauso gut in einer einfachen for-Schleife index durchlaufen könnte. Der Grund hierfür liegt darin, dass man ja letztlich ein zweidimensional gescanntes Raumbild durch die Kinect bekommt und durch die beiden fortschleifen dies in Code abgebildet wird.

37

depthMapRealWorld Zwei weitere Features der Kinect sind erwähnenswert und sollten unbedingt verstanden werden: Zum einen die Möglichkeit menschliche Körper als solche zu erkennen und alle Raumpunkte, die diesen ausmachen sich ausgeben zu lassen. So erhält man also entweder eine Fläche bzw eine 3D-Pointcloud die einen oder auch meherere User darstellt. Dies wird in dem Beispiel "Scene" gezeigt.

onNewUser, onLostUser, onExitUser, onReEnterUser startPoseDetection startTrackingSkeleton getJointPositionSkeleton

Zum anderen hat man auch die Möglichkeit sich die Gliedmaßen der erkannten Menschen anzeigen zu lassen (Beispiel "User" und "User3d"). Man kann die Position und Richtung aller Gliedmaßen getrennt abrufen. Diese sind sogar mit einer Angabe, wie verlässlich die Daten sind versehen.

Zusammengefasst habe wir folgende Stichworte, die man im Rahmen der Kinect und SimpleOpenNI verstanden haben sollte: enableDepth enableUser rgbImage irImage depthImage update depthMap 38

6.4 Alternative Libs für die Kinect? Eine weitere Processing Library für die Kinect ist openkinect. Download und eine recht ausführliche Beschreibung sowie Beispiele finden sich unter http://www.shiffman.net/2010/11/14/kinect-and-processing/

39

7 Projektion und Mapping

7.1 Untitled

Das Projektionverhältnis: Wenn Ihr es mit Projektoren zu tun habt wird Euch oft das Projektionsverhältnis begegnen. Dies ist wichtig damit ihr vorab schon berechnen könnt wie gross Eure Projektion wird wenn ihr einen Abstand von X habt. Ist das Projektionsverhältnis zb. 1:1.6 braucht ihr einen Abstand von 1,6 m um eine Bilddiagonale von 1m zu erreichen. Um die Seitenlänge und die Breite zu errechnen gibt es einige schöne Umrechnungstools im Netz zu finden.

Projektionen können mehr sein, sie können einen Raum gestalten in mit Farben und Elementen füllen, Projektionen können von sehr klein bis Hochhausgross sein.

Ein Mapping ist eine Projektion auf ein dreidimensionales Objekt. Um ein Mapping zu erstellen gibt es verschiedene Tools, es soll Euch jetzt exemplarisch der MADMapper vorgestellt werden.

Zwei technische Begriffe im Zusammenhang mit Projektion Mit dem MADMapper könnt ihr schnell Mappings erstellen. AnsiLumen: In AnsiLumen wird die Helligkeit eines Projektors per m2 gemessen. Projektoren können eine Helligkeit von wenigen AnsiLumen bis hin zu 15000 AnsiLumen und mehr haben. Je weiter ihr also von einem Objekt entfernt seid, oder je mehr Umgebungslicht herrscht, desto höher müsst ihr mit der AnsiLumen Zahl gehen, also braucht Ihr einen Lichtstärkeren Projektor.

41

Der MADMapper gliedert sich in 3 Bereiche. Der linke Bereich ist der Bereich für die Medien die Ihr verwendet(Fotos, Filme, QuartzComposer Patches und Syphon--> dazu später mehr)

Ihr seht nun im Output das MADLab Logo noch vollflächig und unverzerrt.

Der mittlere Bereich ist Euer Input, also hier ist zu sehen welche Datei grade aktiv ist, im Fall des Bildes ist es ein Testcard mit einem 4*4 Muster. Auf der rechten Seite ist Euer Preview Output, in welchem ihr Eure Objekte beliebig verzerren könnt.

Wenn Ihr nun im Preview Output die kleinen Kreise die sich an den Ecken Eures Objektes befindet anpackt könnt ihr das Objekt beliebig verzerren.

Ich habe nun in den MADMapper das MADLab Logo reingeladen und ihr seht auf der linken Seite einen Button der sich SurfaceI(quad) nennt. Ihr benötigt ein Surface damit Eure Medien im Output erscheinen.

Um nur einen Teilbereich Eurer Medien zu nehmen zieht ihr einfach den Rahmen im Input Fenster kleiner. So könnt Ihr zb. das logo in mehrere Quads aufteilen und zb. auf eine rechteckige Steele projizieren.

Surfaces können sein--> QUAD´s, TRIANGLE´s, CIRCLE´s und MASK´s. Es gibt noch die Möglichkeit ein DMX Protokoll auszugeben, aber das ist ein Spezialfall und wird fast nicht benötigt.

42

Diese einfache Projektion besteht aus 2 Surfaces(quad´s) und einem Image was genau in der Mitte geteilt wurde. Um Live Filme, Images oder live Kamera Input in den MADMapper zu bekommen müsst Ihr über eine VJ Software gehen die Syphon unterstützt wie zb. Modul8 oder VDMX. Syphon ist quasi eine Bridge die den Output aus der VJ Software oder auch aus Processing in den MADMapper bringt. http://syphon.v002.info/

Wenn ihr Euch in dem Thema vertiefen wollte schaut am letzten Donnerstag im Monat auf der Flimmerkiste im zeitraumexit vorbei. http://www.zeitraumexit.de/programm/flimmerkiste Hier trefft Ihr Leute die Euch alles über Projektion erzählen können. 43

8 Arduino

8.1 Was es ist

Arduino bietet eine sehr einfache Möglichkeit um Hardware zu programmieren. Es besteht aus einer Software, der Entwicklungsumgebung (IDE, Intergrated Developing Environment), die auf Processing aufbaut, und einer Reihe von Hardwarekomponenten, die im Wesentlichen aus einem Microcontroler-Chip mit verschiedenen Ein- und Ausgängen besteht. Auf diesen Chip kann man Programme laden, die man in der IDE geschrieben hat. Ist die Software erst einmal auf dem Chip, kann sie dort selbstständig laufen, also ohne weiteren Computer. Damit hat man eine kleine, autonome Maschine, die vielseitig einsetzbar ist. Der Chip ist recht leistungsfähig, allerdings in etwas anderer Form, als man es vom Computer gewohnt ist. Ihm fehlt es an Speicher, so dass zB das Betreiben eines Monitors nicht möglich ist. Andererseits sind mit dem normalen Computer Dinge, wie einfach eine LED zum Leuchten zu bringen, recht kompliziert. Das liegt daran, dass es nur Standardanschlüsse, wie USB, Firewire, Ethernet, Thunderbolt und so gibt. Diese Ausgänge benötigen Treiber und Protokolle und schon wird es recht kompliziert. Viel zu kompliziert, um schnell zB eine LED zum leuchten zu bringen oder die Temperatur zu messen. Darin liegt die Stärke der Chips, die auf der Arduino

Hardware sind. Dort hat man eine Vielzahl ganz einfacher Ausgänge und Eingänge. Die lassen sich über die Software ansteuern. Eine Zeile Code und auf dem Ausgang ist Strom. Wofür auch immer, zB einem Motor…. Oder eine Zeile Code und man weiss, wie viel Strom zB von einem Helligkeitssensor kommt, also wie hell es ist. Das geht mit mit dieser simplen Hardware sehr einfach. Neben den beiden Bestandteilen IDE und der Arduino-Hardware besteht ein typisches Projekt mit Arduino auch noch aus der elektrischen Schaltung, zB der LED, die normaler Weise auch einen Vorwiderstand, also weitere elektronische Komponenten benötigt. An anderes Beispiel wäre etwas zu steuern, das viel Strom - mehr als die Arduino-Hardware zB aus dem AkkuPack liefern kann. hier muss mann über ein Relais einen weiteren Stromkreis schalten. Das sind nur zwei Beispiele für Elektrische Schaltung, bei denen weitere elektronische Komponente (zB auch Kondensatoren, Spulen, Dioden, Widerstände, Transistoren,…) benutzt werden müssen. Und wenn man mal in ein Radio geschaut hat, weiss man, dass diese elektronischen Schaltungen sehr kompliziert werden können. Bei schwierigen Projekten muss man sich da sicher Hilfe holen, doch die Grundlagen sind überschaubar und lassen sich spielerisch angehen. Aber zunächst einmal zur Programmierumgebung, die IDE. Wie gesagt baut diese Auf Arduino auf und sieht sehr ähnlich aus:

45

rechts, der ausgaben von der Hardware anzeigt, sofern die Hardware noch mit dem Computer verbunden ist. Die Website hat, wie auch die Processing Website die Rubrik "Reference" in der alle Funktionen von Arduino aufgelistet sind. Unbedingt anschauen, um einen überblick zu bekommen. Auch der Shortcut cmd-shift-F funktioniert bei Arduino genauso wie bei Processing und führt zur Funktionsbeschreibung, die auf lokal auf dem eigenen Computer liegt.

Statt dem "Run" Button haben wir eine "Check Syntax" und eine "Upload" Funktion, da das Programm. das wir in Arduino schreiben ja nicht auf dem Computer läuft, sondern auf Hardware geladen wird, auf der sie läuft. Weiter hin gibt es einen Button "Serial Monitor" ganz 46

8.2 Installation

Die Installation von Arduino ist sehr einfach: auf der Website geht man zum Downlodbereich, sucht sich die entsprechende Plattform aus, lädt das Programm, verschiebt es in den Application Folder - fertig. Wie auch Processing legt Arduino einen Ordner unter "Dokumente" an und benutzt diesen wie Processing zum speichern von Dokumenten und dem Zugreifen auf Libraries. Auch Adruino installiert paar Exempels, die wie bei Processing vom Hauptmenü aus aufgerufen werden können. Kurz: Da Arduino eine Modifikation der OpenSource Software Processing ist, ist fast alles identisch.

47

8.3 Elektronische Schaltungen Elektronische Schaltungen sind Kombinationen von elektrischen Bauteilen, wie Kondensatoren, Spulen, Dioden, Widerstände, Transistoren,… die aufeinander abgestimmt, mit Strom verschieden Sachen machen. Entscheidend dabei ist, das immer ein Stromkreis aufgebaut wird, der den Strom fliessen und so bestimme Dinge machen lässt. Diesen Stromkreis und die Anordnung der Bauteile, werden schematisch in einem sogenannten Schaltplan dargestellt. Es ist die abstrakte Darstellung des der Schaltung. Hier finden sich die die Angaben, welche Bauteile benutzt werden müssen sowie ihre Dimensionierung.

Ich will ehrlich sein: Elektrische Schaltungen sind eine komplizierte Sache. Eigene Schaltungen von Grund auf zu konzipieren und zu dimensionieren erfordert viel Wissen und viel Erfahrung. Das lernen wir nicht in diesem Kurs nebenbei. Aber es ist wie bei so vielem: Entweder man findet etwas, auf das man aufbauen kann und lediglich verändern muss oder man findet jemanden, der hilft.

48

8.4 Breadboard

Schaltungen selbst kennen wir auch von elektronischen Geräten. Das sind elektrische Leiterbahnen auf sogenannte Platinen. Für die industrielle Fertigung super, für uns und zum bauen von Prototypen nicht geeignet. Dafür benutzt man besser ein sogenanntes Breadboard. Damit lasen sich einfach elektronische Schaltungen umsetzen und so verschiedene Sachen auch ausprobieren. Der Aufbau eines Breadboards ist einfach und immer gleich:

Der Aufbau eines Breadboards ist sehr einfach. alle Löcher aussen entlang der blauen und roten Linie sind jeweils längs miteinander leitend verbunden. Alle inneren Löcher sind quer miteinander verbunden. Die linke und rechte Seite sind jedoch voneinander getrennt. In die Löcher kann man elektronische Bauteile und Drähte stecken und so miteinander verbinden und eine Schaltung aufbauen, die rasch veränderbar ist. Wunderbar zum experimentieren und lernen.

49

Zum Aufbau von Schaltungen, insbesondre im Zusammenhang mit Arduino, bis hin zum Platinenlayout, gibt es eine sehr praktische Entwicklungsumgebung: "Fritzing". Wir werden im Rahmen des Kurses nicht weiter darauf eingehen, jedoch lohnt es sich, es mal anzuschauen. http://www.fritzing.org

50

8.5 Beispiel Arduino

Der Reiz an Arduino liegt, wie bereits gesagt, an der einfachen Möglichkeit anderen in- und Output, als man es vom PC kennt, nämlich Monitor, Tastatur, Maus und Trackpad. Sensoren sind ein möglicher Input bei Arduino, zB. Helligkeitssensoren, Entfernungssensoren, Sensoren, die Bewegung messen oder die Position im Raum. Als Beispiel schauen wir uns einen Helligkeitssensor an. Man findet das Bauteil bei einschlägigen Versandhäusern, wie etwas Watterott oder Conrad,… Es ist ein preiswertes Bauteil, das man meist in grösseren Stückzahlen kauft, wie die meisten elektrischen Bauteile. Etwas auf den Seiten der Versandhäusern rumstöbern gibt einen Eindruck, was es alles gibt und mich persönlich beflügelt es sehr! Hier der Helligkeitssensor (Fotowiderstand): http://www.watterott.com/de/Fotowiderstand-LDR Die Art, wie ein Fotowiderstand mit dem Arduino verbinden wird, entnehmen wir den folgenden Schaltplan:

51

Wir sehen, dass der Fotowiderstand mit dem Plus- und Minuspol (5V und GND, Ground, Erde) verbunden ist, sodass ein Strom durch ihn fliesst. Um zu messen, wie viel Strom durchfliesst, wird ein weiterer Widerstand in Reihe dahinter geschaltet und zwischen dem Fotowiderstand und dem normalen eine Verbindung zu einem analogen Eingang beim Arduino geschaffen. So fliesst ein Teil des Stromes über über den Fotowiderstand zu A0 ab - den messen wir. Diese Schaltung ist recht einfach auf dem Breadboard umzusetzen.

Dieses Beispiel wird als auf der Arduino Website etwas weiter ausgebaut, sodass mit dem Helligkeitssensor die Helligkeit einer LED gesteuert wird. Dazu wird auch der Fotowiderstand kalibriert. Es ist hier: http://arduino.cc/en/Tutorial/Calibration Ein kleines Projekt, das man sich anschauen sollte und auch mal nachbauen sollte. Mann könnte sich auch überlegen, wie man es anstellt, dass sich die Blinkfrequenz einer LED nach der Helligkeit richtet. Oder je nach Helligkeit eine oder eine andere LED angeht. Oder...

Das Programm, mit dem wir uns den Helligkeitswert ausgeben lassen sieht so aus: // pin that the sensor is attached to: const int sensorPin = A0; // the sensor value: int sensorValue = 0;     void setup() { // initialize the serial communication:   Serial.begin(9600); } void loop() {   // read the sensor:   sensorValue = analogRead(sensorPin);   // print as an ASCII-encoded decimal   Serial.println(sensorValue);  }

In dem Programm passieren eigentlich nur zwei Sachen: Wir fragen den Wert des Analog-Eingangs A0 mit analogRead() ab und geben diesen Wert über den SerialPort an den Computer zurück durch Serial.println(). Damit Serial funktioniert, muss es in der setup()-Funktion initialisiert werden, was durch Serial.begin() geschieht. 52

9 Lizenz & Autoren

Dieses Buch ist ein Cooperationsprojekt. Jede Mitarbeit ist willkommen!

9.1 Lizenz

•

Dieses Skript ist ein collaboratives Projekt initiiert durch das MAD Lab von habu (Prof. Hartmut Wöhlbier). Es steht unter der Creative Commons Lizenz 3.0 CC-BY-NC-SA http://creativecommons.org/licenses/by-nc-sa/3.0/deed.de Jeder der, etwas dazu beitragen möchte, wird ausdrücklich dazu ermutigt. Weitere Informationen dazu finden sich unter: http://designwiki.de/TGID 54

9.2 Autoren

“Technische Grundlagen des Interaction Design” von habu (Prof. Hartmut Wöhlbier) steht unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.
 Beruht auf einem Inhalt unter http://designwiki.de/TGID/Source.
 Über diese Lizenz hinausgehende Erlaubnisse können Sie unter [email protected] erhalten.

Weiter Autoren: • Stephan Ditgens (Kapitel “Projektion und Mapping”)

55

Arduino Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Drag related terms here

Index

Find Term

Chapter 1 - Was es ist

Ellipse Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Drag related terms here

Index

Find Term

Chapter 1 - Jetzt geht's los...!

IDE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Integrated Development Environment

Index

Find Term

Chapter 1 - Was es ist

Integrated Development Environment Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms IDE

Index

Find Term

Chapter 1 - Was es ist

Libraries Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Drag related terms here

Index

Find Term

Chapter 1 - Installation

P5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Drag related terms here

Index

Find Term

Chapter 1 - Was es ist

Xbox Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms XBox Kinect

Index

Find Term

XBox Kinect Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Related Glossary Terms Xbox

Index

Find Term

Chapter 1 - Was es ist