Gymnasium Löbau/Vertiefungsklasse 2015/Eine Turtle lernt
Aus ProgrammingWiki
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="5c9ce6590e34e" 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="5c9ce6590e3d3">
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="5c9ce6590e69e">
quadrat1();
</run>
</td>
<td>
<canvas w="400" h="300"></canvas>
<code id="5c9ce6590e44b">
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="5c9ce6590e710">
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 <Name>(<Parameter1>, <Parameter2>, ...) {
...
}
</pre>
Dabei wird ein aussagekräftiger Name (hier: <tt><Name></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>(<Parameter1>, <Parameter2>, ...)</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 2015/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="5c9ce6590e4c1">
function nikolaushaus1() {
turtle3.move(200, 200);
//Anweisungen
}
</code>
<run id="5c9ce6590e7b4">
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="5c9ce6590e836">3 + 5;</run>
</td>
<td>
<run id="5c9ce6590e8a7">12.5 - 3.4;</run>
</td>
<td>
<run id="5c9ce6590e93c">Math.sqrt(2) * 100;</run>
</td>
<td>
<run id="5c9ce6590e9b0">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="5c9ce6590e531">
var s = 100;
var x = Math.sqrt(2);
</code>
<run id="5c9ce6590ea22">
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="5c9ce6590e59f" 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="5c9ce6590e60c">
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="5c9ce6590ea94">
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>