Gymnasium Löbau/Vertiefungsklasse 2015/Turtlegrafik (I)

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== Wie zeichnet die Turtle ein Quadrat effizient? ==

Auch hier können nochmals alle erforderlichen [[Gymnasium Löbau/Vertiefungsklasse 2015/Eine Turtle zeichnet/Übersicht über alle Turtle-Befehle|Turtle-Befehle]] nachgelesen werden.

<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">
<code id="5c9ceb813156a">
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);
}
</code>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<code id="5c9ceb81315f9">
function quadrat2(x) {
 for (var i = 1; i <= 4; i++) {
  turtle2.forward(x);  
  turtle2.right(90); 
 }
}
</code>
</td>
</tr>
<tr>
<td align="center" valign="top">
<run id="5c9ceb81317c9">
canvas1.clear(); 
turtle1.move(200, 150);
quadrat1(50);
</run>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<run id="5c9ceb8131830">
canvas2.clear(); 
turtle2.move(200, 150);
quadrat2(50);
</run>
</td>
</tr>
</table>

Vergleichend stellen wir fest:
<ul>
<li>Die Darstellungen sind zunächst identisch.</li>
<li>Gleiche Anweisungen lassen sich in ''Wiederholungen'' (Zählschleifen) beliebig oft ausführen.<br />
Zählschleifen haben folgende Syntax:
<pre>
for (zaehler = von; zaehler <= bis; zaehler = zaehler + schrittweite) {
 //Anweisung(en)
} 
</pre>
Bei ''einer'' Anweisung können die geschweiften Klammern entfallen.
</li>
<li>Anweisungen können modularisiert, d.h. in ''Prozeduren'' unter einem geeigneten ''Bezeichner'' (Namen) zusammengfasst werden.</li>
<li>Prozeduren können ''Parameter'' (Platzhalter) haben, die z.B. Objekte in variabler Größe zeichnen lassen.</li>
</ul>
<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="5c9ceb8131670">
function dreieck(x) {
 //Anweisungen
}
</code>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
'''Regelmäßiges N-Eck:'''
<code id="5c9ceb81316df">
function n_eck(x, n) {
 var winkel = 360 / n;
 //Anweisungen
}
</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="5c9ceb8131894">
canvas3.clear(); 
turtle3.move(200, 150);
dreieck(50);
</run>
</td>
<td>&nbsp;</td>
<td align="center" valign="top">
<run id="5c9ceb81318f9">
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="5c9ceb8131747">
function n_eck(x, n) {
 var winkel = 360 / n;
 //Anweisungen
}

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

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

== Aufgaben ==

Die nachfolgenden Aufgaben sollen auf einer separaten [[Gymnasium Löbau/Vertiefungsklasse 2015/Turtlegrafik-Lösungen (I)|Seite]] gelöst werden.

<ol>
<li>
[[Datei:Nikolaushaus1.GIF|miniatur|Das Haus des Nikolaus]]
=== Nikolaushaus ===
Das bekannte Nikolaushaus soll wieder in einem Zug gezeichnet werden, d.h. jede Kante wird wieder genau einmal durchlaufen. Die Ausgangsfigur soll aber ein Quadrat sein.<br /> 
Schreibe eine Prozedur, die das Nikolaushaus beginnend mit einem Quadrat in einer beliebiger Größe zeichnet.
</li>
<li>
=== Treppe ===
Zeichne mit einer entsprechenden Prozedur eine Treppe mit beliebiger Stufenzahl und beliebiger Sufenhöhe bzw. -breite (vgl. Abbildung).
<blockquote>[[Bild:Treppe_Pentagramm1.gif]]</blockquote>
</li>
<li>
[[Datei:Rosette1.gif|miniatur|Rosette mit regelmäßigen Fünfecken]]
=== Pentagramm ===
Die Turtle soll ein Pentagramm (Stern mit 5 Spitzen - vgl. Abbildung) zeichnen.<br />
Überlege dazu, welche Winkel zuvor berechnet werden müssen.<br />
'''Hinweis:'''
Die Spitzen des Pentagramms schließen ein Pentagon (regelmäßiges Fünfeck) ein.
</li>
<li>
=== Rosetten ===
Wenn einfache regelmäßige N-Ecke mehrfach gezeichnet werden und sich dabei die Turtle nach jedem N-Eck ein Stück weiter dreht, können schöne Rosetten generiert werden.<br />
Entwickle eine Prozedur, die derartige Grafiken farbig erstellt. 
</li>
<li>
=== Quadrat-Raster ===
Entwickle eine Prozedur, die ein quadratisches Raster in beliebiger Größe zeichnet. Dabei soll die Anzahl der Quadrate in einer Spalte und in einer Zeile gleich sein (vgl. Abbildung).
<blockquote>[[Bild:Raster1.gif]]</blockquote>
</li>
</ol>

Zu den [[Gymnasium Löbau/Vertiefungsklasse 2015/Turtlegrafik-Lösungen (I)|Lösungen der Aufgaben]].