Sagt mal, gibt es eigentlich einen if-Befehl, der sich auf Bilder bezieht?

Also á la “wenn Klick auf image XY, tu dies und das”?
Man soll bei meinem Sketch auf die Bilder klicken können und Musik spielt ab, aber es ist doch recht mühselig, jedes mal diese Koordinaten zu suchen fürs mouseX und mouseY..

Gibt es da sowas cooles?

Dana

Unglaublich nützliches Tool zum Erstellen eigener “Retro” Sounddateien. Werden von Processing wunderbar aufgenommen, ohne dass man mal ein “Out of memory” vor die Stirn bekommt.

Flash Portierung

Original Homepage

The Clavilux 2000 is an interactive instrument for generative music visualization, which is able to generate a live visualization of any music played on a digital piano. The setting of the installation consists of three parts: A digital piano with 88 keys and midi output, a computer running a vvvv patch and a vertical projection above the keyboard.

For every note played on the keyboard a new visual element appears in form of a stripe, which follows in its dimensions, position and speed the way the particular key was stroke. Colours give the viewer and listener an impression of the harmonic relations: Each key has it’s own color scheme and “wrong” notes stand out in contrasting colors.

Link

Audiosurf ist ein Computer-Musikspiel aus dem Jahre 2008. Ziel des Spieles ist es, ein Raumschiff auf einer mehrspurigen Rennstrecke zu lenken und dabei farbige Blöcke taktisch richtig durch Überfahren einzusammeln. Strecke, Blöcke und Geschwindigkeit generieren sich aus den Charakteristika des vorher ausgewählten Musikstückes. Dabei ist es möglich jede vorhande Musikdatei auszuwählen, welche beim Spielen synchron zum Streckenverlauf abgespielt wird.

Übrigens: Dieses Spiel hat nichts mit Processing zu tun, sondern soll lediglich als Inspiration für generierte Verknüpfung von Musik und Bild dienen.

hier ein schönes Beispiel dafür, wie Ergebnisse von einem Semester Einstieg in Processing aussehen können:
www.processing.diana-lange.de

PImage kreis;
float kreis1X;
float kreis1Y;
float kreis2X;
float kreis2Y;
float kreis3X;
float kreis3Y;
float winkel;

void setup() {
  size(300, 300);
  kreis = loadImage("kreis.png");
}

void draw() {
  background(0);

  kreis1X = cos(winkel) * 20;
  kreis1Y = sin(winkel) * 20;

  kreis2X = cos(winkel + 1) * 20;
  kreis2Y = sin(winkel + 1) * 20;

  kreis3X = cos(-winkel + 2) * 10;
  kreis3Y = sin(-winkel + 2) * 10;

  tint(mouseY, 255, 255);
  image(kreis, kreis1X, kreis1Y);

  tint(mouseY, 255, 255);

  blend(kreis,
  int(kreis2X), int(kreis2Y),
  320, 320,
  int(kreis2X), int(kreis2Y),
  320, 320,
  DIFFERENCE);

  blend(kreis,
  int(kreis3X), int(kreis3Y),
  320, 320,
  int(kreis3X), int(kreis3Y),
  320, 320,
  OVERLAY);

  winkel = winkel + mouseX * 0.0005;
}

Dran denken, das Bild mit dem Kreis (kreis.png) muss in dem data Ordner liegen.

Download: Midi2Text

für PC kann einfach die .exe Datei benutzt werden, für alle anderen (Mac, Linux) die .jar.
Wie man dann mit aus den Textdateien Daten ausliesst ist unter anderem in der Lesson 12. Natürlich geben wir auch im Kurs Input dazu, wenn sich jemand in die Richtung bewegen will.

Wir nutzen dabei die von Andreas Schlegel geschriebene Bibliothek controlP5 – ideal für das Erstellen von simplen Benutzeroberflächen.
Nach dem Anlegen der beiden Textfelder im setup(), wird bei ENTER die Funktion controlEvent() aufgerufen. Innerhalb entscheidet die Länge der Text ob diese für die Verbindung zur API genutzt werden. In diesem Fall müssen beide Felder ausgefüllt sein.
Der letzte Schritt besteht im Ändern des ‘ready’ Wertes von false auf true. Dies veranlasst die Bedingung im draw() den eigentlichen Zeichenprozess (das Arbeiten mit den Daten) zu beginnen.

import utils.*;
import lastfm.*;
import controlP5.*;

ControlP5 c5;
Textfield tfName;
Textfield tfPass;
boolean ready = false;

Lastfm fm;

void setup () {
  size (580, 240);
  // Allgemeines ControlP5 Objekt
  c5 = new ControlP5 (this);
  // TextFelder für beide Werte Anlegen
  tfName = c5.addTextfield ("username", 20, 100, 200, 18);
  tfPass = c5.addTextfield ("userpass", 20, 140, 200, 18);
  // Passwort wird im Sternchenmodus angezeigt
  tfPass.setPasswordMode (true);
}

void draw () {
  background (40);
  if (ready) {
    // MAGIC!
  }
}

/**
 * Diese Funktion wird bei jeder ControlP5-Eingabe aufgerufen.
 * Das 'ControlEvent' gibt Aufschluss über den Auslöser und
 * damit über dessen Wert bzw. Zustand. In diesem Fall der Text.
 */
void controlEvent (ControlEvent theEvent) {
  String user = tfName.stringValue ();
  String pass = tfPass.stringValue ();

  // Wenn Textfeldinhalte jeweils länger als 0 sind
  if (user.length () > 0 && pass.length () > 0) {

    // GUI ausblenden
    tfName.hide ();
    tfPass.hide ();
    // API INITIALISIEREN
    fm = new Lastfm (user, pass, "xx", "xx");
    // Startschuss für den draw-Block geben
    ready = true;
  }
}