taralino

Einfärben

Eine weitere interessante Funktion ist das Einfärben eines Bildes. Auch hier gibt es sehr unterschiedliche Möglichkeiten und wir präsentieren nur ein ausgewähltes der vielen möglichen Verfahren.

Die Idee ist folgende: Zunächst wird ein Graufilter angewandt, sodass wir ein (graustufiges) Schwarz-Weiß-Bild erhalten. Zudem werden zwei Farben bzw. RGB-Werte gewählt:

A	Farbe, auf die Schwarz abgebildet wird	z.B. [0, 0, 128]
Z	Farbe, auf die Weiß abgebildet wird	z.B. [0, 255, 0]

Dadurch wird definiert, dass schwarze Pixel im manipulierten Bild in der Farbe A und dass weiße Pixel im manipulierten Bild in der Farbe Z dargestellt werden. Für alle Graustufen dazwischen soll entsprechend zwischen den Farben A und Z skaliert werden:

Wir verzichten darauf, die Rechenvorschrift zur Skalierung an dieser Stelle im Detail zu beschreiben. Um diese zu verstehen, kannst du dir den folgenden Quellcode anschauen und damit experimentieren (verändere insbesondere auch die Farben A und Z).

Beispiel

Im folgenden Quellcode wird ein Beispielbild gemäß der Farben A und Z eingefärbt. 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 A = [0,0,128];
var Z = [0,255,0];

for (var i = 0; i < M.length; i++) {
  for (var j = 0; j < M[i].length; j++) {
    var c = (M[i][j][0] + M[i][j][1] + M[i][j][2]) / 3;
    var t = c/255;
    M[i][j][0] = (1-t)*A[0] + t*Z[0];
    M[i][j][1] = (1-t)*A[1] + t*Z[1];
    M[i][j][2] = (1-t)*A[2] + t*Z[2];
  };
};

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

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

Vorschau Download Kopie speichern

Aufgabe

Um die Rechenvorschrift im Quellcode zuvor zu verstehen, kannst du dir die folgenden Fragen beantworten:

Welchen Wert hat die Variable t, falls es sich im Originalbild um einen weißen Pixel handelt?
Welche Farbe hat ein Pixel im manipulierten Bild, falls die Variable t den Wert 1 hat?
Welchen Wert hat die Variable t, falls es sich im Originalbild um einen schwarzen Pixel handelt?
Welche Farbe hat ein Pixel im manipulierten Bild, falls die Variable t den Wert 0 hat?