Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools

Trace: • the_green_weave • additive-farbmischung
code:p5js:additive-farbmischung

Differences

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

Link to this comparison view

Next revision		Previous revision
code:p5js:additive-farbmischung [2025/04/08 14:39] – created Felix Hardmood Beckcode:p5js:additive-farbmischung [2025/04/08 15:01] (current) – [Erklärung der additiven Farbmischung] Felix Hardmood Beck
Line 4: Line 4:
   <head>   <head>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>     <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
 +    <style>
 +      #p5sketch {
 +        position: relative;
 +        width: 600px;
 +        height: 550px;
 +        margin-left: 0;
 +      }
 +
 +      canvas {
 +        position: absolute;
 +        left: 0;
 +        top: 0;
 +        z-index: 0;
 +      }
 +
 +      .custom-slider {
 +        position: absolute;
 +        -webkit-appearance: none;
 +        height: 10px;
 +        background: #888;
 +        border-radius: 5px;
 +        outline: none;
 +        z-index: 1;
 +      }
 +
 +      .custom-slider::-webkit-slider-thumb {
 +        -webkit-appearance: none;
 +        width: 16px;
 +        height: 16px;
 +        background: #fff;
 +        border-radius: 50%;
 +        cursor: pointer;
 +        border: 2px solid #000;
 +      }
 +
 +      .custom-slider::-moz-range-thumb {
 +        width: 16px;
 +        height: 16px;
 +        background: #fff;
 +        border-radius: 50%;
 +        cursor: pointer;
 +        border: 2px solid #000;
 +      }
 +    </style>
   </head>   </head>
   <body>   <body>
Line 9: Line 53:
  
     <script>     <script>
-let rSlider, gSlider, bSlider, distanceSlider;+      let rSlider, gSlider, bSlider, distanceSlider;
  
-function setup() { +      function setup() { 
-  createCanvas(600, 550); +        let canvas = createCanvas(600, 550); 
-  noStroke();+        canvas.parent("p5sketch"); 
 +        noStroke();
  
-  // ➤ Benutzerdefiniertes CSS einfügen +        // Distance-Slider (oben) 
-  const style = createElement('style', ` +        distanceSlider = createSlider(0, 200, 100); // 0 = weit auseinander, 200 = volle Überlagerung 
-    .custom-slider { +        distanceSlider.parent("p5sketch"); 
-      -webkit-appearance: none; +        distanceSlider.class("custom-slider"); 
-      width: 100%; +        distanceSlider.style("width", "550px"); 
-      height: 10px; +        distanceSlider.position(25, 20);
-      background: #888; +
-      border-radius: 5px; +
-      outline: none; +
-    }+
  
-    .custom-slider::-webkit-slider-thumb { +        // RGB-Slider (unten) 
-      -webkit-appearance: none; +        rSlider = createSlider(0, 255, 255); 
-      appearance: none; +        rSlider.parent("p5sketch"); 
-      width: 16px; +        rSlider.class("custom-slider"); 
-      height: 16px; +        rSlider.style("width", "150px"); 
-      background: #fff; +        rSlider.position(20, height - 60);
-      border-radius: 50%; +
-      cursor: pointer; +
-      border: 2px solid #000; +
-    }+
  
-    .custom-slider::-moz-range-thumb { +        gSlider = createSlider(0, 255, 255); 
-      width: 16px; +        gSlider.parent("p5sketch"); 
-      height: 16px; +        gSlider.class("custom-slider"); 
-      background: #fff; +        gSlider.style("width", "150px"); 
-      border-radius: 50%; +        gSlider.position(220, height - 60);
-      cursor: pointer; +
-      border: 2px solid #000; +
-    } +
-  `); +
-  style.parent(document.head);+
  
-  // Distance-Slider (oben) +        bSlider = createSlider(0, 255, 255); 
-  distanceSlider = createSlider(50, 200, 115); +        bSlider.parent("p5sketch"); 
-  distanceSlider.position(20, 20); +        bSlider.class("custom-slider"); 
-  distanceSlider.style('width', '550px'); +        bSlider.style("width", "150px"); 
-  distanceSlider.addClass('custom-slider');+        bSlider.position(420, height - 60); 
 +      }
  
-  // RGB-Slider (unten) +      function draw() { 
-  rSlider = createSlider(0, 255, 255); +        background(0);
-  rSlider.position(20, height - 80); +
-  rSlider.style('width', '150px'); +
-  rSlider.addClass('custom-slider');+
  
-  gSlider = createSlider(0, 255, 255); +        let r = rSlider.value(); 
-  gSlider.position(220, height - 80); +        let g = gSlider.value(); 
-  gSlider.style('width', '150px'); +        let b = bSlider.value();
-  gSlider.addClass('custom-slider');+
  
-  bSlider = createSlider(0, 255, 255); +        // Invertierter Abstand: bei Slider-Wert 200 → d = 0 (volle Überlagerung) 
-  bSlider.position(420, height - 80); +        let sliderVal = distanceSlider.value(); 
-  bSlider.style('width', '150px'); +        let maxDistance = 200; 
-  bSlider.addClass('custom-slider'); +        let d = maxDistance - sliderVal;
-}+
  
