Gymnasium Löbau/Vertiefungsklasse 2014/Eine Turtle lernt

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
Bisher mussten Zeichenbefehle in einzelnen "Turtle-Sätzen" erteilt werden. Das war oft mühselig.<br />
Wir wollen nun erfahren, wie eine Turtle die Befehle zum Zeichnen einer beliebigen Figur lernen kann.<br /><br />

== Wie lernt eine Turtle? ==

Die ersten beiden Turtles sollen lernen, wie ein Quadrat auf ihre Spielwiese gezeichnet wird.<br />
Sie gehen dabei unterschiedlich vor:

<code id="5b06c2fdbbd01" hidden>
function center(turtle) {
 turtle.move(200, 150);
}

function black(turtle) {
 turtle.penColor(0, 0, 0);
}

function red(turtle) {
 turtle.penColor(255, 0, 0);
}

function brown(turtle) {
 turtle.penColor(100, 50, 0);
}

function orange(turtle) {
 turtle.penColor(255, 100, 0);
}

function yellow(turtle) {
 turtle.penColor(255, 200, 0);
}

function green(turtle) {
 turtle.penColor(0, 255, 0);
}

function blue(turtle) {
 turtle.penColor(0, 0, 255);
}

function pink(turtle) {
 turtle.penColor(200, 50, 200);
}
</code>

<table border="0" cellspacing="0" cellpadding="2">
<tr valign="top">
<td>
<canvas w="400" h="300"></canvas>
<code id="5b06c2fdbbd93">
function quadrat1() {
 canvas1.clear(); 
 turtle1.move(200, 150);
 turtle1.forward(100);  
 turtle1.right(90); 
 turtle1.forward(100);  
 turtle1.right(90); 
 turtle1.forward(100);  
 turtle1.right(90);   
 turtle1.forward(100);
}
</code>
<run id="5b06c2fdbc042">
quadrat1();
</run>
</td>
<td>
<canvas w="400" h="300"></canvas>
<code id="5b06c2fdbbe0e">
function quadrat2(s) {
 canvas2.clear(); 
 turtle2.move(200, 150);
 turtle2.forward(s);  
 turtle2.right(90); 
 turtle2.forward(s);  
 turtle2.right(90); 
 turtle2.forward(s);  
 turtle2.right(90);   
 turtle2.forward(s);
}
</code>
<run id="5b06c2fdbc0af">
quadrat2(100);
</run>
</td>
</tr>
</table>

Beide Turtles haben gelernt, was bei der Anweisung <tt>quadrat</tt> zu tun ist.<br />
Nenne Gemeinsamkeiten und Unterschiede, die zwischen den beiden Ausführungen bestehen.

=== Zusammenfassung ===

<ul>
<li>
Die Turtle lernt mit der Definition einer ''Funktion'':
<pre>function &lt;Name&gt;(&lt;Parameter1&gt;, &lt;Parameter2&gt;, ...) {
 ...
}
</pre>
Dabei wird ein aussagekräftiger Name (hier: <tt>&lt;Name&gt;</tt>) an eine Folge von Turtle-Anweisungen gebunden.
Wird bei dieser Folge von Anweisungen kein Wert zurückgegeben, sprechen wir von einer ''Prozedur''. 
</li>
<li>
Zwischen den geschweiften Klammern können mehrere Turtle-Sätze zu einem "Turtle-Text" zusammengefasst werden.
</li>
<li>
In der Parameterliste
<pre>(&lt;Parameter1&gt;, &lt;Parameter2&gt;, ...)</pre>
lassen sich Werte übegeben, mit denen die Anweisungen in den Funktionen vervollständigt werden.<br />
Diese Parameterliste kann auch wie bei <tt>quadrat1</tt> leer sein.
</li>
<li>
Achte darauf, dass stets auf jede geöffnete geschweifte Klammer eine schließende geschweife Klammer folgen muss.
</li>
</ul>

== Die Turtle lernt, das Nikolaus-Haus in einem Zug zu zeichnen ==

=== Die Turtle zeichnet ein Nikolaus-Haus mit fester Größe ===

Die dritte Turtle möchte lernen, wie ein Nikolaus-Haus in einem Zug gezeichnet wird.<br />
Du sollst ihr Lehrer sein. Lerne ihr das Zeichnen des Nikolaus-Hauses nach dem Vorbild von <tt>quadrat(100);</tt>.<br />
Natürlich kannst Du dazu wieder alle erforderlichen [[Gymnasium Löbau/Vertiefungsklasse 2014/Eine Turtle zeichnet/Übersicht über alle Turtle-Befehle|Übersicht über alle Turtle-Befehle]] nachlesen.

