taralino

Befehle definieren

Befehle dienen zur Ausführung von Anweisungen in Abhängigkeit von Argumenten bzw. Parametern: Der Befehl Canvas.circle(x,y,r) beispielsweise dient zum Zeichnen eines Kreises in Abhängigkeit von Mittelpunkt und Radius.

Auch Funktionen dienen zur Ausführung von Anweisungen in Abhängigkeit gewisser Parameter, wobei nun ein Wert (bzw. ein Wert einer Variablen) zurückgegeben wird: Die Funktion random(a,b) beispielsweise generiert eine Zufallszahl zwischen a und b und gibt diese als Wert einer Variable vom Datentyp Zahl zurück.

Wir wollen nun lernen, wie eigene Befehle und Funktionen definiert werden können.

Definition von Befehlen

Befehle werden (genau wie Funktionen) mittels Schlüsselwort function definiert. Es folgen die (verpflichtenden) Argumente in runden Klammern, wobei es sich dabei um Variablen der bekannten Datentypen handelt. Der Block von Anweisungen wird in geschweiften Klammern zusammengefasst.

Der Einfachheit halber verzichten wir bei der eigenen Definition von Befehlen und Funktionen bewusst auf optionale Parameter und beschränken uns daher zunächst auf eine jeweils feste Anzahl an verpflichtenden Argumenten.

Beispiel

Es wird ein Befehl definiert, welcher drei Kreise in Abhängigkeit von x- und y-Koordinaten zeichnet. Anschließend wird der Befehl vier Mal mit jeweils unterschiedlichen Argumenten aufgerufen.

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

Canvas.init([0,10], [0,6], {width:480, background:"cyan"});

function molecule(x, y) {
  Canvas.circle(x, y, 0.5, {fill:"red"});
  Canvas.circle(x-0.5, y-0.5, 0.4, {fill:"white"});
  Canvas.circle(x+0.5, y-0.5, 0.4, {fill:"white"});
};

molecule(2.0, 4.0);
molecule(7.0, 5.0);
molecule(5.0, 2.0);
molecule(8.0, 1.5);

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

Vorschau Download Kopie speichern

Beispiel

Ein Befehl, um einen Smiley in Abhängigkeit von x- und y-Koordinaten zu zeichnen.

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

Canvas.init([0,16], [0,8], {width:600, background:"black"});

function smiley(x, y) {
  Canvas.circle(x, y, 1.5, {fill:"yellow"});
  Canvas.circle(x, y-0.3, 0.6, {fill:"black"});
  Canvas.rect(x, y+0.3, 2.0, 1.2, {fill:"yellow"});
  Canvas.circle(x+0.5, y+0.4, 0.3, {fill:"black"});
  Canvas.circle(x-0.5, y+0.4, 0.3, {fill:"black"});
};

smiley(4.0, 4.0);

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Erweitere den Befehl smiley, sodass auch die Farbe des Smileys als zusätzliches Argument übergeben wird. Teste den Befehl, indem mindestens drei Smileys mit jeweils unterschiedlichen Farben an unterschiedlichen Positionen gezeichnet werden.

Beispiel

Ein Befehl, um einen Stern in Abhängigkeit von x- und y-Koordinaten zu zeichnen.

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

Canvas.init([0,16], [0,8], {width:600, background:"black"});

function star(x, y, w) {
  Canvas.box(x, y, w, {fill:"yellow"});
  Canvas.box(x, y, w, {fill:"yellow", angle:0.7854});
};

star(4.0, 4.0, random(0.2,0.8));

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

Vorschau Download Kopie speichern

Aufgabe

Mache dich mit dem Quellcode zuvor vertraut. Zeichne einen Sternenhimmel, indem etwa 100 Sterne zufällig auf der Zeichenfläche mit jeweils zufälligen Größen gezeichnet werden. Verwende dazu eine Schleife sowie die Funktion random-Funktion.