-function draw() { +        let radius = 200; 
-  background(0);+        let cx = width / 2; 
 +        let cy = height / 2 - 30;
  
-  let r = rSlider.value(); +        let xR = cx; 
-  let g = gSlider.value(); +        let yR = cy - d;
-  let b = bSlider.value(); +
-  let d = distanceSlider.value();+
  
-  let radius = 200; +        let xG = cx - d * cos(PI / 6); 
-  let cx = width / 2; +        let yG = cy + d * sin(PI / 6);
-  let cy = height / 2 - 30;+
  
-  let xR = cx; +        let xB = cx + d * cos(PI / 6); 
-  let yR = cy - d;+        let yB = cy + d * sin(PI / 6);
  
-  let xG = cx - d * cos(PI / 6); +        blendMode(ADD); 
-  let yG = cy + d * sin(PI / 6);+        fill(r, 0, 0); 
 +        ellipse(xR, yR, radius); 
 +        fill(0, g, 0); 
 +        ellipse(xG, yG, radius); 
 +        fill(0, 0, b); 
 +        ellipse(xB, yB, radius); 
 +        blendMode(BLEND);
  
-  let xB = cx + d * cos(PI / 6); +        fill(255); 
-  let yB = cy + d * sin(PI / 6); +        textSize(14); 
- +        text("Überlagerung: " + sliderVal + " / 200", 20, 15); 
-  blendMode(ADD); +        text("Red: " + r, 20, height - 10); 
-  fill(r, 0, 0); +        text("Green: " + g, 220, height - 10); 
-  ellipse(xR, yR, radius); +        text("Blue: " + b, 420, height - 10); 
-  fill(0, g, 0); +      }
-  ellipse(xG, yG, radius); +
-  fill(0, 0, b); +
-  ellipse(xB, yB, radius); +
-  blendMode(BLEND); +
- +
-  fill(255); +
-  textSize(14); +
-  text('Distance: ' + d, 20, 15); +
-  text('Red: ' + r, 20, height - 20); +
-  text('Green: ' + g, 220, height - 20); +
-  text('Blue: ' + b, 420, height - 20); +
-}+
     </script>     </script>
   </body>   </body>
Line 117: Line 137:
 Additive Farbmischung ist ein physikalisches Prinzip der Farberzeugung, bei dem Licht verschiedener Farben übereinander projiziert wird. Es basiert auf der Addition von Lichtanteilen und ist grundlegend für alle farberzeugenden Systeme, die mit selbstleuchtenden Quellen arbeiten – wie Monitore, Displays, Projektoren oder Lichtinstallationen. Durch additive Farbmischung wird jede Bildfarbe durch Überlagerung der RGB-Kanäle erzeugt, wobei die Intensität jedes Kanals typischerweise von 0 bis 255 abgestuft wird. Additive Farbmischung ist ein physikalisches Prinzip der Farberzeugung, bei dem Licht verschiedener Farben übereinander projiziert wird. Es basiert auf der Addition von Lichtanteilen und ist grundlegend für alle farberzeugenden Systeme, die mit selbstleuchtenden Quellen arbeiten – wie Monitore, Displays, Projektoren oder Lichtinstallationen. Durch additive Farbmischung wird jede Bildfarbe durch Überlagerung der RGB-Kanäle erzeugt, wobei die Intensität jedes Kanals typischerweise von 0 bis 255 abgestuft wird.
  
-Grundprinzipien der additiven Farbmischung:+Grundprinzipien der additiven Farbmischung (RGB-Farbmodell):
   * Die Primärfarben der additiven Farbmischung sind:   * Die Primärfarben der additiven Farbmischung sind:
     * Rot     * Rot
     * Grün     * Grün
     * Blau     * Blau
-(RGB-Farbmodell)+
  
 Werden zwei dieser Farben überlagert, entstehen die Sekundärfarben: Werden zwei dieser Farben überlagert, entstehen die Sekundärfarben:
