PMG10c 2021/Grundlagen

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.


Da es mehrere "schlaue" Schildkröten und mehrere Zeichenflächen gibt, geben wir jeder Schildkröte und jeder Zeichenfläche 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="58e9e7d3eb439">
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);
}
canvas1.clear(); 
turtle1.move(200, 150);
quadrat1(50);
</run>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<run id="58e9e7d3eb4b5">
function quadrat2(x) {
 for (var i = 1; i <= 4; i++) {
  turtle2.forward(x);  
  turtle2.right(90); 
 }
}




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 [[PMG10c_2021/Ü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>