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“
Altough the printing method using movable letters has already been known in Eastern parts of the world it was the German goldsmith Johannes Gutenberg who improved this technique in 1450 which lead to a revolution in print setting and production of books and thus made the spread of information and knowledge available to a broader public. Before Gutenberg’s invention, in Europe it was the job of clerics to write and design (religious) stories and especially copies of the bible by hand, which of course was a slow but also quite expensive process. Due to this only the very wealthy part of the population was able to afford books and the contents they conveyed.
Compared to nowadays spread of information Gutenberg’s invention was also very slow and expensive, but his invention did not only speed up the reproduction of knowledge–by giving craftsmen the possibility to produce books and newspapers, the catholic church subsequently lost control over publishing and thus knowledge and science, leading to an empowerment of the bourgeoisie.
For over 500 years then, the method of letterpress printing was the predominant form to combine texts with woodcuts and later linocuts, or metallic printing plates.
In Graz the Druckzeug is the local museum for antique and 20th century printing techniques, that besides numerous printing machines holds a huge collection of wooden and lead letters. In addition to the moveable letters in various fonts, sizes and cuts, the typeset workshop is fully equipped with spacebands and leads, as well as all the tools you need to prepare everything from a single one word lettering, abstract type-sets and full page texts for your personal letterpress print experience.
Browsing through Allez hopp! Buchstaben aufräumen : die Handsatzschriften in der Buchdruckerei Alexander Bauer, Graz by IND10 student Ursula Bogner, a font catalog containing the biggest part of fonts and typefaces available at Druckzeug, you can learn more about the history, categorization and use of the fonts. Besides depiction of the typefaces the catalog also contains a register in which drawer you will find the various fonts.
At first for my experiment I planned to test four to five different fonts, but soon found out that not every font provides a complete set of letters and also you won’t find every cut or font size that you would need for your desired printing purpose.
Besides, for the unexperienced type setter, working with hand set letters is another quite time consuming and intense work–first you need to pick out the letters you need for your text, then find suitable spacebands and fill your set with non printing pieces of normed lead to fix your letters, so they won’t fly away during the print run. In addition you should always keep in mind that after printing you have to put back in place every piece you used!
So in general it’s good to think about font, cut and size first and to begin with this printing method it’s a great deal to keep it simple, as the more material you use, the more adjustments you will need for a proper printing image. (Not only that various fonts may have slightly different printing heights, you will find that especially bigger wooden letters need a lot of adjustments as they can be rather worn, resulting in a vintage print look).
However, I finally decided to use a set of 14pt Akzidenz Grotesk regular as well as (assumably) 60pt Anzeigen-Grotesk bold to test some arrangements and layouts for the proof press.
In general the method working with single letters and truly manual spacing seemed to give another perspective for typography, but also for the necessity of white space and it’s arrangement. On the one hand the use of physical letters sharpens the perception of typographic characteristics, while creating an awareness for the advantages of well made digital fonts. Secondly, the use of standardized sizes of fonts and leads, provides a rather intuitive approach to efficient use of spacing and proportions, compared to seemingly unlimited possibilities offered by a screen based layout.
However, compared to working on the digital desktop, to see the result of your letterset it’s even more important to make a proof print–first of all, only the proof print will reveal the right reading direction as the printing letters are always mirror-inverted. Additionally the font size of the letters appear bigger in their physical than in printed state. And of course, while you can add spacing to your letter set before the first print, only the print will show if spacing is used properly.
In the case of my experiment, although some adjustment in spacing between the letters was need, the typefaces turned out to be a great choice as the lead letters still had sharp edges for a clean and clear printing image.
To see the printed results, look out for part four of the experiment: proof press.
As an experiment for my research I came up with the idea to produce a poster edition using a linocut as well as a hand set lettering. In addition I’ve planned to make photos of every poster to see the development of the print run and finally will hang the posters in public space to observe how people will react to the poster.
Part I–concept & design
Inspired by the claim “Reality Is Analog” I wanted to create a poster, delivering the message via a typographic layout but also transporting the nuances and very own features of analog print production. For this I got in touch with Druckzeug, the local museum for antique and 20th century printing techniques and letterpress playground in Graz, who kindly supported me to implement the project by opening the workshop and giving instructions in operating the machines (more info about Druckzeug, hand set letterings and steps of printing to follow).
Aside from the various possibilities in using typography for the poster –fonts, cuts, font size, alignment and layout–for the main theme I dealt with the classical geometrical problem of the quadrature of the circle (Quadratur des Kreises). To me, this problem, describing the impossibility to create–with finitely many steps–a square and a circle that have the exact same area, just seemed like a perfect analogy to the imperfection that’s very likely to occur in analog production.
However, as only a square and a circle didn’t seem to be highly attractive, besides repeating the theme I also added a tilt to every second square in order to provoke the viewers’ visual perception and thus emphasize the optical effects of the poster.
So for the first step I started to simulate a few variations and combinations of type and the graphic theme on the computer, offering infinite possibilities.
For the analog production however I had to decide on one variation and being quite inexperienced in the field of linocut I tried to keep it rather simple, which led me to this design for the main theme:
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
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:
