Differences

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

--- code:p5js:carnovsky [2025/03/21 13:13] – Felix Hardmood Beck
+++ code:p5js:carnovsky [2025/03/21 13:29] (current) – Felix Hardmood Beck
@@ Line 1: / Line 1: @@
-===== RGB-Collage mit dynamischem Farbwechsel =====
+===== RGB-Collage mit zufälligem Farb- und Ebenenwechsel =====
 <html>
@@ Line 10: / 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 26: / 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 38: / 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>
@@ Line 57: / Line 72: @@
 </html>
-Der obere p5.js-Sketch visualisiert eine digitale Bildkomposition nach dem Prinzip der RGB-Collagen, wie sie vom Künstlerduo [[https://www.carnovsky.com/works.htm|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.
+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 =====
-  * Zu Beginn werden drei kontrastreiche Bilder aus dem Internet geladen.
+  * Drei Bilder werden aus dem Web geladen und zentral überlagert dargestellt.
-  * Jedes dieser Bilder wird zentriert auf die Zeichenfläche gezeichnet.
+  * Jedes Bild erhält bei jedem Klick **zufällig** eine der drei RGB-Farben (Rot, Grün oder Blau).
-  * Mittels der Funktion `tint()` in p5.js erhält jedes Bild eine transparente RGB-Farbe:
+  * Die Reihenfolge, in der die Bilder gezeichnet werden (also die Ebenenhierarchie), wird ebenfalls bei jedem Klick **zufällig neu gemischt**.
-    * Bild 1 → Rot (255, 0, 0)
+  * Durch `tint()` werden die Bilder mit halbtransparenter Farbe überlagert, wodurch sich additive Farbmischungen ergeben.
-    * 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.
 ===== Interaktive Komponente =====
-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.
+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.
-Das Zusammenspiel von Farbe und Motiv wird so dynamisch erfahrbar gemacht.
 ===== Ziel und ästhetisches Prinzip =====
-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.
+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);
+  }
+}
-Das Prinzip eignet sich besonders zur Analyse farbpsychologischer Wirkung und zur Gestaltung visuell komplexer Kompositionen mit Farbcodierung.
+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>