Creative Technologies Lab | dokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== RGB-Collage mit zufälligem Farb- und Ebenenwechsel =====

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
  </head>
  <body>
    <div id="p5sketch"></div>

    <script>
      let images = [];
      let imageOrder = [];
      let colors = [];

      function preload() {
        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() {
        let canvas = createCanvas(800, 800);
        canvas.parent("p5sketch");
        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]);
          } else if (rand === 1) {
            colors.push([0, 255, 0]);
          } else {
            colors.push([0, 0, 255]);
          }
        }
      }

      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]];
        }
      }
    </script>
  </body>
</html>

Der folgende p5.js-Sketch erweitert das Prinzip der RGB-Collagen, wie sie vom Künstlerduo [[https://www.carnovsky.com/works.htm|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.

===== Funktionsweise im Detail =====

  * 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.

===== Interaktive Komponente =====

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.

===== Ziel und ästhetisches Prinzip =====

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.

===== Beispiel p5.js Code =====

<code>
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]];
  }
}
</code>