Differences

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

--- code:p5js:additive-farbmischung [2025/04/08 14:46] – Felix Hardmood Beck
+++ code:p5js:additive-farbmischung [2025/04/08 15:01] (current) – [Erklärung der additiven Farbmischung] Felix Hardmood Beck
@@ Line 61: / Line 61: @@
         // Distance-Slider (oben)
-        distanceSlider = createSlider(50, 200, 115);
+        distanceSlider = createSlider(0, 200, 100); // 0 = weit auseinander, 200 = volle Überlagerung
         distanceSlider.parent("p5sketch");
         distanceSlider.class("custom-slider");
@@ Line 93: / Line 93: @@
         let g = gSlider.value();
         let b = bSlider.value();
-        let d = distanceSlider.value();
+        // Invertierter Abstand: bei Slider-Wert 200 → d = 0 (volle Überlagerung)
+        let sliderVal = distanceSlider.value();
+        let maxDistance = 200;
+        let d = maxDistance - sliderVal;
         let radius = 200;
@@ Line 119: / Line 123: @@
         fill(255);
         textSize(14);
-        text("Distance: " + d, 20, 15);
+        text("Überlagerung: " + sliderVal + " / 200", 20, 15);
         text("Red: " + r, 20, height - 10);
         text("Green: " + g, 220, height - 10);
@@ Line 133: / 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.
-Grundprinzipien der additiven Farbmischung:
+Grundprinzipien der additiven Farbmischung (RGB-Farbmodell):
   * Die Primärfarben der additiven Farbmischung sind:
     * Rot
     * Grün
     * Blau
-(RGB-Farbmodell)
 Werden zwei dieser Farben überlagert, entstehen die Sekundärfarben:
@@ Line 147: / Line 151: @@
   * 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 =====
@@ Line 157: / Line 161: @@
   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)
   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.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.position(420, height - 80);
+  bSlider.position(420, height - 60);
-  bSlider.style('width', '150px');
+  bSlider.style("width", "150px");
-  bSlider.addClass('custom-slider');
 }
@@ Line 219: / Line 186: @@
   let g = gSlider.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;
@@ Line 225: / Line 196: @@
   let cy = height / 2 - 30;
+  // Positionen im gleichseitigen Dreieck
   let xR = cx;
   let yR = cy - d;
@@ Line 234: / Line 206: @@
   let yB = cy + d * sin(PI / 6);
+  // Additive Farbmischung
   blendMode(ADD);
   fill(r, 0, 0);
@@ Line 243: / Line 216: @@
   blendMode(BLEND);
+  // Textanzeige
   fill(255);
   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>