Turtlegrafik (I)

Aus ProgrammingWiki

< Gymnasium Löbau | Vertiefungsklasse 2013

Inhaltsverzeichnis

1 Wie zeichnet die Turtle ein Quadrat?
2 Turtle-Befehle
3 Vom Dreieck zum N-Eck
4 Prozeduren rufen Prozeduren auf
5 Aufgaben

Wie zeichnet die Turtle ein Quadrat?

Wir erinnern uns: Eine kleine Schildkröte (engl. turtle) besitzt am Bauch einen Zeichenstift und gehorcht aufs Wort!
Diese Schildkröte bewegt sich auf einer Sandfläche, die wir als Zeichenfläche (engl. canvas) bezeichnen.

Da es mehrere "schlaue" Schildkröten und mehrere Zeichenflächen gibt, geben wir jeder Schildkröte und jeder Zeichenfläche eine Nummer.

Turtle1 auf Zeichenfläche1:

Turtle2 auf Zeichenfläche2:

Wir wollen die nachfolgenden Anweisungen ausführen und anschließend vergleichen.

function quadrat1(x) { turtle1.move(200, 150); turtle1.forward(x); turtle1.right(90); turtle1.forward(x); turtle1.right(90); turtle1.forward(x); turtle1.right(90); turtle1.forward(x); } canvas1.clear(); turtle1.move(200, 150); quadrat1(50);

function quadrat2(x) { for (var i = 1; i <= 4; i++) { turtle2.forward(x); turtle2.right(90); } } canvas2.clear(); turtle2.move(200, 150); quadrat2(50);

Vergleichend stellen wir fest:

Die Darstellungen sind zunächst identisch.
Gleiche Anweisungen lassen sich in Wiederholungen (Zählschleifen) beliebig oft ausführen.
Zählschleifen haben folgende Syntax:
```
for (zaehler = von; zaehler <= bis; zaehler = zaehler + schrittweite) {
 //Anweisung(en)
} 
```
Bei einer Anweisung können die geschweiften Klammern entfallen.
Anweisungen können modularisiert, d.h. in Prozeduren unter einem geeigneten Bezeichner (Namen) zusammengfasst werden.
Prozeduren können Parameter (Platzhalter) haben, die z.B. Objekte in variabler Größe zeichnen lassen.

Turtle-Befehle

Die folgende Tabelle enthält die wesentlichsten Sprachelemente der Turtle-Grafik.

Syntax	Semantik
`canvas.clear();`	löscht die Zeichenfläche,
`turtle.move(<x>,<y>);`	positioniert die Turtle in der Zeichenfläche, x ... Spaltenkoordinate, y ... Zeilenkoordinate, der Koordinatenursprung befindet sich in der linken oberen Ecke der Zeichenfläche,
`turtle.forward(<x>);`	lässt die Turtle x Schritte vorwärts gehen,
`turtle.backward(<x>);`	lässt die Turtle x Schritte zurück gehen,
`turtle.right(<x>);`	dreht die Turtle um x Grad nach rechts,
`turtle.left(<x>);`	dreht die Turtle um x Grad nach links,
`turtle.penDown();`	setzt den Stift ab, so dass Turtle-Bewegungen eine Spur hinterlassen,
`turtle.penUp();`	hebt den Stift an, so dass Turtle-Bewegungen keine Spur hinterlassen,
`turtle.penWidth(<x>);`	setzt die Breite des Stiftes auf den Wert x,
`turtle.penColor(<r>,<g>,<b>);`	legt den Fabwert des Stiftes fest, mögliche Zahlenwerte für rot (r), grün (g) und blau (b) sind: 0 ... 255,
`turtle.hide();`	macht die Turtle unsichtbar,
`turtle.show();`	macht die Turtle sichtbar,
`turtle.penErase();`	die Turtle löscht eine gezeichnete Linie (wie ein Radiergummi),

Vom Dreieck zum N-Eck

Ergänze zunächst die Prozedur zum Zeichnen eines gleichseitigen Dreiecks. Verallgemeinere dann die Lösung zur Darstellung regelmäßiger N-Ecke.

Gleichseitiges Dreieck:

function dreieck(x) { }

Regelmäßiges N-Eck:

function n_eck(x, n) { var winkel = 360 / n; }

canvas3.clear(); turtle3.move(200, 150); dreieck(50);

canvas4.clear(); turtle4.move(200, 150); n_eck(50, 7);

Prozeduren rufen Prozeduren auf

In einer Turtlegrafik können komplexe Figuren mit bereits definierten Prozeduren beschrieben werden. So lässt sich ein Haus aus 2 regelmäßigen N-Ecken zusammensetzen. Natürlich muss auch hier die Prozedur n_eck zuvor definiert werden.

function n_eck(x, n) { var winkel = 360 / n; } function haus(x) { n_eck(x, 4); turtle5.forward(x); turtle5.right(30); n_eck(x, 3); }

canvas5.clear(); turtle5.move(50, 400); haus(200);

Aufgaben

Die nachfolgenden Aufgaben sollen auch auf einer Turtlegrafik-Seite unter dem eigenen Benutzernamen erstellt werden.

Das Haus des Nikolaus

Nikolaushaus

Das bekannte Nikolaushaus soll in einem Zug gezeichnet werden, d.h. jede Kante wird dabei genau einmal durchlaufen.
Schreibe eine Prozedur, die das Nikolaushaus in beliebiger Größe zeichnet.
Treppe

Zeichne mit einer entsprechenden Prozedur eine Treppe mit beliebiger Stufenzahl und beliebiger Sufenhöhe bzw. -breite (vgl. Abbildung).
Rosette mit regelmäßigen Fünfecken

Pentagramm

Die Turtle soll ein Pentagramm (Stern mit 5 Spitzen - vgl. Abbildung) zeichnen.
Überlege dazu, welche Winkel zuvor berechnet werden müssen.
Hinweis: Die Spitzen des Pentagramms schließen ein Pentagon (regelmäßiges Fünfeck) ein.
Rosetten

Wenn einfache regelmäßige N-Ecke mehrfach gezeichnet werden und sich dabei die Turtle nach jedem N-Eck ein Stück weiter dreht, können schöne Rosetten generiert werden.
Entwickle eine Prozedur, die derartige Grafiken farbig erstellt.
Quadrat-Raster

Entwickle eine Prozedur, die ein quadratisches Raster in beliebiger Größe zeichnet. Dabei soll die Anzahl der Quadrate in einer Spalte und in einer Zeile gleich sein (vgl. Abbildung).