taralino

Bilder und Pixel

Wir haben bereits gelernt, dass digitale Bilder nichts anderes sind als eine Aneinanderreihung farbige Bildpunkte bzw. Pixel. Die Farben der Pixel werden dabei jeweils kodiert anhand der zugehörigen RGB-Werte:

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

Was damit genau gemeint ist und wie dies veranschaulicht werden kann, zeigen zur Wiederholung die folgenden Anwendungen.

Beispiel

Definition und Darstellung eines Bildes bestehend aus 3 x 5 Pixel anhand der RGB-Werte. (Hinweis: Die Darstellung wird mit dem Faktor 50 vergrößert.)

<!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 = [
  [[255,  0,  0], [  0,255,  0], [  0,  0,255]],
  [[  0,255,255], [255,  0,255], [255,255,  0]],
  [[255,  0,127], [127,255,  0], [  0,127,255]],
  [[  0,255,127], [127,  0,255], [255,127,  0]],
  [[250,250,250], [127,127,127], [  0,  0,  0]]
];

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

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

Vorschau Download Kopie speichern

Beispiel

Darstellung eines Beispielbildes, dass aus 48 x 96 Pixel besteht.

<!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});

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

Vorschau Download Kopie speichern

Beispiel

Ein weiteres Beispiel zur Veranschaulichung, wie sämtliche Pixel eines Bildes manipuliert werden können: Es wird jeweils der Rot-Anteil der RGB-Definition auf 0 gesetzt.

<!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();

for (var i = 0; i < M.length; i++) {
  for (var j = 0; j < M[i].length; j++) {
    M[i][j][0] = 0;
  };
};

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

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

Vorschau Download Kopie speichern