Creative Technologies Lab | dokuWiki

Der folgende p5.js-Sketch erweitert das Prinzip der RGB-Collagen, wie sie vom Künstlerduo Carnovsky bekannt sind. Drei verschiedene Bilder werden gleichzeitig auf die Zeichenfläche gezeichnet und mit reinen RGB-Farben eingefärbt. Die Besonderheit: Bei jedem Mausklick wird sowohl die Farbzuweisung als auch die Zeichenreihenfolge der Bilder zufällig verändert. Dadurch entstehen immer neue Überlagerungen mit wechselnder visueller Dominanz.

• Drei Bilder werden aus dem Web geladen und zentral überlagert dargestellt.
• Jedes Bild erhält bei jedem Klick zufällig eine der drei RGB-Farben (Rot, Grün oder Blau).
• Die Reihenfolge, in der die Bilder gezeichnet werden (also die Ebenenhierarchie), wird ebenfalls bei jedem Klick zufällig neu gemischt.
• Durch `tint()` werden die Bilder mit halbtransparenter Farbe überlagert, wodurch sich additive Farbmischungen ergeben.

Mit jedem Mausklick auf die Zeichenfläche verändert sich sowohl die Farbe als auch die Sichtbarkeit der Bilder. Dieses Verhalten imitiert das Prinzip von Farbfiltern, wie sie bei Carnovsky verwendet werden. Die Layer verschieben sich visuell, die Wahrnehmung ändert sich, während die zugrunde liegenden Bildmotive gleich bleiben.

Der Sketch demonstriert, wie sich durch einfache Zufallslogik und additive Farbmischung eine visuelle Vielschichtigkeit erzeugen lässt. In Anlehnung an Carnovskys RGB-Arbeiten macht das Projekt sichtbar, wie Farbe, Überlagerung und Reihenfolge das Zusammenspiel von Motiven steuern. Die Methode eignet sich für gestalterische und didaktische Zwecke im Kontext von Farbsystemen, Bildstruktur und Wahrnehmung.

let images = [];
let imageOrder = [];
let colors = [];

function preload() {
  images[0] = loadImage('https://picsum.photoslet images = [];
let imageOrder = [];
let colors = [];

function preload() {
  // CORS-kompatible Bilder von picsum.photos
  images[0] = loadImage('https://picsum.photos/id/237/800/800'); // Bild 1
  images[1] = loadImage('https://picsum.photos/id/238/800/800'); // Bild 2
  images[2] = loadImage('https://picsum.photos/id/239/800/800'); // Bild 3
}

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

  assignRandomColors();
  shuffleImageOrder();
}

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

  for (let i = 0; i < 3; i++) {
    let imgIndex = imageOrder[i];
    let col = colors[imgIndex];
    tint(col[0], col[1], col[2], 170);
    image(images[imgIndex], 0, 0, width, height);
  }
}

function mousePressed() {
  assignRandomColors();
  shuffleImageOrder();
  redraw();
}

function assignRandomColors() {
  colors = [];

  for (let i = 0; i < 3; i++) {
    let rand = int(random(3));
    if (rand === 0) {
      colors.push([255, 0, 0]); // Rot
    } else if (rand === 1) {
      colors.push([0, 255, 0]); // Grün
    } else {
      colors.push([0, 0, 255]); // Blau
    }
  }
}

function shuffleImageOrder() {
  imageOrder = [0, 1, 2];
  for (let i = imageOrder.length - 1; i > 0; i--) {
    let j = floor(random(i + 1));
    [imageOrder[i], imageOrder[j]] = [imageOrder[j], imageOrder[i]];
  }
}