Creative Technologies Lab | dokuWiki

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:

• Die Primärfarben der additiven Farbmischung sind:
  • Rot
  • Grün
  • Blau

(RGB-Farbmodell)

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)

let rSlider, gSlider, bSlider, distanceSlider;

function setup() {
  createCanvas(600, 550);
  noStroke();

  // ➤ Benutzerdefiniertes CSS einfügen
  const style = createElement('style', `
    .custom-slider {
      -webkit-appearance: none;
      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.style('width', '150px');
  rSlider.addClass('custom-slider');

  gSlider = createSlider(0, 255, 255);
  gSlider.position(220, height - 80);
  gSlider.style('width', '150px');
  gSlider.addClass('custom-slider');

  bSlider = createSlider(0, 255, 255);
  bSlider.position(420, height - 80);
  bSlider.style('width', '150px');
  bSlider.addClass('custom-slider');
}

function draw() {
  background(0);

  let r = rSlider.value();
  let g = gSlider.value();
  let b = bSlider.value();
  let d = distanceSlider.value();

  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('Distance: ' + d, 20, 15);
  text('Red: ' + r, 20, height - 20);
  text('Green: ' + g, 220, height - 20);
  text('Blue: ' + b, 420, height - 20);
}