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.”
Viele von euch kennen es bestimmt, ein neuer Aufrag, ein neues Layout ist gefragt. DIN-Formate, naja, sind oft zu fade. Also, ran ans Paper-Prototypen und Formate ausprobieren. Welches Format kann am sinnvollsten vom Konzept abgeleitet werden? Ruck, Zuck ist der erste Prototyp angefertigt. Der Zweite, Dritte…
Nun brauchen wir einen sinnvollen Satzspiegel – gute/SPANNENDE Randproportionen sind das Wichtigste: Tschichold, Fibonacci, Goldener Schnitt, Neunerteilung, … oder doch frei?
Jetzt beginnt die Rechnerei, denn der Teufel steckt im Detail. Möglicherweise bin ich hierbei eine Ausnahme, aber es muss einfach stimmen. So, ab damit ins Indesign, um mir die Vorschau anzusehen. Sehr gut, gefällt mir erst mal nicht, da muss ich nochmal ran. So lässt sich ein Nachmittag schnell mit Rechnerei und tüfteln verbringen. Die Berechnungen sind bekanntlich keine „Rocket-Science“, aber kosten mich Motivation und sind unnötiger Zeitaufwand. Besser wäre es also die Zeit direkt in die Prototypen zu stecken.
Daher habe ich beschlossen einen Golden Ratio Viewer zu programmieren.
Layout Tool: Golden Ratio Viewer. (c) Jan Adams Layout Tool: Golden Ratio Viewer. (c) Jan Adams
Ich habe mich mehr oder weniger bewusst für die vermutlich ungeeignetste IDE entschieden: Processing. NULL vorgefertigte GUI-Elemente, Eventhandler etc. – perfekt. Weil ich mir ohnehin das Mouse-Handling mit selbst gebauten UI-Elementen ansehen wollte hab ich mich dennoch an die Arbeit damit gemacht.
Da, wie oben erwähnt keine GUI-Elemente existieren und ich lieber gleich auf Libraries verzichten wollte, habe ich die Steuerung quick and dirty, bzw quick and old-school per Keyboard abgewickelt. Da mich aber auch das Mouse-Handling interssiert, habe ich auch dieses ausprogrammiert.
Am Ende hat mich das Tool doch mehr Zeit als geplant gekostet, aber immerhin DIY lol
Um der Verrostung entgegenzuwirken habe ich entschlossen im Sound&Visual Seminar mit Generativem Design (Processing) zu arbeiten.
Die Sound-Designerin, Isabel Witting hat im Rahmen einer Übung 5 Klänge bzw. Klangfolgen vorgegeben.
Mein Ziel war es, ein immersives, audio-visuelles Erlebnis zu generieren, da die gegeben Audio-Files sehr intensiv gestaltet sind.
Im ersten Schritt habe ich eine simple Vektorgrafik erstellt, welche wenige Kanten besitzen sollte und von einem Kreis umgegeben ist. Mein Ziel war es eine Form zu generieren, welche ich in schöne Schwinungen versetzen kann.
Visual Adams | Unförmige simple “Startform”
Im zweiten Schritt habe ich diese Vektorgrafik in Processing eingelesen und im Code zusätzliche Ankerpunkte gesetzt. Diese Ankerpunkte habe ich mit Ellipsen bestückt.
Visual Adams Jan, Sound Witting Isabel
Zu allerletzt habe ich die Audiodatei von Isabel eingelesen und mittels Sound-Library ausgelesen. Je nach Pegelwert werden die Kreise in Schwingung versetzt.
Durch den Einsatz von leichten Transparenzen auf schwarzem Hintergrund und verschiedenen Größen wird das Visual sehr dynamisch.
Während den letzten Recherchen über DATA, CODE, DESIGN bin ich auf an diversen Social Media Accounts gestoßen, deren Arbeiten ich in nächster Zeit präsentieren werde. Mein Hauptaugenmerk möchte ich aber auf die verschiedenen Tools und Herangehensweisen im Generativen Design bzw. Creative Coding widmen und etwas tiefer eintauchen.
Hier eine Entdeckung, welches man als klassisches Ausgabemedium bezeichnen kann. Es kombiniert Creative Coding mit Print? What could go wrong?
Wie es der Name schon beeinhaltet, ist ein Pen-Plotter ein “Plotter” mit einem Stift. Was ist nun der Unterschied zu Druckern? Im Vergleich zu regulären Druckern können Plotter Vektorgrafiken direkt weiterverarbeiten, ohne diese davor in eine Rastergrafik umwandeln zu müssen. Perfekt für meine Code Designs.
Diese Pen-Plotter stehen in der Regel auf einer flachen Oberfläche und können je nach ihrer Dimension verschiedene Oberflächen “bezeichnen”.
Je nach eingespanntem Stift, variiert das Zeichenergebnis: Von Textmarker, Lackstift bis Füllfeder. So können verschiedenene (flache) Materialien, wie Plakstik oder Metall mit einem Lackstift bezeichnet werden. Die Qualität der Oberfläche und des Stifts sind hier maßgeblich und beeinflussen das Endergebnis. Diese Kombination aus analoger Qualität und Ästhetik fasziniert mich.
Die Einsatzgebiete dieser Pen-Plotter variieren: – Artwork – Unterschriften, von Promis oder andere die oft unterschreiben haha – “Handgeschriebene” Briefe – “Personalisierte” Post/Kuvers – und viele mehr
Sogar Smartphone und Hardware Hersteller verwenden dieses Tool um etwa mittels Stylus deren Hardware zu testen.
Preise
Preise für diese Pen-Plotter variieren, von 70 $ Ali-Express bis hin zu ersten Roboterarmen für mehrere Hundert Kröten:
Jeffrey Heer ist Informatiker und durch für Informations-Visualisierungen und interaktive Datenanalyse bekannt.
“David McCandless turns complex data sets, like worldwide military spending, media buzz, and Facebook status updates, into beautiful, simple diagrams that tease out unseen patterns and connections. Good design, he suggests, is the best way to navigate information glut — and it may just change the way we see the world.” TEDEd
Ab wann spricht man von abstrakter Daten-Visualisierung?
Um Daten-Visualisierungen, Diagramme, Infografiken etc. „lesen“ zu können, ist es wichtig, dass diese leicht verständlich aufgebaut und visualisiert sind. Hierbei spielt der informative Wert die Hauptrolle, der visuelle Anspruch rückt dabei in den Hintergrund und soll nur die Informationsaufnahme unterstreichen.
Onformative, ein Berliner Studio für digital art and design, zeigt (meiner Interpretation zufolge) ein sehr schönes Projekt für abstrakte Daten-Visualisierung mit dem „4010 Facebook Tree“. Für dieses Projekt wurden Facebook-Beiträge, des Auftraggebers Telekom flagship store, über vier Jahre verarbeitet und mittels Processing visualisiert. Der 4010 Facebook Tree verarbeitet Interaktionen eines Facebook-Posts, wie Like-Anzahl, Type des Posts, Comment-Anzahl etc. und illustriert diese als organischen Baum/Farn.
From onformative | 4010 Facebook TreeFrom onformative | 4010 Facebook TreeFrom onformative | 4010 Facebook Tree
Ohne Kontext wirkt diese Illustration sehr komplex und detailreich. Erfährt man die generativen/algorithmischen Regeln dahinter, so ist man in der Lage, diesen Baum auf weitere Ebenen zu entschlüsseln und zu entdecken. Damit unterscheidet sich der Anspruch dieser „data illustration“ von jenem der klassischen Daten-Visualisierung insofern, dass hier der visuelle Teil eine viel höhere Wertigkeit besitzt als die Informationsaufnahme.
Mittels angebrachten QR Codes können LeserInnen den Spalt zwischen Information und Grafik schließen und können die dahinter verarbeiteten Daten eruieren und werden direkt zum Facebook-Post geleitet.
