taralino

Farben invertieren

Wir beginnen eine sehr einfache Funktion der Bildmanipulation, nämlich das Invertieren der Farben (bezogen auf die RGB-Werte). Die Vorgehensweise dazu ist folgende:

Aus einem Pixel mit der RGB-Definition [ R, G, B ] wird [ 255-R, 255-G, 255-B ].

Um ein paar Beispiele zu nennen: Aus Weiß wird Schwarz, aus Rot wird Cyan, aus Gelb wird Blau und aus Hellgrau wird Dunkelgrau.

Beispiel

Im folgenden Quellcode werden die Farben sämtlicher Pixel des Bildes invertiert. 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++) {
    M[i][j][0] = 255 - M[i][j][0];
    M[i][j][1] = 255 - M[i][j][1];
    M[i][j][2] = 255 - M[i][j][2];
  };
};

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

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Verändere anschließend den Quellcode, um folgende Manipulation der Farben vorzunehmen: Aus einem Pixel mit der RGB-Definition [ R, G, B ] wird [ 255-R, G, 0 ].