taralino

Das Grid-Paket

Das Grid-Paket bietet die Möglichkeit, ein Gitternetz bestehend aus farbigen quadratischen Punkten (sogenannter Pixel) darzustellen. Ähnlich zum Canvas-Paket muss auch hier die Zeichenfläche zunächst initialisiert werden:

Grid.init(x, y)

Der Befehl initialisiert die Gitternetz-Zeichenfläche. Dabei definieren die beiden verpflichtenden Argumente x und y jeweils die Anzahl der Pixel entlang der x- und y-Achse.

Als Eigenschaften können beispielsweise die Größe der Darstellung mittels width sowie die Hintergrundfarbe mittels background spezifiziert werden.

Zur Referenz

Um nach der Initialisierung Pixel zu definieren, wird folgender Befehl benötigt:

Grid.pixel(x, y, c)

Der Befehl färbt den Pixel an der Position (x, y) mit der Farbe c ein.

Dabei ist zu beachten, dass von links nach rechts sowie von unten nach oben gezählt wird. Zudem wird stets bei 0 begonnen zu zählen, sodass bei Verwendung der Koordinaten (0,0) der Pixel unten links im Gitternetz eingefärbt wird.

Zur Referenz

Anders als beim Canvas-Paket wird schließlich noch ein weiterer Befehl benötigt, um die zuvor definierten Pixel auch tatsächlich darzustellen. Der Grund liegt darin, dass es bei großen Gitternetzen anderenfalls zu erheblichen Rechenzeiten bei der Darstellung kommen kann.

Grid.draw()

Es wird das zuvor initialisierte Gitternetz samt der zuvor definierten Pixel dargestellt.

Zur Referenz

Beispiel

Initialisierung der Grid-Zeichenfläche und anschließende Darstellung einiger Pixel.

<!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>

Grid.init(6, 4, {width:400, background:"lightgrey"});

Grid.pixel(0, 0, "yellow");
Grid.pixel(5, 0, "red");
Grid.pixel(0, 3, "blue");
Grid.pixel(5, 3, "green");

Grid.draw();

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

Vorschau Download Kopie speichern

Grid als Canvas

Bei sehr großen Grid-Zeichenflächen kann es (aufgrund der Rechenzeiten zur Darstellung) sinnvoll sein, diese in eine Canvas-Zeichenfläche zu überführen. Dazu stehen bei der Initialisierung mittels Grid.init die Optionen style und zoom bereit. Die Verwendung demonstriert das folgende Beispiel. Weitere Details dazu findest du auch hier:

Zur Referenz

Beispiel

Eine Grid-Zeichenfläche als Canvas-Zeichenfläche. Beachte die Optionen style und zoom bei der Initialisierung des Gitternetzes.

<!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 n = 80;

Grid.init(n, n, {style:"canvas", zoom:4, background:"lightgrey"});

for (var j = 0; j < n; j++) {
  for (var i = 0; i < n; i++) {
    if (random(0,8) < 1) Grid.pixel(j, i, "blue");
  };
};

Grid.draw();

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

Vorschau Download Kopie speichern