Turtlegrafik (I)

Aus ProgrammingWiki

< Gymnasium Löbau < Vertiefungsklasse 2015

Inhaltsverzeichnis

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

Wie zeichnet die Turtle ein Quadrat effizient?

Auch hier können nochmals alle erforderlichen Turtle-Befehle nachgelesen werden.

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); }		function quadrat2(x) { for (var i = 1; i <= 4; i++) { turtle2.forward(x); turtle2.right(90); } }
canvas1.clear(); turtle1.move(200, 150); quadrat1(50);		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.

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) { //Anweisungen }		Regelmäßiges N-Eck: function n_eck(x, n) { var winkel = 360 / n; //Anweisungen }

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;
 //Anweisungen
}

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 auf einer separaten Seite gelöst werden.

Das Haus des Nikolaus
Nikolaushaus
Das bekannte Nikolaushaus soll wieder in einem Zug gezeichnet werden, d.h. jede Kante wird wieder genau einmal durchlaufen. Die Ausgangsfigur soll aber ein Quadrat sein.
Schreibe eine Prozedur, die das Nikolaushaus beginnend mit einem Quadrat in einer 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).