taralino

Datenfeld von Datenfeldern

Noch etwas komplexer wird der Umgang mit Datenfeldern, wenn die einzelnen Elemente selbst wieder Datenfelder sind:

Datenfeld von Datenfeldern

Wenn die einzelnen Elemente eines Datenfeldes selbst wieder Datenfelder sind, spricht man von zweidimensionalen Datenfeldern. Um auf einzelne Elemente des Datenfeldes zugreifen zu können, sind dann zwei Indizes notwendig.

Beispiel

Die Elemente eines Datenfeldes bestehen jeweils aus Datenfeldern der Länge 2. Genauer werden Mittelpunkte von Kreisen definiert, welche anschließend unter Verwendung einer Schleife dargestellt werden.

<!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 A = [
  [1, 2],
  [6, 1],
  [3, 3],
  [7, 2],
  [4, 1]
];

Canvas.init([0,8], [0,4], {width:480, background:"lightgrey"});

for (var i = 0; i < A.length; i = i+1) {
  Canvas.circle(A[i][0], A[i][1], 0.5, {fill:"blue"});
};

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

Vorschau Download Kopie speichern

Wir sind noch gar nicht darauf eingegangen, wie Datenfelder im Quellcode eingegeben werden sollten:

Datenfeldern und Zeilenumbrüche

Gerade bei der Definition von langen Datenfeldern kann es sinnvoll sein, Zeilenumbrüche im Quellcode zu verwenden. Ob Zeilenumbrüche verwendet werden oder nicht, spielt für den Ablauf des Programms keine Rolle. Entscheidend ist hingegen die richtige Verwendung der eckigen Klammern sowie der Kommata.

Beispiel

Im Beispiel werden zwei Datenfelder mit identischen Daten definiert, einmal mit Zeilenumbrüchen und einmal ohne.

<!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 A = [
  [1, 2],
  [6, 3],
  [4, 1]
];

var B = [[1, 2], [6, 3], [4, 1]];

Canvas.init([0,8], [0,4], {width:480, background:"lightgrey"});

for (var i = 0; i < A.length; i = i+1) {
  Canvas.circle(A[i][0], A[i][1], 0.5, {fill:"green"});
  Canvas.circle(B[i][0], B[i][1], 0.3, {fill:"yellow"});
};

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

Vorschau Download Kopie speichern

Beispiel

Es wird ein Datenfeld zur Definition der Mittelpunkte von Kreisen definiert.

<!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 A = [
  [1, 2],
  [6, 1],
  [3, 3],
  [7, 2],
  [4, 1]
];

Canvas.init([0,8], [0,4], {width:480, background:"lightgrey"});

for (var i = 0; i < A.length; i = i+1) {
  Canvas.circle(A[i][0], A[i][1], 0.4, {fill:"none", stroke:"green"});
};

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Beispiel zuvor vertraut. Ergänze die einzelnen Datenfelder zur Definition der x- und y-Koordinaten um einen weiteren Eintrag zur Definition der Radien. Verwende für alle Kreise einen unterschiedlichen Radius und berücksichtige dies in der Darstellung.

Beispiel

Es wird ein zweidimensionales Datenfeld definiert, das als Tabelle bestehend aus sechs Zeilen und drei Spalten angesehen werden kann.

<!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 A = [];

for (var i = 0; i < 6; i = i+1) {
  A.push([random(1,19), random(1,11), random(0.2,0.6)]);
};

Canvas.init([0,20], [0,12], {width:480, background:"lightgrey"});

Canvas.circle(A[0][0], A[0][1], A[0][2], {fill:"blue"});

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Beispiel zuvor vertraut. Jede Zeile definiert einen Kreis, wobei die drei Elemente einer Zeilen den x- und y-Koordinaten sowie dem Radius entsprechen. Verwende den Befehl Canvas.print, um den Inhalt des Datenfeldes A auszugeben.

Erweitere den Quellcode, sodass alle sechs Kreise dargestellt werden. Zeichne zudem zwischen je zwei Punkten eine Linie.