Creative Technologies Lab | dokuWiki

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

User Tools

Site Tools

Trace:
extras:codikon:p5js:additive-farbmischung

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
extras:codikon:p5js:additive-farbmischung [2025/07/06 07:34] – removed - external edit (Unknown date) 127.0.0.1extras:codikon:p5js:additive-farbmischung [2025/07/06 07:34] (current) – ↷ Links adapted because of a move operation Felix Hardmood Beck
Line 1: Line 1:
 +===== Additive Farbmischung – RGB =====
  
 +<html>
 +  <head>
 +    <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>
 +  <body>
 +    <div id="p5sketch"></div>
 +
 +    <script>
 +      let rSlider, gSlider, bSlider, distanceSlider;
 +
 +      function setup() {
 +        let canvas = createCanvas(600, 550);
 +        canvas.parent("p5sketch");
 +        noStroke();
 +
 +        // Distance-Slider (oben)
 +        distanceSlider = createSlider(0, 200, 100); // 0 = weit auseinander, 200 = volle Überlagerung
 +        distanceSlider.parent("p5sketch");
 +        distanceSlider.class("custom-slider");
 +        distanceSlider.style("width", "550px");
 +        distanceSlider.position(25, 20);
 +
 +        // RGB-Slider (unten)
 +        rSlider = createSlider(0, 255, 255);
 +        rSlider.parent("p5sketch");
 +        rSlider.class("custom-slider");
 +        rSlider.style("width", "150px");
 +        rSlider.position(20, height - 60);
 +
 +        gSlider = createSlider(0, 255, 255);
 +        gSlider.parent("p5sketch");
 +        gSlider.class("custom-slider");
 +        gSlider.style("width", "150px");
 +        gSlider.position(220, height - 60);
 +
 +        bSlider = createSlider(0, 255, 255);
 +        bSlider.parent("p5sketch");
 +        bSlider.class("custom-slider");
 +        bSlider.style("width", "150px");
 +        bSlider.position(420, height - 60);
 +      }
 +
 +      function draw() {
 +        background(0);
 +
 +        let r = rSlider.value();
 +        let g = gSlider.value();
 +        let b = bSlider.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;
 +        let cx = width / 2;
 +        let cy = height / 2 - 30;
 +
 +        let xR = cx;
 +        let yR = cy - d;
 +
 +        let xG = cx - d * cos(PI / 6);
 +        let yG = cy + d * sin(PI / 6);
 +
 +        let xB = cx + d * cos(PI / 6);
 +        let yB = cy + d * sin(PI / 6);
 +
 +        blendMode(ADD);
 +        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);
 +
 +        fill(255);
 +        textSize(14);
 +        text("Überlagerung: " + sliderVal + " / 200", 20, 15);
 +        text("Red: " + r, 20, height - 10);
 +        text("Green: " + g, 220, height - 10);
 +        text("Blue: " + b, 420, height - 10);
 +      }
 +    </script>
 +  </body>
 +</html>
 +
 +
 +===== Erklärung der additiven Farbmischung =====
 +
 +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 (RGB-Farbmodell):
 +  * Die Primärfarben der additiven Farbmischung sind:
 +    * Rot
 +    * Grün
 +    * Blau
 +
 +
 +Werden zwei dieser Farben überlagert, entstehen die Sekundärfarben:
 +  * Rot + Grün = Gelb
 +  * Rot + Blau = Magenta
 +  * Grün + Blau = Cyan
 +  * Werden alle drei Primärfarben mit voller Intensität kombiniert => Weißes Licht
 +  * Wird kein Licht ausgesendet (alle Werte = 0) => Schwarz (dunkelste Stufe)
 +
 +Siehe auch [[extras:codikon:p5js:subtraktive-farbmischung|subtraktiven Farbmischung auf Basis von CMY]] (cyan, magenta, yellow).
 +===== Beispiel p5.js Code =====
 +
 +<code>
 +let rSlider, gSlider, bSlider, distanceSlider;
 +
 +function setup() {
 +  createCanvas(600, 550);
 +  noStroke();
 +
 +  // Distance-Slider (oben): 0 = weit auseinander, 200 = vollständig überlagert
 +  distanceSlider = createSlider(0, 200, 100);
 +  distanceSlider.position(25, 20);
 +  distanceSlider.style("width", "550px");
 +
 +  // RGB-Slider (unten)
 +  rSlider = createSlider(0, 255, 255);
 +  rSlider.position(20, height - 60);
 +  rSlider.style("width", "150px");
 +
 +  gSlider = createSlider(0, 255, 255);
 +  gSlider.position(220, height - 60);
 +  gSlider.style("width", "150px");
 +
 +  bSlider = createSlider(0, 255, 255);
 +  bSlider.position(420, height - 60);
 +  bSlider.style("width", "150px");
 +}
 +
 +function draw() {
 +  background(0);
 +
 +  let r = rSlider.value();
 +  let g = gSlider.value();
 +  let b = bSlider.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 cx = width / 2;
 +  let cy = height / 2 - 30;
 +
 +  // Positionen im gleichseitigen Dreieck
 +  let xR = cx;
 +  let yR = cy - d;
 +
 +  let xG = cx - d * cos(PI / 6);
 +  let yG = cy + d * sin(PI / 6);
 +
 +  let xB = cx + d * cos(PI / 6);
 +  let yB = cy + d * sin(PI / 6);
 +
 +  // Additive Farbmischung
 +  blendMode(ADD);
 +  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);
 +
 +  // Textanzeige
 +  fill(255);
 +  textSize(14);
 +  text("Überlagerung: " + sliderVal + " / 200", 20, 15);
 +  text("Red: " + r, 20, height - 10);
 +  text("Green: " + g, 220, height - 10);
 +  text("Blue: " + b, 420, height - 10);
 +}
 +</code>