PMG10 1920/Turtle Zeichnen 1

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== Beispiel Turtle 1  ==

Das nachfolgende Beispiel zeichnet einen farbigen Kreis. <br>
Versuche durch leichte Anpassung 
* die Turtle sich nach links drehen zu lassen
* die Anzahl der Kreissegmente zu verdoppeln ohne den Radius des Kreises zu vergrößern
* zwei Kreise (links und rechts) hintereinander durch die Turtle zu zeichnen
* dabei die Farben der Segmente zu verändern.

<canvas></canvas>

<run id="5d7f591e134a3">
var c = new Canvas(1);
c.clear(); // Zeichenfläche löschen

var t = new Turtle(1); // neuer Turtle auf Zeichenfläche 1

t.home();

var isUp = false;

for(var i = 0; i < 18; i++){  
 t.penColor(i*10+50,0,250-10*i);  
 t.penWidth(8);
 t.forward(20);  
 t.right(20); 
 isUp = !isUp; 
 if(isUp) t.penUp(); else t.penDown();
}
</run>

Die folgende Tabelle enthält die wesentlichsten Sprachelemente der Turtle-Grafik.

<table border="1" cellspacing="1" cellpadding="8">
<tr>
<td><b>Syntax</b></td><td><b>Semantik</b></td>
</tr>
<tr valign="top">
<td><tt>canvas.clear();</tt></td>
<td>löscht die Zeichenfläche,</td>
</tr>
<tr valign="top">
<td><tt>turtle.move(&lt;x&gt;,&lt;y&gt;);</tt></td>
<td>positioniert die Turtle in der Zeichenfläche,<br />
x ... Spaltenkoordinate, y ... Zeilenkoordinate,<br />
der Koordinatenursprung befindet sich in der ''linken oberen'' Ecke der Zeichenfläche,</td>
</tr>
<tr valign="top">
<td><tt>turtle.forward(&lt;x&gt;);</tt></td>
<td>lässt die Turtle x Schritte vorwärts gehen,</td>
</tr>
<tr valign="top">
<td><tt>turtle.backward(&lt;x&gt;);</tt></td>
<td>lässt die Turtle x Schritte zurück gehen,</td>
</tr>
<tr valign="top">
<td><tt>turtle.right(&lt;x&gt;);</tt></td>
<td>dreht die Turtle um x Grad nach rechts,</td>
</tr>
<tr valign="top">
<td><tt>turtle.left(&lt;x&gt;);</tt></td>
<td>dreht die Turtle um x Grad nach links,</td>
</tr>
<tr valign="top">
<td><tt>turtle.penDown();</tt></td>
<td>setzt den Stift ab, so dass Turtle-Bewegungen eine Spur hinterlassen,</td>
</tr>
<tr valign="top">
<td><tt>turtle.penUp();</tt></td>
<td>hebt den Stift an, so dass Turtle-Bewegungen keine Spur hinterlassen,</td>
</tr>
<tr valign="top">
<td><tt>turtle.penWidth(&lt;x&gt;);</tt></td>
<td>setzt die Breite des Stiftes auf den Wert x,</td>
</tr>
<tr valign="top">
<td><tt>turtle.penColor(&lt;r&gt;,&lt;g&gt;,&lt;b&gt;);</tt></td>
<td>legt den Farbwert des Stiftes fest,<br />
mögliche Zahlenwerte für rot (r), grün (g) und blau (b) sind: 0&nbsp;...&nbsp;255,</td>
</tr>
<tr valign="top">
<td><tt>turtle.hide();</tt></td>
<td>macht die Turtle unsichtbar,</td>
</tr>
<tr valign="top">
<td><tt>turtle.show();</tt></td>
<td>macht die Turtle sichtbar,</td>
</tr>
<tr valign="top">
<td><tt>turtle.penErase();</tt></td>
<td>die Turtle löscht eine gezeichnete Linie (wie ein Radiergummi),</td>
</tr>
</table>
<br />
== Beispiel Turtle 2 ==

Zeichne in die nächste Zeichenfläche entweder:
* ein Quadrat
* ein Dreieck
* ein Haus <u>oder</u> 
* ein Haus mit Tür und Fenster
* ...

<canvas></canvas>

<run id="5d7f591e13517">
var c = new Canvas(2);
c.clear(); // Zeichenfläche löschen

var t = new Turtle(2); // neuer Turtle auf Zeichenfläche 2

t.home();
t.forward(50);

</run>