Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools

Trace:
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] – ↷ Page moved from codikon:p5js:carnovsky to extras:codikon:p5js:carnovsky Felix Hardmood Beckextras:codikon:p5js:carnovsky [2026/11/10 07:47] (current) – Felix Hardmood Beck
Line 1: Line 1:
-===== RGB-Collage mit zufälligem Farb- und Ebenenwechsel =====+====== Farbige Bildebenen durch Licht trennen ======
  
-<html> +Das Künstlerduo [[https://www.carnovsky.com/RGB.htm|Carnovsky]] nutzt im Projekt „RGB“ farbiges Licht, um überlagerte Bilder getrennt sichtbar zu machen. Das Prinzip lässt sich mit drei Motiven erklären, die in **Cyan, Magenta und Gelb** übereinander auf weißen Grund gedruckt und abwechselnd mit einem roten, grünen oder blauen Strahler beleuchtet werden.
-  <head> +
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script> +
-  </head> +
-  <body> +
-    <div id="p5sketch"></div>+
  
-    <script> +^ Eingeschalteter Strahler ^ Deutlich sichtbare Bildebene ^ 
-      let images = []; +| Rot | Cyan erscheint dunkel. | 
-      let imageOrder = []; +| Grün | Magenta erscheint dunkel. | 
-      let colors = [];+| Blau | Gelb erscheint dunkel. |
  
-      function preload() { +Der Grund ist die **selektive Absorption**: Cyan absorbiert rotes Licht, Magenta grünes und Gelb blaues. Die jeweils anderen beiden Druckfarben reflektieren das eingeschaltete Licht stärker und verlieren dadurch ihren Kontrast zum ebenfalls beleuchteten Hintergrund – sie treten zurück. So bestimmt die Lichtfarbe, welches Motiv hervortritt.
-        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() { +Für eine deutliche Trennung sollte jeweils nur ein Strahler eingeschaltet sein und möglichst wenig Umgebungslicht auf den Druck fallen. Wie vollständig die anderen Ebenen verschwinden, hängt von den Druckfarben und dem Spektrum der Strahler ab.
-        let canvas = createCanvas(800, 800); +
-        canvas.parent("p5sketch"); +
-        imageMode(CENTER); +
-        noLoop();+
  
-        assignRandomColors(); +===== RGB-Collage mit zufälligem Farb- und Ebenenwechsel =====
-        shuffleImageOrder(); +
-      }+
  
-      function draw() { +Der folgende p5.js-Sketch greift das Zusammenspiel von Farbe und überlagerten Motiven als freies digitales Experiment auf. Drei Bilder werden gleichzeitig dargestellt und mit Rot, Grün oder Blau eingefärbt. Bei jedem Klick auf die Zeichenfläche ändern sich die Farbzuweisung und die Zeichenreihenfolge zufällig. Dabei können mehrere Bilder dieselbe Farbe erhalten.
-        background(0); +
-        translate(width / 2, height / 2);+
  
-        for (let i = 0; i < 3; i++) { +<html> 
-          let imgIndex = imageOrder[i]; +<div id="carnovsky-rgb-collage"></div> 
-          let col = colors[imgIndex]; +<script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script> 
-          tint(col[0], col[1], col[2], 170); +<script> 
-          image(images[imgIndex], 0, 0, width, height); +new p5(function (p) { 
-        } +  let images = []; 
-      }+  let imageOrder = []; 
 +  let colors = []; 
 +  const palette = [ 
 +    [255, 0, 0], 
 +    [0, 255, 0], 
 +    [0, 0, 255] 
 +  ];
  
-      function mousePressed() { +  p.preload = function () { 
-        assignRandomColors(); +    images[0] = p.loadImage('https://picsum.photos/id/237/800/800'); 
-        shuffleImageOrder(); +    images[1] = p.loadImage('https://picsum.photos/id/238/800/800'); 
-        redraw(); +    images[2] = p.loadImage('https://picsum.photos/id/239/800/800'); 
-      }+  };
  
-      function assignRandomColors() { +  p.setup = function () { 
-        colors = []; +    const canvas = p.createCanvas(800, 800); 
-        for (let i = 0; i < 3; i++) { +    canvas.style('max-width', '100%'); 
-          let rand = int(random(3)); +    canvas.style('height', 'auto'); 
-          if (rand === 0) { +    canvas.style('display', 'block'); 
-            colors.push([255, 0, 0]); +    canvas.mousePressed(function () { 
-          } else if (rand === 1) { +      assignRandomColors(); 
-            colors.push([0, 255, 0]); +      shuffleImageOrder(); 
-          } else { +      p.redraw(); 
-            colors.push([0, 0, 255]); +    }); 
-          } +    p.imageMode(p.CENTER); 
-        } +    p.noLoop(); 
-      }+    assignRandomColors(); 
 +    shuffleImageOrder(); 
 +  };
  
-      function shuffleImageOrder() { +  p.draw = function () { 
-        imageOrder = [0, 1, 2]; +    p.background(0); 
-        for (let i = imageOrder.length - 1; i > 0; i--) { +    p.translate(p.width / 2, p.height / 2);
-          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.+    for (let i = 0; i < imageOrder.length; i++) { 
 +      const imgIndex = imageOrder[i]; 
 +      const col = colors[imgIndex]; 
 +      p.tint(col[0], col[1], col[2], 170); 
 +      p.image(images[imgIndex], 0, 0, p.width, p.height); 
 +    } 
 +    p.noTint(); 
 +  };
  
-===== Funktionsweise im Detail =====+  function assignRandomColors() { 
 +    colors = images.map(function () { 
 +      return palette[p.floor(p.random(palette.length))]; 
 +    }); 
 +  }
  
-  * Drei Bilder werden aus dem Web geladen und zentral überlagert dargestellt. +  function shuffleImageOrder() { 
-  * Jedes Bild erhält bei jedem Klick **zufällig** eine der drei RGB-Farben (Rot, Grün oder Blau). +    imageOrder = [0, 1, 2]; 
-  * Die Reihenfolge, in der die Bilder gezeichnet werden (also die Ebenenhierarchie), wird ebenfalls bei jedem Klick **zufällig neu gemischt**. +    for (let i = imageOrder.length - 1; i > 0; i--) { 
-  * Durch `tint()` werden die Bilder mit halbtransparenter Farbe überlagert, wodurch sich additive Farbmischungen ergeben.+      const j = p.floor(p.random(i + 1)); 
 +      [imageOrder[i], imageOrder[j]] = [imageOrder[j], imageOrder[i]]; 
 +    } 
 +  } 
 +}, 'carnovsky-rgb-collage'); 
 +</script> 
 +</html>
  
-===== Interaktive Komponente =====+===== Funktionsweise und Interaktion =====
  
-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.+  * Drei Bilder werden aus dem Web geladen und deckungsgleich übereinandergelegt. 
 +  * ''tint()'' färbt jedes Bild mit einer zufällig gewählten RGB-Farbe ein. Der Alphawert 170 von 255 macht die Bilder teilweise transparent. 
 +  * Bei jedem Klick auf die Zeichenfläche werden Farben und Ebenenreihenfolge neu ausgelost. Später gezeichnete Bilder überdecken frühere teilweise und können dadurch stärker hervortreten. 
 +  * Die Motive bleiben gleich; ihre Gewichtung innerhalb der Collage verändert sich.
  
-===== Ziel und ästhetisches Prinzip =====+===== Bezug zu Carnovsky =====
  
-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.+Bei Carnovsky trennt farbiges Licht die Motive eines unveränderten Drucks durch selektive Absorption. Im Sketch verändern sich dagegen die Bildfarben und die Ebenenreihenfolge selbst. Er zeigt daher eine **freie gestalterische Annäherung**, keine physikalische Simulation der beleuchteten CMY-Druckebenen.
  
-===== Beispiel p5.js Code =====+Der Sketch verwendet die normale **Alpha-Überlagerung** von p5.js. ''tint()'' allein erzeugt keine additive Farbmischung; dafür wäre beispielsweise ''blendMode(ADD)'' nötig. Bei einer rein additiven Überlagerung hätte die Zeichenreihenfolge allerdings nicht denselben Einfluss auf die Dominanz der Bilder.
  
-<code> +===== Ziel =====
-let images = []; +
-let imageOrder = []; +
-let colors = [];+
  
-function preload() { +Das Experiment zeigt, wie Farbe, Transparenz und Ebenenreihenfolge die Wahrnehmung identischer Motive verändern. Es eignet sich als Ausgangspunkt für Übungen zu Farbsystemen, Bildkomposition und visueller Hierarchie.
-  images[0] = loadImage('https://picsum.photoslet images = []; +
-let imageOrder = []; +
-let colors = [];+
  
-function preload() { +===== Technischer Hinweis =====
-  // 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() { +Die interaktive Einbettung setzt voraus, dass die DokuWiki-Installation HTML und JavaScript im ''<html>''-Block zulässt. Außerdem müssen die externe p5.js-Datei und die Beispielbilder erreichbar sein. Der vollständige Sketch steht im HTML-Block oben; ein zweites Codebeispiel ist daher nicht erforderlich.
-  createCanvas(800, 800); +
-  imageMode(CENTER); +
-  noLoop();+
  
-  assignRandomColors(); +===== Quellen =====
-  shuffleImageOrder(); +
-}+
  
-function draw() { +  * [[https://www.carnovsky.com/RGB.htm|Carnovsky: RGB]] 
-  background(0); +  * [[https://p5js.org/reference/p5/tint/|p5.js: tint()]] 
-  translate(width / 2, height / 2);+  * [[https://p5js.org/reference/p5/blendMode/|p5.js: blendMode()]]
  
-  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> 
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/pages/extras/codikon/p5js/carnovsky.txt · Last modified: by Felix Hardmood Beck