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

▲▼▲ | interaktive Dreiecke

Im Rahmen des Kurses »Programme Entwerfen« entstand ein Processing-Sketch, der ein Bild durch Nachbildung mit Dreiecken verfremdet. Zusätzlich kann der Nutzer mit dem generierten Bild per Maus/Multi-Touch interagieren.

aufgabe.jpgaufgabe.jpg

„Entweder kann existentes Bildmaterial analysiert und manipuliert oder anderweitig verarbeitet werden, es können neue Bilder und Welten geschaffen oder existente Bilder mit Code nachempfunden werden.“

funktionsweise.jpgfunktionsweise.jpg

Startet der Nutzer das Programm wird ein hinterlegtes Bild angezeigt und analysiert. Anschließend entsteht eine wabbernde Nachbildung aus verschiedenen, farbig passenden Dreiecken. Der Nutzer kann durch Bewegen der Maus mit den Dreiecken interagieren und diese aus ihrer angestammten Position Verdrängen. Die Interaktion per Multi-Touch und/oder iPad ist auch möglich.

orig.jpgorig.jpg

canny_edge.jpgcanny_edge.jpg

triangleized.jpgtriangleized.jpg

code.jpgcode.jpg

Um das Programm im Rahmen diese Kurses und mit meinen „Mitteln“ realisieren zu können, kam einiger Code Anderer zum Einsatz. Vorallem die Library toxiclibs, eine java Implementierung eines s.g. canny edge Algorithmus ( http://www.tomgibara.com/computer-vision/canny-edge-detector ) und die Multi-Touch Library TUIO sei hier genannt.

Grob ist das Programm wie folgt aufgebaut:

  1. Der Nutzer drückt die Leer-Taste, voraufhin das gewählte Bild auf Kanten analysiert wird. Dies geschieht durch den canny edge Algorithmus. Das Ergebnis lässt sich im Sketch durch Drücken von „c“ sichtbar machen.

  2. Es werden zufällig 500 Partikel auf den gefundenen Kanten verteilt. Die Partikel werden nun zu nicht-überlappenden Dreiecken verbunden und entsprechend ihrer Position eingefärbt. Die Berechnung der Dreiecke verfolgt durch eine s.g. Delaunay Triangulation aus der toxiclibs-library. An den Punkten, wo die Ecken der Dreiecke zusammenstoßen, befindet sich immer ein Partikel. Der Partikel und die zusammenstoßenden Ecken der Dreicke bilden eine „Einheit“. Bewegt sich der Partikel, „bewegen“ sich die entsprechenden Ecken der Dreiecke.

  3. Die Partikel werden nun mit gewissen physikalischen Eigenschaften versehen. Sie stoßen sich gegenseitig ab, sind jedoch auch mit unsichtbaren Federn verbunden, wodurch sie sich immer wieder in ihre ursprüngliche Position zurückbewegen.

  4. Fährt der Nutzer mit seiner Maus über den Sketch, werden die Partikel vom Mauszeiger abgelenkt, von ihrer angestammten Position verdrängt. Der Mauszeiger wirkt abstoßend auf die Partikel. Die Dreiecke beginnen zu wabbern.

Um auch per Multi-Touch mit dem Sketch zu interagieren, wurden die Multi-Touch-Library TUIO eingebunden. Wenn ein TUIO-Server erkannt wurde, werden entsprechend der Finger, weitere abstoßende Punkte (anstelle des Mauszeigers) im Sketch erzeugt.

Durch den Aufbau von TUIO lässt sich der Sketch mit einer Vielzahl von verschiedenen Eingabegeräten nutzen. Es muss nur der passende TUIO-Server verwendet werden. Trackpads, iPads, iPhones, Android-Geräte, aber auch die Kinect sind für die Steuerung möglich.

TUIO-Server für die Steuerung per Macbook-Multi-Touchpad: Tongseng ( https://github.com/fajran/tongseng ) TUIO-Server für die Steuerung per iPhone/iPad: TuioPad aus dem Appstore

Weitere Infos auf tuio.org ;)

fazit.jpgfazit.jpg

Ich hatte vor dem Kurs schon mit processing rumgespielt und auch in anderen Programmiersprachen das ein oder andere ausprobiert. Die Komplexität des Projekts hat mich dennoch ziemlich gefordert - runtergebrochen in einzelne, aufbauende Programmerweiterungen ging's aber doch ganz gut.

Ich fand mich in processing recht schnell zu recht. In Rücksprache mit Jens, war recht schnell klar, dass ich für meine Idee Libraries verwenden muss. Wer will denn auch schon das Rad neu erfinden.

Die verwendete toxiclibs ist jedoch für den Anfang schon ein recht dicker Brocken. Sie hat einen unheimlichen Funktionsumfang. Es hat deshalb recht lange gedauert, bis ich da durchgestiegen bin (ein paar java-Kenntnisse sind nicht verkehrt). Wenn man aber mal weiß wie, erleichtert sie einem aber ungemein das Leben. Ohne die verwendeten Libraries wäre mir eine Umsetzung nicht möglich gewesen.

Nachdem der Code komplett stand und auch funktionsfähig war, lief er erstmal nur mit 6 fps. Um flüssig damit zu interagieren war das aber viel zu wenig. Die Optimierung des Codes und vorallem die Umstellung der Renderers von P2D auf OpenGL hat einen immensen Geschwindigkeits-Boost gebracht. Jetzt läuft der Sketch bei 500 Partikeln und Multi-Touch-Interaktion mit ca. 40 fps auf dem kleinsten 2011er Macbook.

Insgesamt ein wirklich guter Kurs. Ich hab super viel gelernt. Am faszinierendsten finde ich eigentlich, wie ich meine recht Komplexe anfängliche Idee durch kleine aufeinander aufbauende Schritte komplett umsetzen konnte.

Danke Jens!

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: JW

Entstehungszeitraum

Sommersemester 2012

zusätzliches Material