Hanischbor//Mathe/Turtle

Wiki-Quelltext dieser Seite.

== Wie zeichnet eine Turtle? ==

Wir stellen uns vor: Eine kleine Schildkröte (engl. turtle) besitzt am Bauch einen Zeichenstift und gehorcht aufs Wort!<br />
Diese Schildkröte kann sich auf einer Spielwiese tummeln, die wir als Zeichenfläche (engl. canvas) bezeichnen.<br />

Da es mehrere "schlaue" Schildkröten und mehrere Spielwiesen gibt, geben wir jeder Schildkröte und jeder Spielwiese eine Nummer.<br />

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
'''Turtle1 auf Zeichenfläche1:'''
<canvas w="400" h="300"></canvas>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
'''Turtle2 auf Zeichenfläche2:'''
<canvas w="400" h="300"></canvas>
</td>
</tr>
<tr>
<td colspan="3">
Wir wollen die nachfolgenden Anweisungen ausführen und anschließend vergleichen.
</td>
</tr>
<tr>
<td align="center" valign="top">
<run id="5360366cdf1ae">
canvas1.clear(); 
turtle1.move(200,150);
turtle1.forward(50);  
turtle1.right(90); 
turtle1.forward(50);  
turtle1.right(90); 
turtle1.forward(50);  
turtle1.right(90);   
turtle1.forward(50);  
</run>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<run id="5360381c33481">
public void quadrat(double x) {
 for (int i = 1; i <= 4; i++) {
  turtle2.forward(x);  
  turtle2.right(90); 
 }
}
canvas2.clear(); 
turtle2.move(200,150);
quadrat(50);
</run>
</td>
</tr>
</table>

Vergleichend stellen wir fest:
* Die Darstellungen sind zunächst identisch.
* Gleiche Anweisungen lassen sich in ''Wiederholungen'' (Zählschleifen) beliebig oft ausführen.
* 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.
<br />

== Turtle-Befehle ==

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

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

== 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.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
'''Gleichseitiges Dreieck:'''
<code id="5360381c33336">
public void dreieck(double x) {

}
</code>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
'''Regelmäßiges N-Eck:'''
<code id="5360381c333da">
public void n_eck(double x, int n) {
 double winkel = 360 / n;

}
</code>
</td>
</tr>
<tr>
<td align="center" valign="top">
<canvas w="400" h="300"></canvas>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<canvas w="400" h="300"></canvas>
</td>
</tr>
<tr>
<td align="center" valign="top">
<run id="5360381c33521">
canvas3.clear(); 
turtle3.move(200,150);
dreieck(50);
</run>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<run id="5360381c335ab">
canvas4.clear(); 
turtle4.move(200,150);
n_eck(50,7);
</run>
</td>
</tr>
</table>

== 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 <tt>n_eck</tt> zuvor definiert werden.

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<canvas w="300" h="450"></canvas>
</td>
<td>&nbsp;</td>
<td align="center" valign="top" width="400">
<code id="53650ddb5f161">
public void n_eck(double x, int n) {
 double winkel = 360 / n;

}

public void haus(double x) {
 n_eck(x, 4);
 turtle5.forward(x);
 turtle5.right(30);
 n_eck(x, 3);
}
</code>

<run id="53650ddb5f546">
canvas5.clear();
turtle5.move(50, 400);
haus(200);
</run>
</td>
</tr>
</table>

== Aufgaben ==

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

<ol>
<li>
[[Datei:Nikolaushaus1.GIF|miniatur|Das Haus des Nikolaus]]
=== Nikolaushaus ===
Das bekannte Nikolaushaus soll in einem Zug gezeichnet werden, d.h. jede Kante wird dabei genau einmal durchlaufen.<br /> 
Schreibe eine Prozedur, die das Nikolaushaus in beliebiger Größe zeichnet.
</li>
<code>
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td>
'''Nikolaushaus'''
<canvas w="400" h="300"></canvas>
</td>
<td>
'''Treppe'''
<canvas w ="400" h="300"></canvas>
</tr>
<tr>
<td align="center" valign="top">
<code>
public void nikolaus(double x) {
double c = Math.sqrt(2) * x;
for (i=1, i<=n, i++){
turtle1.forward(x);
turtle1.right(45);
turtle1.forward(c/2);
turtle1.right(90);
turtle1.forward(c/2);
turtle1.right(135);
turtle1.forward(x);
turtle1.left(45);
turtle1.forward(c);
turtle1.right(135);
turtle1.forward(x);
turtle1.right(135);
turtle1.forward(x);
turtle1.right(135);
turtle1.forward(c);
turtle1.right(135);
turtle1.forward(x);
}
}
</code>
<run>
canvas.clear();
turtle1.move(1,299);
nikolaus(50); 
</run>
</td>
<td align="center" valign="top">
<code>
public void treppe(double x, int n) {
  for (i=1, i<=n, i++) {
    turtle2.forward(x);
    turtle2.right(90);
    turtle2.forward(x);
    turtle2.left(90);
  }
  turtle2.right(180);
  turtle2.forward(x*n);
  turtle2.right(90);
  turtle2.forward(x*n);
}
</code>
<run>
canvas2.clear();
turtle2.move(200,150);
treppe(40, 3);
</run>
</td>
</tr>
<tr>
<td>
'''Pentagramm'''
</td>
<td>
'''Rosette'''
</td>
</tr>
<tr>
<td>
<canvas w ="400" h="300"></canvas>
</td>
<td>
<canvas w ="400" h="300"></canvas>
</td>
</tr>
<tr>
<td>
<code>
</code>
<run>
</run>
</td>
<td>
<code>
</code>
<run>
</run>
</td>
</tr>
</table>


<li>