Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools

Trace: • carnovsky • gestaltrule_06
code:p5js:carnovsky

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
code:p5js:carnovsky [2025/03/21 13:16] – [Beispiel Code p5.JS] Felix Hardmood Beckcode: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> <html>
Line 10: Line 9:
  
     <script>     <script>
-      let imgR, imgG, imgB; +      let images = []; 
-      let layerColors;+      let imageOrder = []; 
 +      let colors = [];
  
       function preload() {       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();         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);         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() {       function mousePressed() {
-        // Farben zyklisch verschieben +        assignRandomColors(); 
-        layerColors.unshift(layerColors.pop());+        shuffleImageOrder();
         redraw();         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>     </script>
Line 57: Line 72:
 </html> </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 ===== ===== 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 ===== ===== 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 ===== ===== 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.
- +
-Das Prinzip eignet sich besonders zur Analyse farbpsychologischer Wirkung und zur Gestaltung visuell komplexer Kompositionen mit Farbcodierung. +
  
 ===== Beispiel p5.js Code ===== ===== Beispiel p5.js Code =====
  
 <code> <code>
- 
-let imgR, imgG, imgB; 
 let images = []; let images = [];
 +let imageOrder = [];
 +let colors = [];
 +
 +function preload() {
 +  images[0] = loadImage('https://picsum.photoslet images = [];
 +let imageOrder = [];
 let colors = []; let colors = [];
  
 function preload() { function preload() {
-  // Drei Bilder von picsum.photos (CORS-kompatibel) +  // CORS-kompatible Bilder von picsum.photos 
-  images[0] = loadImage('https://picsum.photos/id/237/800/800'); // Hund +  images[0] = loadImage('https://picsum.photos/id/237/800/800'); // Bild 1 
-  images[1] = loadImage('https://picsum.photos/id/238/800/800'); // Natur +  images[1] = loadImage('https://picsum.photos/id/238/800/800'); // Bild 2 
-  images[2] = loadImage('https://picsum.photos/id/239/800/800'); // Stadt+  images[2] = loadImage('https://picsum.photos/id/239/800/800'); // Bild 3
 } }
  
Line 102: Line 113:
   noLoop();   noLoop();
  
-  // Anfangsfarben: Rot, Grün, Blau +  assignRandomColors(); 
-  colors = [ +  shuffleImageOrder();
-    [255, 0, 0],   // für Bild 0 +
-    [0, 255, 0],   // für Bild 1 +
-    [0, 0, 255]    // für Bild 2 +
-  ];+
 } }
  
Line 115: Line 122:
  
   for (let i = 0; i < 3; i++) {   for (let i = 0; i < 3; i++) {
-    tint(colors[i][0], colors[i][1], colors[i][2], 180); +    let imgIndex = imageOrder[i]; 
-    image(images[i], 0, 0);+    let col = colors[imgIndex]; 
 +    tint(col[0], col[1], col[2], 170); 
 +    image(images[imgIndex], 0, 0, width, height);
   }   }
 } }
  
 function mousePressed() { function mousePressed() {
-  // Farben zyklisch verschieben +  assignRandomColors(); 
-  colors.unshift(colors.pop());+  shuffleImageOrder();
   redraw();   redraw();
 } }
  
-</code>+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>
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/code/p5js/carnovsky.1742562975.txt.gz · Last modified: 2025/03/21 13:16 by Felix Hardmood Beck