Extern 2 - Woche 10

Aufgaben

Sound-Visualisierung

Mit Hilfe von Sound-Bibliotheken kann man nun nicht nur Musik abspielen, sondern diese auch analysieren. Wie in Beispiel I3 kann ein Lautstärke-Schwellwert zum Steuern von visuellen Elementen eingesetzt werden. Dies kann natürlich deutlich feingliedriger, aber auch komplexer umgesetzt werden, um Sound zu visualiseren.

Minim bietet hier interessante Möglichkeiten, um etwa verschiedene Frequenzbereiche zusammen zu fassen und auf Peaks zu reagieren. Schaut euch dazu das BeatDetector-Beispiel an.

Beispiele

Einige spannende, interessante oder State-of-the-Art Projekte, die Musik visualisieren. Grob teilen diese Visualiserungen sich in zwei Bereiche auf:

• Die zeitliche Struktur wird im Raum abgebildet. Mittels Notenanaylse oder Frequenzanalye zeigt die Grafik den Track als Ganzes an.
• Der Track wird in Echtzeit abgebildet. Durch Beat-Erkennung oder Frequenzanalyse werden Parameter der Grafik live geändert und animiert.

Shape of Song

"The diagrams in The Shape of Song display musical form as a sequence of translucent arches. Each arch connects two repeated, identical passages of a composition. By using repeated passages as signposts, the diagram illustrates the deep structure of the composition."

• The method behind The Shape of Song
• Martin Wattenberg

pop sketch series

"This is a series of drawings generated from pop songs. The songs are analyzed note-by-note. At each note, a line is drawn. The angle at which the line is drawn is determined by the pitch of the note and the length of the line is determined by the volume of the note. The result is a series of playful, doodle-like, linear drawings."

• pop sketch series

Magnetosphere

Großartige Visualisierung von Musik! Gibt es auch als iTunes Plugin herunter zu laden.

• Magnetosphere - iTunes visualizer
• flight404

Weitere

• Michal Levy’s Adaptation von John Coltrane’s Giant Steps
• Whitney Music Box
• Using Processing and PowerMates as a VJ tool
• Create Digital Motion Blog mit Neuigkeiten über VJ, processing.org und andere Themen
• Music Animation Machine

Bildbearbeitung

In diesem Abschnitt werden wichtige Bildbearbeitungsthemen erläutert, die für die Videobearbeitung ebenso notwendig sind. (Siehe auch nochmal PImage-Objekt)

Bildgröße

Nachdem mit loadImage() ein Bild in ein PImage geladen wurde, kann die Größe des Bildes abgefragt werden. Dazu können die Eigenschaften width und height verwendet werden.

PImage img = loadImage("sonnenschein.jpg"); println("Bildbreite=" + img.width); println("Bildhöhe=" + img.height);

Pixelarray

Ein Bild besteht aus den einzelnen Bildpunkten, die auf einer Fläche angeordnet sind. Auf die einzelnen Farbwerte des Zeichenbereichs kann – wie wir letztes Semester gesehen hatten – über die Anweisung get(x, y) zugegriffen werden. Wie man nun die Pixel eines Bildes auslesen und verwenden kann, ohne das Bild zeichnen zu müssen, wird im Folgenden gezeigt.

Die einzelnen Bildpunkte eines PImage-Bildes sind in einem Pixelarray gespeichert. In Processing kann man auf die Pixel via img.pixels[i] zugreifen. In diesem Array sind die Farbwerte jedes Bildpunktes allerdings einfach, d.h. linear hintereinander abgelegt.

So kann durch den Index bspw. nicht direkt auf das Pixel in der 3. Zeile, 2. Spalte zugegriffen werden (hier: j). Um nun auf das zweidimensionale Bild in gewohnter Weise zugreifen zu können, kann man folgende Formel verwenden: pixelIndex = y * bildBreite + x
Möchte man nun auf den Pixel vom obigen Beispiel zugreifen, also folgendermaßen (wobei natürlich immer bei 0 zu zählen begonnen wird):

int pixelIndex = 2 * img.width + 1; color col = img.pixels[pixelIndex];

Beispiel: Pointillism

Zur besseren Veranschaulichung dieses Pixelarrays hier ein Beispiel, dass ein Bild nicht direkt zeichnet, sondern an zufällige Positionen Kreise zeichnet, die von einem an dieser Stelle liegenden Farbwert beeinflusst werden.

Je mehr und je feinere Kreise gezeichnet werden, desto besser kann das Original-Bild erkannt werden.

PImage img; void setup() { size(500, 600); background(255); noStroke(); smooth(); img = loadImage("photographer.jpg"); } void draw() { drawPoint(img.pixels); } void drawPoint(int[] pixelArray) { int x = int(random(img.width)); int y = int(random(img.height)); color col = pixelArray[y * img.width + x]; fill(col, 127); ellipse(x, y, 14, 14); }

In setup() werden die üblichen Einstellungsanweisungen ausgeführt, und das Bild geladen. In drawPoint() wird zunächst (in Zeilen 17, 18) eine zufällige Position auf dem Bild ausgewählt und in integer-Variablen gespeichert. Danach wird der Farbwert des Pixels (über die obengenannte Formel) an dieser Position ausgelesen und ein Kreis in dieser Farbe gezeichnet.

Video

Bibliotheken

Wie auch bei Sound-Bibliotheken gibt es mehrere, verschiedene Video-Bibliotheken für Processing.

• Video: "Interface to Apple's QuickTime for using a camera and playing movie files."
• JMyron: "Camera library for motion detection, color tracking, glob distinction, and pixel addressing. Does not require QuickTime or WinVDIG for Windows machines."

Zunächst werden wir die mitgelieferte Core-Bibliothek Video benutzen. Mit dieser kann man Quicktime-Videos abspielen und Live-Videos bearbeiten. (Auf Windows-PCs müssen zuvor Quicktime und WinVDIG installiert werden; siehe Beschreibung auf der Processing-Site.)
Die JMyron-Bibliothek benötigt diese Hilfsmittel nicht, und ist teilweise performanter – so kann etwa die Framerate bei Live-Video-Aufnahmen mit JMyron höher liegen. Zudem bietet es einfachere Motion-/Helligkeitstracking-Mechanismen als die Core-Bibliothek an.

Video abspielen

Als erstes soll ein fertiges Video in Processing abgespielt werden. Dazu muss zunächst die Bibliothek importiert werden. Dann erzeugt man ein Objekt der Klasse Movie und gibt beim Konstruktor den Namen des Quicktime-Videos an (das – wie gehabt – im data-Ordner liegen muss).

import processing.video.*; Movie myMovie; void setup() { size(400, 400); background(0); myMovie = new Movie(this, "sunrise.mov"); myMovie.loop(); } void draw() { image(myMovie, 0, 0); } void movieEvent(Movie myMovie) { myMovie.read(); }

Die Methode myMovie.loop(); besagt, dass das Video immer wieder von vorne abgespielt wird. In draw() kann das Video einfach mit der image() Anweisung gezeichnet werden. Das Besondere ist hier die Funktion movieEvent. Sie wird immer dann von Processing aufgerufen, wenn ein neues Bild vorliegt.

• Processing Reference: Movie
• movieEvent()
• Movie.loop()

Live-Video

Wenn ein Live-Videosignal verwendet werden soll, muss statt Movie die Klasse Capture eingesetzt werden. So liefert beispielsweise die Kamera in den iMacs oder eine per USB angeschlossene Webcam solch ein Live-Videosignal.

import processing.video.*; Capture liveVideo; void setup(){ size(320, 240); noFill(); noStroke(); liveVideo = new Capture(this, 320, 240); } void draw() { image(liveVideo, 0, 0); } void captureEvent(Capture liveVideo) { liveVideo.read(); }

Beim Erzeugen des neuen Capture-Objekts wird die Weite und Höhe des aufzunehmenden Bildes angegeben. Mit Hilfe der Funktion captureEvent() kann nun auf das jeweils neue Bild zugegriffen werden (Zeilen 17-19).

• Processing Reference: Capture
• captureEvent()