Dieses Programm habe ich schon vor längerer Zeit geschrieben, nun habe ich es erweitert und umgeschrieben. Eigentlich wurde dieses Beispiel für die Anbindung einer Kinect Kamera und einer Beamer-Leinwand erstellt (Immersives Theremin) und aus diesen Daten eine Visualisierung zu generieren.
Beispiel
Ein User bewegt sich vor einer (Beamer)Leinwand und steuert ein Theremin. Visualisiert wird dies durch eine Kette an Kuben welche stereoskopisch dargestellt werden und den User beim Musizieren verfolgen.
Beim Tragen einer stereoskopischen 3D Brille sollte ein 3D-Effekt sichtbar sein.
Geht der User vor der Leinwand auf der X-Achse auf und ab (Lautstärkeänderung).
Die Größer der Boxen ändert sich durch die Entfernung des Nutzers zur Kinect.
Der User hebt den rechten Arm und die Frequenz ändert sich.
Ziel:
Nachdem der stereoskopische Effekt mehr, oder weniger gut am Beamer funktioniert hat, möchte ich diesen nun überarbeiten und stärker hervorheben, um diesen Effekt direkt in Zukünftigen 3D Visualisierungen übernehmen zu können.
2. Das Programm nun für die Mausnutzung abwandeln und die Z/T-Tastenvariante einfügen, um die Z Achse zu simulieren.
X-Achse –> Mouse Y-Achse –> Mouse
Z-Achse à Z/T – Taste
Ergebnis:
Die Überarbeitung des stereoskopischen 3D-Effekts hat sich bewährt, der Effekt tritt nun viel stärker hervor. Die Abstände der Rot/Blaulinien wurde etwas vergrößert. Des Weiteren habe ich die weißen Würfel auf einen leicht grauen Hintergrund platziert um diese so hervorzuheben.
Während dem Umbau für die Mausnutzung, habe ich auch das Z-Achsenhandling abgeändert und verbessert.
Nach einem Test Typo direkt hartcodiert zu verarbeiten möchte ich nun Text extern einlesen. Für diesen Versuch möchte ich Daten/Text aus dem Internet abgreifen.
Zu meiner obigen Anforderung muss ich mir ein Anwendungsbeispiel überlegen.
Buchstaben/Wörter zählen?
Buchstaben/Wort-Statistiken vergleichen?
Nachdem keine Idee meinen Ansprüchen entsprochen hat, habe ich mir ein abstraktes Anwendungsbeispiel überlegt.
Matrix
Matrizen sind im Programmieren/Mathematik sehr bekannt, jedoch soll es in meinem Beispiel um eine Hommage an den Film „Matrix“ gehen. Die meisten kennen die Grün/Schwarze Matrix aus dem Kultfilm:
Nach einem Test Typo direkt hartcodiert zu verarbeiten möchte ich nun Text extern einlesen. Für diesen Versuch möchte ich Daten/Text aus dem Internet abgreifen.
Zu meiner obigen Anforderung muss ich mir ein Anwendungsbeispiel überlegen.
Buchstaben/Wörter zählen?
Buchstaben/Wort-Statistiken vergleichen?
Nachdem keine Idee meinen Ansprüchen entsprochen hat, habe ich mir ein abstraktes Anwendungsbeispiel überlegt.
Matrix
Matrizen sind im Programmieren/Mathematik sehr bekannt, jedoch soll es in meinem Beispiel um eine Hommage an den Film „Matrix“ gehen. Die meisten kennen die Grün/Schwarze Matrix aus dem Kultfilm:
Von Jamie Zawinski, Attribution, https://commons.wikimedia.org/w/index.php?curid=3792993
Mein Beispiel: Optical line/gradient illusion
Ziel:
Es soll Text/Zeichen aus einer Website geladen werden und im „klassischen“ Matrix Look dargestellt werden. Des Weiteren soll diese Matrix-Darstellung durch eine User-Interaktion ausgelöst werden.
Zusätzliche Testfälle
Gag / bzw. Easter Egg, immer wichtig bei geek projekten
Verschiedene Effekte anwenden
Umsetzung/Erkenntnisse:
Als erstes hole ich mir die Zeichen von einer Website, dies sollte in Processing mittels loadStrings() schnell realisierbar sein. Danach lege ich daraus eine Line-Matrix an und lösche alle non-ASCI Zeichen, control characters und non-printable Zeichen.
Nach einigen Ausgabe-Tests mit diesen Zeilen überlege ich mir die nächsten Schritte: Ich brauche die Zeilenaausgabe senkrecht, nicht horizontal.
Aus jeder Zeile erstelle ich nun ein eigenes Objekt (um meine OOP-Kenntnisse aufzufrischen). Jedes Objekt/Zeile darf nun selbst entscheiden von welcher Position an die Screen sie startet. Pro Zeile wird nun jedes Zeichen durch iteriert und auf entlang der Y-Achse ausgegeben. Nach einigen Tests merke ich, dass es für den originalen Look essentiell ist von welcher Position die Zeichenketten starten. So müssen etwa einige Zeichenketten im X-Minusbereich starten um ein vollständiges Bild zu erzielen.
*Spoiler alert* Als User-Interaktion fällt mir die Konversation zwischen Neo und Morpheus ein, in welcher er sich entscheiden muss, in welcher „Realität“ er weiterleben möchte. Symbolisch muss Neo zwischen einer roten Pille, oder einer blauen Pille wählen. Diese Entscheidung möchte ich in meiner Arbeit aufgreifen und den User entscheiden lassen.
by ADAMS
Zusätzliche Testfälle –Erkenntnisse:
Verschiedene Effekte anwenden
Ich habe mich für den Einsatz von preset-filtern entschieden. Manche funktionieren besser als andere und werden aufgrund der Menge sehr rechenintensiv. à Ruckler entstehen
Ich habe mich für Zwei entschieden, der User kann mittels B und E Taste den Filter switchen.
Filter1:
by ADAMS
Filter2:
by ADAMS
Gag/Easter Egg
Den Text für diese Matrix hole ich aus dem Wikipedia-Eintrag vom „Höhlengleichnis“
Nach meinem ersten Test, aus seiner abstrakten Form eine durch Sound animierte Visualisierung zu erstellen ist gelungen.
Im nächsten Schritt möchte ich mich der Animation von Typographie annähern. Dabei soll diese aber nicht gewöhnlich bewegt werden, sondern wird vorab in Vektoren und Ankerpunkte umgewandelt. Gleich wie im ersten Beispiel wird Sound den Text in Bewegung bringen.
Umsetzung/Erkenntnisse:
Im Gegensatz zum ersten Beispiel wird hier kein von Sound-Designern kreierter Sound herangezogen, sondern ein gewöhnlicher Song. Dieser wird eingelesen und mittels Amplide-Analyzer analysiert.
Aus dem Text „ADAMS“ erstelle ich eine Shape, welche ich rechnerisch genau in das Fenster einpasse. Danach setze ich Segmentoren, Längen und Abstände der Ankerpunkte.
Ich bin schon seit langem Fan von optischen Täuschungen und ihren Effekten. Daher habe ich mich dafür entschieden selbst eine nachzuprogrammiern und auf einem Beamer ihre Wirkung zu testen.
In diesem Test habe ich versucht eine optische Täuschung nachzuprogrammieren. Diese ist angelehnt an die Cafe Wall Illusion (https://de.wikipedia.org/wiki/Caf%C3%A9_Wall_Illusion). Sie ist eine visuelle Wahrnehmungstäuschung, bei der Rechtecke optisch verzerrt wirken, wenn sie abwechselnd schwarz und weiß platziert werden. Im nächsten Schritt werden diese durch eine graue Linie getrennt. So entsteht folgendes Bild:
By Fibonacci – Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1788689
Mein Beispiel: Optical line/gradient illusion
Ziel: Eine weiße Ellipse wird auf einer horizontalen, grauen Linie von links nach rechts geschoben, dabei wird die Ellipse beim Richtungswechsel abgebremst und wieder beschleunigt.
Im Hintergrund wird eine bewegter gray gradient dargestellt welcher gegengleich mit der Ellipse einen Richtungswechsel durchführt.
Dabei soll der Effekt von einer unebenen horizontalen Linie/Ebene entstehen, welche die Ellipse in ihrer Bewegung beeinflusst.
Zusätzliche Testfälle:
Kann mit mehreren Ellipsen und Ebenen der gleiche Effekt erzielt werden?
Wie sehr ist der Effekt von der Bewegungsgeschwindigkeit der Kugel bzw. des Hintergrunds abhängig?
Wie kann man die optische Illusion wiederlegen?
Ergebnis:
Die Erkenntnisse werden von mir subjektiv Wahrgenommen und so dokumentiert.
Alle Anforderungen die ich an die Optische Täuschung gestellt habe wurden implementiert. Nach einigen Geschwindigkeitsanpassungen läuft die Täuschung optimal. à Check
by Adams
Ich bin mit dem Ergebnis sehr zufrieden und mache mich an die zusätzlichen Testfälle, welche ich mir gestellt habe.
Zusätzliche Testfälle –Erkenntnisse:
Wie sehr ist der Effekt von der Bewegungsgeschwindigkeit der Kugel bzw. des Hintergrunds abhängig?
Während der Kalibrierung der Bewegungsgeschwindigkeiten konnte ich bereits unterschiedliche Geschwindigkeits-Werte testen. Um die Wirkung schnell und bequem testen zu können, habe ich die +/- Tasten zur Hand genommen und diese mit der Geschwindigkeitsänderung belegt.
Der Effekt ist sowohl bei hoher Geschwindigkeit als auch bei geringer gut erkennbar. Bei hohem Tempo wirkt der Effekt sehr hecktisch, aber er funktioniert. Bei geringem Tempo wirkt dieser sehr träge, jedoch viel immersiver, als bei hohem.
Check
by Adams
Kann mit mehreren Ellipsen und Ebenen der gleiche Effekt erzielt werden?
Als erste Frage stellt sich mir: Wie viele Ebenen/Ellipsen brauche ich für diesen Test? Da ich mir das nicht konkret beantworten kann, profitiere ich von dynamischem Code. Ich belege die Tasten N und M als Trigger für meine „Anzahl-Variable“. Wird eine der Tasten betätigt, wird eine Ebene/Ellipse hinzugefügt, oder entfernt. Dies erlaubt mir freies testen mit einer Unzahl an Ebenen.
Dafür teile ich die Höhe des Fensters durch die Anzahl von gewünschten Ebenen/Ellipsen in gleich große Teile.
Wie schon zuvor beschrieben funktioniert der Effekt mit einer Ebene/Ellipse perfekt, gleiches gilt für 2 oder mehrere Ebenen. Bis circa 20 Ebenen wirkt der Effekt noch gut, ab 20 jedoch entsteht eine Art Welche die Wirkung abschwächt, jedoch ein anderes optisches „Springen“ auslöst.
Check
by Adams
Wie kann man die optische Illusion wiederlegen?
Für mich selbst und Skeptiker die meine Visualisierung betrachten finde ich es gut, diese optische Illusion schnell „stoppen“ zu können, um dem Gehirn eine Pause zu geben und diesen Effekt zu verstehen.
Für diesen Effekt nehme ich mir die Maustasten LINKS/RECHTS, wird der Hintergrund, welcher für die optische Täuschung verantwortlich ist einfach schwarz eingefärbt. Die Ellipsen bewegen sich dabei ungehindert weiter.
Wird die Maus betätigt, ist dieser „Seegang Effekt“ nicht mehr zu merken, Pause fürs Hirn!
Da mir nahegelegt wurde auch sehr angewandt zu arbeiten werde ich versuchen, einige meiner Arbeiten zu zeigen, welche mittels Creative-Coding entstehen.
Vorab möchte ich noch verschiedene „Creative-Coding“-Entwicklungsumgebungen recherchieren. Va ich mit visuellen Programmiersprachen noch kaum Erfahrung habe, möchte ich dahingehend mögliche Umgebungen erkunden.
Ich werde meine Recherche laufend erweitern:
By Cycling’ 74 – https://cycling74.com/company, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=87415137
Max „Max/MSP/Jitter“
Typ: visual programming language Anwendungsgebiet: Musik, Multimedia Entwickler: Cycling ’74 OS: MS Windows, macOS
Fazit: Speziell an diesem Punkt finde ich Max zu Musik und Multimedia lastig.
Typ: Application Framework, C++ library Anwendungsgebiet: Grafik, Audio, Video, Algorithmische Geometrie Entwickler: Open Source, entwicklet durch Github (lead architect Andrew Bell) OS: Cross-platform
Fazit: Wie Cinder eine C++ Library jedoch nicht Open Source. openFrameworks ist stärker von open Source Librarys abhängig und erlaubt Entwicklern so mehr Kontrolle und Transparenz. So gibt es auch mehr Updates und Bug-Fixes.
Die Selbstbeschreibung auf der Website spricht mich sehr an:
„OPENRNDR’s APIs are designed to embrace Java’s advanced functionality while still being easy to use. Bottom-line is, we feel that Processing is less suitable for a production context.”
