Differences

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

--- code:p5js:carnovsky [2025/03/21 13:08] – created Felix Hardmood Beck
+++ code:p5js:carnovsky [2025/03/21 13:29] (current) – Felix Hardmood Beck
@@ Line 1: / Line 1: @@
+===== RGB-Collage mit zufälligem Farb- und Ebenenwechsel =====
 <html>
   <head>
@@ Line 7: / Line 9: @@
     <script>
-      let imgR, imgG, imgB;
+      let images = [];
-      let layerColors;
+      let imageOrder = [];
+      let colors = [];
       function preload() {
-        // Drei CORS-kompatible Bilder von picsum.photos
+        images[0] = loadImage('https://picsum.photos/id/237/800/800'); // Bild 1
-        imgR = loadImage('https://picsum.photos/id/237/800/800'); // Hund
+        images[1] = loadImage('https://picsum.photos/id/238/800/800'); // Bild 2
-        imgG = loadImage('https://picsum.photos/id/238/800/800'); // Natur
+        images[2] = loadImage('https://picsum.photos/id/239/800/800'); // Bild 3
-        imgB = loadImage('https://picsum.photos/id/239/800/800'); // Stadt
       }
@@ Line 23: / Line 25: @@
         noLoop();
-        // Initiale Farben: Rot, Grün, Blau
+        assignRandomColors();
-        layerColors = [
+        shuffleImageOrder();
-          [255, 0, 0],   // imgR
-          [0, 255, 0],   // imgG
-          [0, 0, 255]    // imgB
-        ];
       }
@@ Line 35: / Line 33: @@
         translate(width / 2, height / 2);
-        tint(...layerColors[0], 180);
+        for (let i = 0; i < 3; i++) {
-        image(imgR, 0, 0);
+          let imgIndex = imageOrder[i];
+          let col = colors[imgIndex];
-        tint(...layerColors[1], 180);
+          tint(col[0], col[1], col[2], 170);
-        image(imgG, 0, 0);
+          image(images[imgIndex], 0, 0, width, height);
+        }
-        tint(...layerColors[2], 180);
-        image(imgB, 0, 0);
       }
       function mousePressed() {
-        // Farben zyklisch verschieben
+        assignRandomColors();
-        layerColors.unshift(layerColors.pop());
+        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>