Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools

Trace:
extras:codikon:p5js:subtraktive-farbmischung

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:subtraktive-farbmischung [2025/07/06 07:34] – removed - external edit (Unknown date) 127.0.0.1extras:codikon:p5js:subtraktive-farbmischung [2025/07/06 07:34] (current) – ↷ Page moved from codikon:p5js:subtraktive-farbmischung to extras:codikon:p5js:subtraktive-farbmischung Felix Hardmood Beck
Line 1: Line 1:
 +===== Subtraktive Farbmischung – CMY (0–100 %) =====
  
 +<html>
 +  <head>
 +    <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
 +    <style>
 +      #p5sketch-subtraktiv {
 +        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>
 +  <body>
 +    <div id="p5sketch-subtraktiv"></div>
 +
 +    <script>
 +      let cSlider, mSlider, ySlider, distanceSlider;
 +
 +      function setup() {
 +        let canvas = createCanvas(600, 550);
 +        canvas.parent("p5sketch-subtraktiv");
 +        noStroke();
 +
 +        distanceSlider = createSlider(0, 200, 100);
 +        distanceSlider.parent("p5sketch-subtraktiv");
 +        distanceSlider.class("custom-slider");
 +        distanceSlider.style("width", "550px");
 +        distanceSlider.position(25, 20);
 +
 +        cSlider = createSlider(0, 100, 100);
 +        cSlider.parent("p5sketch-subtraktiv");
 +        cSlider.class("custom-slider");
 +        cSlider.style("width", "150px");
 +        cSlider.position(20, height - 60);
 +
 +        mSlider = createSlider(0, 100, 100);
 +        mSlider.parent("p5sketch-subtraktiv");
 +        mSlider.class("custom-slider");
 +        mSlider.style("width", "150px");
 +        mSlider.position(220, height - 60);
 +
 +        ySlider = createSlider(0, 100, 100);
 +        ySlider.parent("p5sketch-subtraktiv");
 +        ySlider.class("custom-slider");
 +        ySlider.style("width", "150px");
 +        ySlider.position(420, height - 60);
 +      }
 +
 +      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 sliderVal = distanceSlider.value();
 +        let maxDistance = 200;
 +        let d = maxDistance - sliderVal;
 +
 +        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); // Cyan
 +        ellipse(xC, yC, radius);
 +
 +        fill(255, m, 255); // Magenta
 +        ellipse(xM, yM, radius);
 +
 +        fill(255, 255, y); // Yellow
 +        ellipse(xY, yY, radius);
 +
 +        blendMode(BLEND);
 +
 +        fill(0);
 +        textSize(14);
 +        text("Überlagerung: " + sliderVal + " / 200", 20, 15);
 +        text("Cyan: " + cPercent + "%", 20, height - 10);
 +        text("Magenta: " + mPercent + "%", 220, height - 10);
 +        text("Yellow: " + yPercent + "%", 420, height - 10);
 +      }
 +    </script>
 +  </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>