Line 131: Line 151:
   * Wird kein Licht ausgesendet (alle Werte = 0) => Schwarz (dunkelste Stufe)   * Wird kein Licht ausgesendet (alle Werte = 0) => Schwarz (dunkelste Stufe)
  
 +Siehe auch [[code:p5js:subtraktive-farbmischung|subtraktiven Farbmischung auf Basis von CMY]] (cyan, magenta, yellow).
 ===== Beispiel p5.js Code ===== ===== Beispiel p5.js Code =====
  
Line 141: Line 161:
   noStroke();   noStroke();
  
-  // ➤ Benutzerdefiniertes CSS einfügen +  // Distance-Slider (oben): 0 = weit auseinander, 200 = vollständig überlagert 
-  const style = createElement('style', ` +  distanceSlider = createSlider(0, 200, 100); 
-    .custom-slider { +  distanceSlider.position(25, 20); 
-      -webkit-appearance: none; +  distanceSlider.style("width", "550px");
-      width: 100%; +
-      height: 10px; +
-      background: #888; +
-      border-radius: 5px; +
-      outline: none; +
-    } +
- +
-    .custom-slider::-webkit-slider-thumb { +
-      -webkit-appearance: none; +
-      appearance: none; +
-      width: 16px; +
-      height: 16px; +
-      background: #fff; +
-      border-radius: 50%; +
-      cursor: pointer; +
-      border: 2px solid #000; +
-    } +
- +
-    .custom-slider::-moz-range-thumb { +
-      width: 16px; +
-      height: 16px; +
-      background: #fff; +
-      border-radius: 50%; +
-      cursor: pointer; +
-      border: 2px solid #000; +
-    } +
-  `); +
-  style.parent(document.head); +
- +
-  // Distance-Slider (oben) +
-  distanceSlider = createSlider(50, 200, 115); +
-  distanceSlider.position(20, 20); +
-  distanceSlider.style('width', '550px'); +
-  distanceSlider.addClass('custom-slider');+
  
   // RGB-Slider (unten)   // RGB-Slider (unten)
   rSlider = createSlider(0, 255, 255);   rSlider = createSlider(0, 255, 255);
-  rSlider.position(20, height - 80); +  rSlider.position(20, height - 60); 
-  rSlider.style('width', '150px'); +  rSlider.style("width", "150px");
-  rSlider.addClass('custom-slider');+
  
   gSlider = createSlider(0, 255, 255);   gSlider = createSlider(0, 255, 255);
-  gSlider.position(220, height - 80); +  gSlider.position(220, height - 60); 
-  gSlider.style('width', '150px'); +  gSlider.style("width", "150px");
-  gSlider.addClass('custom-slider');+
  
   bSlider = createSlider(0, 255, 255);   bSlider = createSlider(0, 255, 255);
-  bSlider.position(420, height - 80); +  bSlider.position(420, height - 60); 
-  bSlider.style('width', '150px'); +  bSlider.style("width", "150px");
-  bSlider.addClass('custom-slider');+
 } }
  
Line 203: Line 186:
   let g = gSlider.value();   let g = gSlider.value();
   let b = bSlider.value();   let b = bSlider.value();
-  let d = distanceSlider.value();+ 
 +  // Umgekehrte Distanz: Max-Wert (200) → volle Überlagerung (d = 0) 
 +  let sliderVal = distanceSlider.value(); 
 +  let maxDistance = 200; 
 +  let d = maxDistance - sliderVal;
  
   let radius = 200;   let radius = 200;
Line 209: Line 196:
   let cy = height / 2 - 30;   let cy = height / 2 - 30;
  
 +  // Positionen im gleichseitigen Dreieck
   let xR = cx;   let xR = cx;
   let yR = cy - d;   let yR = cy - d;
Line 218: Line 206:
   let yB = cy + d * sin(PI / 6);   let yB = cy + d * sin(PI / 6);
  
 +  // Additive Farbmischung
   blendMode(ADD);   blendMode(ADD);
   fill(r, 0, 0);   fill(r, 0, 0);
Line 227: Line 216:
   blendMode(BLEND);   blendMode(BLEND);
  
 +  // Textanzeige
   fill(255);   fill(255);
   textSize(14);   textSize(14);
-  text('Distance: ' + d, 20, 15); +  text("Überlagerung: " + sliderVal + " / 200", 20, 15); 
-  text('Red: ' + r, 20, height - 20); +  text("Red: " + r, 20, height - 10); 
-  text('Green: ' + g, 220, height - 20); +  text("Green: " + g, 220, height - 10); 
-  text('Blue: ' + b, 420, height - 20);+  text("Blue: " + b, 420, height - 10);
 } }
 </code> </code>
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/code/p5js/additive-farbmischung.1744123187.txt.gz · Last modified: 2025/04/08 14:39 by Felix Hardmood Beck