<table border="0" cellspacing="0" cellpadding="2" width="600">
<tr>
<td valign="top">
<canvas w="400" h="400"></canvas>
</td>
<td align="center" valign="top">
[[Bild:Nikolaus1.GIF]]<br />
Planfigur: Nikolaus-Haus mit fester Größe
</td>
</tr>
</table>

<code id="5b06c2fdbbe7c">
function nikolaushaus1() {
 turtle3.move(200, 200);
 //Anweisungen
}
</code>

<run id="5b06c2fdbc117">
canvas3.clear();
nikolaushaus1();
</run>

==== Aufgaben ====

<ol>
<li>Ändere die Definition so ab, dass das Dach des Nikolaus-Hauses in einer anderen Farbe gezeichnet wird.</li>
<li>Welche Zahlenwerte müssten wie geändert werden, damit das Nikolaus-Haus in doppelter Größe gezeichnet wird?</li>
</ol>

=== Die Turtle zeichnet ein Nikolaus-Haus mit veränderlicher Größe ===

==== Die Turtle rechnet ====

Um ein Nikolaus-Haus in veränderlicher Größe zu zeichnen, muss die Turtle die Längen der Dachkanten und Diagonalen ''berechnen'' können. Wie rechnen eigentlich Turtles?<br />
Wir untersuchen die Grundrechenarten:

<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<run id="5b06c2fdbc17f">3 + 5;</run>
</td>
<td>
<run id="5b06c2fdbc1e9">12.5 - 3.4;</run>
</td>
<td>
<run id="5b06c2fdbc252">Math.sqrt(2) * 100;</run>
</td>
<td>
<run id="5b06c2fdbc2f3">Math.round(17 / 3);</run>
</td>
</tr>
</table>

Bei Berechnungen können auch ''Variablen'' benutzt werden.<br />
Dazu muss die Turtle den ''Wert'' einer Variablen kennen:

<code id="5b06c2fdbbee6">
var s = 100;
var x = Math.sqrt(2);
</code>

<run id="5b06c2fdbc361">
x * s;
</run>

'''Wir fassen zusammen:'''

* Turtles führen Berechnungen in Turtle-Sätzen durch, die mit eine Semikolon abgeschlossen werden.
* Als Dezimalzeichen muss immer ein Punkt gesetzt werden.
* Es können mathematische Standardfunktionen benutzt werden.
* Berechnungen werden auch mit Variablen durchgeführt.

==== Die Turtle zeichnet ====

Nun kann die vierte Turtle das Nikolaus-Haus in veränderlicher Größe zeichnen.<br />
Hilf ihr dabei. Orientiere Dich dazu an der nebenstehenden Planfigur.

<table border="0" cellspacing="0" cellpadding="2" width="600">
<tr>
<td valign="top">
<canvas w="400" h="400"></canvas>
</td>
<td align="center" valign="top">
[[Bild:Nikolaus2.GIF]]<br />
Planfigur: Nikolaus-Haus mit veränderlicher Größe
</td>
</tr>
</table>

<code id="5b06c2fdbbf4d" hidden>
function nikolaushaus2_lsg(turtle, s) {
 turtle.move(200, 200);
 turtle.penUp();
 turtle.backward(s / 2);
 turtle.left(90);
 turtle.forward(s / 2);
 turtle.right(90);
 turtle.penDown();
 turtle.forward(s);
 turtle.right(45);
 red(turtle);
 turtle.forward(s / Math.sqrt(2));
 turtle.right(90);
 turtle.forward(s / Math.sqrt(2));
 black(turtle);
 turtle.right(135);
 turtle.forward(s);
 turtle.left(135);
 turtle.forward(s * Math.sqrt(2));
 turtle.right(135);
 turtle.forward(s);
 turtle.right(135);
 turtle.forward(s * Math.sqrt(2));
 turtle.right(135);
 turtle.forward(s);
}
</code>

<code id="5b06c2fdbbfb4">
function nikolaushaus2(turtle, s) {
 turtle.move(200, 200);
 //Anweisungen
}
</code>

'''Hinweis:''' Es ist sinnvoll, jede Grafik-Prozedur mit einem zusätzlichen Parameter <tt>turtle</tt> zu ergänzen, mit dem entschieden werden kann, durch welche Turtle diese Prozedur genutzt werden soll.
Dann könnte die Anweisung <tt>nikolaushaus2</tt> von <tt>turtle4</tt> ebenso genutzt werden wie von von einer weiteren möglichen <tt>turtle5</tt>: 

<run id="5b06c2fdbc3cd">
canvas4.clear();
nikolaushaus2(turtle4, 100);
</run>

==== Aufgaben ====

<ol>
<li>Ändere die Definition so ab, dass gesamte Nikolaus-Haus mehrfarbig gezeichnet wird.</li>
<li>Kannst du das Nikolaus-Haus genau in der Mitte der Spielwiese zeichnen lassen?</li>
</ol>