Gymnasium Löbau/Vertiefungsklasse 2014/Eine Turtle zeichnet

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== 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.

<canvas w="400" h="300"></canvas>

<code id="5aec36a5308e3" 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>

Da es mehrere "schlaue" Schildkröten und mehrere Spielwiesen gibt, geben wir jeder Schildkröte und jeder Spielwiese eine Nummer.<br />
Nun setzen wir die Schildkröte mit der Nummer 1 auf die erste Spielwiese:

<run id="5aec36a530bdd">
canvas1.clear();
turtle1.move(200, 150);
</run>

Damit können wir der ersten Turtle einfache Zeichenbefehle in kurzen "Schildkröten-Sätzen" erteilen. Diese Sätze beginnen stets mit einer Anweisung und enden stets mit einem Semikolon.

<code id="5aec36a53098a" hidden>canvas1.clear();turtle1.move(200, 150);</code>

<run id="5aec36a530c66">
turtle1.forward(100);
</run>

Hier findest du eine [[Gymnasium Löbau/Vertiefungsklasse 2014/Eine Turtle zeichnet/Übersicht über alle Turtle-Befehle|Übersicht über alle Turtle-Befehle]].

=== Aufgaben ===

<ol>
<li>Zeichne mit der Turtle ein Quadrat.</li>
<li>Zeichne mit der Turtle ein Rechteck, dessen längere Seiten genau doppelt so lang sind wie seine kürzeren Seiten.</li>
</ol>

== Die Turtle baut ein Haus ==

Selbst die schönste Spielwiese schützt nicht vor Regenwetter! Die Turtle mit der Nummer 2 hat das erkannt und möchte auf ihrer Spielwiese ein Haus bauen. Baupläne für kostengünstige Häuser hat sie bereits im Internet gefunden.

<table border="0" cellspacing="0" cellpadding="2" width="600">
<tr>
<td rowspan="2" valign="top">
<canvas w="400" h="400"></canvas>
</td>
<td align="center" valign="top">
[[Bild:Haus1.GIF]]<br />
Bauplan: Turtle-Haus
</td>
</tr>
<tr>
<td align="center" valign="top">
[[Bild:Nikolaus1.GIF]]<br />
Bauplan: Nikolaus-Haus
</td>
</tr>
</table>

Hilf der Turtle 2 beim Hausbau!

<code id="5aec36a530a18" hidden>
function haus(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(45);
 turtle.forward(s);
 turtle.right(90);
 turtle.forward(s);
 turtle.right(90);
}
 
function nikolaushaus(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>

<run id="5aec36a530ce5">
canvas2.clear();
turtle2.move(200, 200);
turtle2.forward(100);
//Hier stehen Deine weiteren turtle-Anweisungen!
</run>

=== Aufgaben ===

<ol>
<li>
Zeichne mit der Turtle nun das Nikolaus-Haus in einem Zug. Benutze dabei für das Dach eine andere Farbe.<br />
'''Hinweise:'''
* Zeichne zuerst auf einem Blatt Papier ein Nikolaus-Haus in einem Zug.
* Überlege Dir genau, wie sich die Turtle beim Zeichnen bewegen muss. 
* Denke daran: Die Diagonalen sind doppelt so lang wie die Dachkanten.
</li>
</ol>

== Die Turtle zeichnet regelmäßige Vielecke ==

Du hast bereits mit der Turtle ein Quadrat gezeichnet. Ein Quadrat ist ein regelmäßiges Viereck.<br />
Die dritte Turtle hat in der Schildkrötenschule besonders gut aufgepasst. Sie hat gelernt, wie man regelmäßige Vielecke auf die Spielwiese zeichnet. Probiere es aus.

<canvas w="400" h="400"></canvas>

<code id="5aec36a530a9f" hidden>
function vieleck(turtle, s, n) {
 var winkel = 360 / n;
 for (var i = 1; i <= n; i++) {
  turtle.forward(s);  
  turtle.right(winkel); 
 }
}
</code>

<run id="5aec36a530d68">
canvas3.clear();
turtle3.move(200, 200);
vieleck(turtle3, 75, 5);
</run>

Hast Du es bemerkt?
* Die erste Zahl entspricht der Seitenlänge des Vielecks.
* Die zweite Zahl gibt die Anzahl der Ecken an.

=== Aufgaben ===

<ol>
<li>Zeichne ein regelmäßiges 12-Eck. Achte darauf, dass es auf die Spielwiese passt!</li>
<li>Kannst Du mit der Turtle einen Kreis zeichnen?</li>
</ol>

== Die Turtle zeichnet Sterne ==

Die vierte Turtle ist eine wahre Künstlerin! Sie kann Sterne zeichnen, die sie meist zur Weihnachtszeit verschenkt.
Du wirst staunen!

<canvas w="400" h="400"></canvas>

<code id="5aec36a530b2c" hidden>
function stern(turtle, s, n) {
 var winkel = 360 / n;
 for (var i = 1; i <= n; i++) {
  vieleck(turtle, s, 4);
  turtle.right(winkel); 
 }
}

function n_stern(turtle, s, n, m) {
 var winkel = 360 / n;
 for (var i = 1; i <= n; i++) {
  vieleck(turtle, s, m);
  turtle.right(winkel); 
 }
}

function farbstern(turtle, s, n, liste) {
 var winkel = 360 / n;
 var farbe;
 for (var i = 1; i <= n; i++) {
  farbe = liste[Math.floor((i - 1) * liste.length / n)];
  switch (farbe) {
   case "red":
    red(turtle); break;
   case "brown":
    brown(turtle); break;
   case "orange":
    orange(turtle); break;
   case "yellow":
    yellow(turtle); break;
   case "green":
    green(turtle); break;
   case "blue":
    blue(turtle); break;
   case "pink":
    pink(turtle); break;
   default:
    black(turtle); break;
  }
  vieleck(turtle, s, 4);
  turtle.right(winkel);
 }
}
</code>

<run id="5aec36a530ded">
var farbliste = ["red", "orange", "yellow", "green", "blue", "pink"];

canvas4.clear();
turtle4.move(200, 200);
stern(turtle4, 100, 35);
</run>

Du hast die "Zeichenstrategie" der Turtle sicher durchschaut: Sie zeichnet ein Quadrat und dreht sich anschließend ein kleines Stück nach rechts. Das wiederholt sie so oft, bis der Stern komplett ist.

=== Aufgaben ===

<ol>
<li>Zeichne farbige Sterne.</li>
<li>Ändere neben der Farbe auch die Anzahl der Quadrate, die für einen vollständigen Stern notwendig sind.</li>
<li>Zeichne ''mehrfarbige'' Sterne, z.B.:
<pre>farbstern(turtle4, 100, 100, farbliste);</pre>
</li>
</ol>