taralino

Farbton anpassen

In diesem Abschnitt stellen wir eine Funktion vor, die ein klein wenig schwieriger zu verstehen ist als die Verfahren zuvor, nämlich die Korrektur des Farbtons.

Bei der Korrektur des Farbtons werden jeweils zwei der drei Farbanteile miteinander gewichtet. Für den neuen RGB-Wert gilt dann beispielsweise:

R	Gewichtung aus R und G
G	Gewichtung aus G und B
B	Gewichtung aus B und R

Um die Gewichtung rechnerisch zu beschreiben, führen wir folgenden Parameter ein:

w	Zahl zwischen 0.0 und 1.0

Je größer w, desto stärker sollen sich die Farben verändern: Der Farbton eines Pixels zum RGB-Wert

lässt sich nun verändern, indem als neuer RGB-Wert

verwendet wird (wie üblich sind die Zahlen des neuen RGB-Wertes möglicherweise zu runden).

Aufgabe

Beschreibe den neuen RGB-Wert für die Fälle, dass w=0.0 oder w=1.0 gewählt wird.

Beispiel

Im folgenden Quellcode wird der Farbton eines Beispielbildes korrigiert. Anschließend wird das manipulierte Bild dargestellt.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

var M = Picture.example();
Picture.draw(M, {zoom:3});

var w = 0.8;

for (var i = 0; i < M.length; i++) {
  for (var j = 0; j < M[i].length; j++) {
    var x = [M[i][j][0], M[i][j][1], M[i][j][2]];
    M[i][j][0] = (1-w)*x[0] + w*x[2];
    M[i][j][1] = (1-w)*x[1] + w*x[0];
    M[i][j][2] = (1-w)*x[2] + w*x[1];
  };
};

Picture.draw(M, {zoom:3});

</script>
</body>
</html>

Vorschau Download Kopie speichern

Erweiterung

Bislang wurde der Farbton nur in eine Richtung korrigiert, sodass beispielsweise der Rot-Anteil mit dem Grün-Anteil gewichtet wurde. Die Farbtonkorrektur lässt sich entsprechend auch in die andere Richtung beschreiben, sodass beispielsweise der Rot-Anteil mit dem Blau-Anteil gewichtet wird:

R	Gewichtung aus R und B
G	Gewichtung aus G und R
B	Gewichtung aus B und G

Dafür lassen wir auch hier negative Zahlen für den Parameter zu:

w	Zahl zwischen -1.0 und 1.0

Falls w kleiner als 0.0 ist, dann wird der Farbton eines Pixel zum RGB-Wert

korrigiert zu:

Aufgabe

Ergänze den Quellcode im Beispiel zuvor, sodass die Manipulation des Farbtons für alle Zahlen w zwischen -1.0 und 1.0 das gewünschte Ergebnis liefert. Zur Kontrolle kannst du dein Ergebnis anhand der folgenden Anwendung überprüfen.

Anwendung

Nutze den Regler, um den Farbton des Beispielbildes zu verändern.