Differences

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

--- code:p5js:subtraktive-farbmischung [2025/04/08 14:59] – created Felix Hardmood Beck
+++ code:p5js:subtraktive-farbmischung [2025/04/08 15:04] (current) – Felix Hardmood Beck
@@ Line 60: / Line 60: @@
         noStroke();
-        // Distance-Slider (oben)
         distanceSlider = createSlider(0, 200, 100);
         distanceSlider.parent("p5sketch-subtraktiv");
@@ Line 67: / Line 66: @@
         distanceSlider.position(25, 20);
-        // CMY-Slider (Prozent: 0–100)
         cSlider = createSlider(0, 100, 100);
         cSlider.parent("p5sketch-subtraktiv");
@@ Line 90: / Line 88: @@
         background(255);
-        // Prozentwerte auslesen
         let cPercent = cSlider.value();
         let mPercent = mSlider.value();
         let yPercent = ySlider.value();
-        // Umrechnung: 0 % = 255 (hell), 100 % = 0 (vollfarbig)
         let c = map(cPercent, 0, 100, 255, 0);
         let m = map(mPercent, 0, 100, 255, 0);
@@ Line 117: / Line 113: @@
         let yY = cy + d * sin(PI / 6);
-        blendMode(MULTIPLY); // Subtraktive Farbmischung
+        blendMode(MULTIPLY);
-        fill(c, 255, 255); // Cyan-Filter
+        fill(c, 255, 255); // Cyan
         ellipse(xC, yC, radius);
-        fill(255, m, 255); // Magenta-Filter
+        fill(255, m, 255); // Magenta
         ellipse(xM, yM, radius);
-        fill(255, 255, y); // Yellow-Filter
+        fill(255, 255, y); // Yellow
         ellipse(xY, yY, radius);
@@ Line 140: / Line 136: @@
   </body>
 </html>
+===== Erklärung der subtraktiven Farbmischung =====
+Die **subtraktive Farbmischung** beschreibt die Farberzeugung durch das **Entziehen (Subtrahieren) von Licht**. Sie ist das zentrale Prinzip bei der Arbeit mit **Pigmenten, Tinten, Druckfarben und transparenten Farbschichten**.
+Im Gegensatz zur additiven Mischung, bei der Lichtquellen addiert werden, basiert die subtraktive Mischung auf reflektiertem Licht: Ein Körper erscheint farbig, weil bestimmte Wellenlängen vom Material **absorbiert** und andere **reflektiert** werden.
+**Primärfarben** der subtraktiven Mischung (CMY-Modell):
+  * Cyan
+  * Magenta
+  * Yellow
+**Sekundärfarben** (durch Überlagerung):
+  * Cyan + Magenta = Blau
+  * Cyan + Yellow = Grün
+  * Magenta + Yellow = Rot
+  * Cyan + Magenta + Yellow = Schwarz (idealerweise, eher ein sehr dunkles braun)
+Bei realen Materialien ergibt die vollständige Überlagerung meist ein **dunkles Grau oder Braun**, da Pigmente keine idealen Filter sind.
+Diese Mischung wird im modernen Farbdruck (z. B. Inkjet, Offset) durch das **CMYK-Modell** ergänzt, wobei „K“ für den Schwarzkanal steht.
+===== Beispiel p5.js Code (CMY in 0–100 %) =====
+<code>
+let cSlider, mSlider, ySlider, distanceSlider;
+function setup() {
+  createCanvas(600, 550);
+  noStroke();
+  distanceSlider = createSlider(0, 200, 100);
+  distanceSlider.position(25, 20);
+  distanceSlider.style("width", "550px");
+  cSlider = createSlider(0, 100, 100);
+  cSlider.position(20, height - 60);
+  cSlider.style("width", "150px");
+  mSlider = createSlider(0, 100, 100);
+  mSlider.position(220, height - 60);
+  mSlider.style("width", "150px");
+  ySlider = createSlider(0, 100, 100);
+  ySlider.position(420, height - 60);
+  ySlider.style("width", "150px");
+}
+function draw() {
+  background(255);
+  let cPercent = cSlider.value();
+  let mPercent = mSlider.value();
+  let yPercent = ySlider.value();
+  let c = map(cPercent, 0, 100, 255, 0);
+  let m = map(mPercent, 0, 100, 255, 0);
+  let y = map(yPercent, 0, 100, 255, 0);
+  let d = 200 - distanceSlider.value();
+  let radius = 200;
+  let cx = width / 2;
+  let cy = height / 2 - 30;
+  let xC = cx;
+  let yC = cy - d;
+  let xM = cx - d * cos(PI / 6);
+  let yM = cy + d * sin(PI / 6);
+  let xY = cx + d * cos(PI / 6);
+  let yY = cy + d * sin(PI / 6);
+  blendMode(MULTIPLY);
+  fill(c, 255, 255);
+  ellipse(xC, yC, radius);
+  fill(255, m, 255);
+  ellipse(xM, yM, radius);
+  fill(255, 255, y);
+  ellipse(xY, yY, radius);
+  blendMode(BLEND);
+  fill(0);
+  textSize(14);
+  text("Überlagerung: " + distanceSlider.value() + " / 200", 20, 15);
+  text("Cyan: " + cPercent + "%", 20, height - 10);
+  text("Magenta: " + mPercent + "%", 220, height - 10);
+  text("Yellow: " + yPercent + "%", 420, height - 10);
+}
+</code>