Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools

Trace: • possible_topics
extras:codikon:p5js:carnovsky

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
extras:codikon:p5js:carnovsky [2025/07/06 07:34] – removed - external edit (Unknown date) 127.0.0.1extras:codikon:p5js:carnovsky [2025/07/06 07:34] (current) – ↷ Page moved from codikon:p5js:carnovsky to extras:codikon:p5js:carnovsky Felix Hardmood Beck
Line 1: Line 1:
 +===== 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>