taralino

Digitale Bilder

Sämtliche Bilder und Abbildungen, die auf einem Bildschirm oder Display angezeigt werden, sind nichts anderes als eine Aneinanderreihung farbige Bildpunkte bzw. Pixel.

Hat ein Bild beispielsweise eine Abmessung von 320 x 240 Pixel, dann sind zur Darstellung des Bildes insgesamt

Farben notwendig, jeweils kodiert anhand der zugehörigen RGB-Werte. Was damit genau gemeint ist und wie dies veranschaulicht werden kann, zeigen die folgenden Anwendungen.

Anwendung

Definition und Darstellung eines Bildes bestehend aus 5 x 3 Pixel anhand von RGB-Werten. (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

Anwendung

Definition und Darstellung eines Bildes bestehend aus 16 x 16 Pixel anhand von RGB-Werten. Die verwendeten Farben werden zunächst definiert und in Variablen gespeichert.

<!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 w = [245,245,245];
var b = [  0,  0,  0];
var g = [128,255,  0];

var M = [
  [w,w,w,w,w,w,w,w,w,w,w,w,w,w,w,w],
  [w,w,w,w,w,b,w,w,b,b,b,w,w,w,w,w],
  [w,w,w,b,b,g,b,b,g,g,g,b,w,w,w,w],
  [w,w,b,g,g,g,b,g,g,g,g,g,b,w,w,w],
  [w,b,g,g,b,g,g,g,g,g,g,g,g,b,w,w],
  [w,b,g,g,g,g,g,g,g,g,g,g,g,g,b,w],
  [w,w,b,b,b,b,b,b,g,b,b,g,b,g,b,w],
  [w,w,w,w,w,w,b,g,b,w,b,g,b,g,b,w],
  [w,w,w,w,w,w,w,b,w,w,w,b,b,g,b,w],
  [w,w,w,w,w,w,w,w,w,w,w,b,g,g,b,w],
  [w,w,w,w,w,w,w,w,w,w,w,b,g,b,w,w],
  [w,w,w,w,w,w,w,w,w,w,b,g,g,b,w,w],
  [w,w,w,w,w,w,w,w,w,b,g,g,b,w,w,w],
  [w,w,w,w,w,w,w,w,b,g,g,b,w,w,w,w],
  [w,w,w,w,w,w,w,w,w,b,b,w,w,w,w,w],
  [w,w,w,w,w,w,w,w,w,w,w,w,w,w,w,w]
];

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

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

Vorschau Download Kopie speichern

Aufgabe

Verändere die Farbe des Chamäleon beispielsweise von Grün in Blau oder Rot. Versuche anschließend, das Tier in Regenbogenfarben einzufärben, etwa so: