Creative Technologies Lab | dokuWiki

Der obere p5.js-Sketch visualisiert eine digitale Bildkomposition nach dem Prinzip der RGB-Collagen, wie sie vom Künstlerduo Carnovsky bekannt sind. Dabei werden drei verschiedene Bilder übereinandergelegt, wobei jedem Bild ein definierter Farbkanal zugewiesen ist. In unserem Beispiel sind dies Rot, Grün oder Blau. Diese farbliche Trennung erzeugt eine visuelle Mehrschichtigkeit, bei der bestimmte Bildbereiche je nach Farbfilter dominanter oder zurückhaltender erscheinen.

• Zu Beginn werden drei kontrastreiche Bilder aus dem Internet geladen.
• Jedes dieser Bilder wird zentriert auf die Zeichenfläche gezeichnet.
• Mittels der Funktion `tint()` in p5.js erhält jedes Bild eine transparente RGB-Farbe:
  • Bild 1 → Rot (255, 0, 0)
  • Bild 2 → Grün (0, 255, 0)
  • Bild 3 → Blau (0, 0, 255)
• Durch die Überlagerung entsteht ein dichter, farbiger Bildeindruck, bei dem sich die Inhalte gegenseitig durchdringen.

Bei jedem Mausklick auf die Zeichenfläche werden die Farben der drei Layer zyklisch getauscht. Das bedeutet: Das zuerst rot eingefärbte Bild erhält beim nächsten Klick grün, danach blau, usw. Auf diese Weise verändert sich die visuelle Hierarchie der Bildelemente, ohne dass sich die Bildinhalte selbst ändern.

Das Zusammenspiel von Farbe und Motiv wird so dynamisch erfahrbar gemacht.

Das System zeigt, wie stark die Farbzuweisung die Wahrnehmung von Bildebenen beeinflusst. Ähnlich wie bei den analogen RGB-Installationen von Carnovsky mit Licht und Farbfiltern ermöglicht dieser Sketch ein digitales Experiment mit Farbräumen, Sichtbarkeit und Bildschichtung.

Das Prinzip eignet sich besonders zur Analyse farbpsychologischer Wirkung und zur Gestaltung visuell komplexer Kompositionen mit Farbcodierung.

let imgR, imgG, imgB;
let images = [];
let colors = [];

function preload() {
  // Drei Bilder von picsum.photos (CORS-kompatibel)
  images[0] = loadImage('https://picsum.photos/id/237/800/800'); // Hund
  images[1] = loadImage('https://picsum.photos/id/238/800/800'); // Natur
  images[2] = loadImage('https://picsum.photos/id/239/800/800'); // Stadt
}

function setup() {
  createCanvas(800, 800);
  imageMode(CENTER);
  noLoop();

  // Anfangsfarben: Rot, Grün, Blau
  colors = [
    [255, 0, 0],   // für Bild 0
    [0, 255, 0],   // für Bild 1
    [0, 0, 255]    // für Bild 2
  ];
}

function draw() {
  background(0);
  translate(width / 2, height / 2);

  for (let i = 0; i < 3; i++) {
    tint(colors[i][0], colors[i][1], colors[i][2], 180);
    image(images[i], 0, 0);
  }
}

function mousePressed() {
  // Farben zyklisch verschieben
  colors.unshift(colors.pop());
  redraw();
}