taralino

Graufilter

In diesem Abschnitt besprechen wir ein sehr einfaches Verfahren der Bildmanipulation, nämlich das Überführen eines farbigen Bildes in ein (graustufiges) Schwarz-Weiß-Bild. Auf ähnliche Art und Weise werden wir anschließend weitere Funktionen präsentieren.

Jede Farbe eines Pixels wird bekannterweise definiert durch drei Zahlen:

R	Rot-Anteil	(ganze) Zahl zwischen 0 und 255
G	Grün-Anteil	(ganze) Zahl zwischen 0 und 255
B	Blau-Anteil	(ganze) Zahl zwischen 0 und 255

Ein Pixel ist genau dann Grau (bzw. Weiß oder Schwarz), falls R, G und B einen identischen Wert haben:

[255, 255, 255]	weißer Pixel
[0, 0, 0]	schwarzer Pixel
[220, 200, 200]	hellgrauer Pixel
[128, 128, 128]	grauer Pixel

Die Idee des Graufilters ist es, jedem Pixel eines farbigen Bildes eine passende Graustufe zuzuweisen. Die Vorgehensweise ist folgende:

Aus einem (farbigen) Pixel mit der RGB-Definition [ R, G, B ] wird [ C, C, C ], wobei C der Mittelwert der drei Zahlen R, G und B ist:

Hinweis

Um korrekt zu sein, müssen die drei Zahlen des neuen RGB-Wertes möglicherweise gerundet werden, denn der Mittelwert C ist nicht immer ganzzahlig.

Beispiele

Die folgende Tabelle zeigt einige Beispiele:

RGB-Wert (alt)	RGB-Wert (neu)
[240, 0, 0]	[80, 80, 80]
[100, 100, 99]	[100, 100, 100]
[200, 150, 251]	[200, 200, 200]

Beispiel

Im folgenden Quellcode wird der Graufilter auf sämtliche Pixel des Bildes angewandt. 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});

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;
    M[i][j][0] = c;
    M[i][j][1] = c;
    M[i][j][2] = c;
  };
};

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

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Implementiere anschließend keinen Graufilter, sondern einen echten Schwarz-Weiß-Filter: Das manipulierte Bild soll nur aus schwarzen und weißen Pixel bestehen. In Abhängigkeit eines gewissen Schwellwertes (z.B. 128) sollen alle hellgrauen Pixel in Weiß und alle dunkelgrauen Pixel in Schwarz umgewandelt werden.