Einführungskurs/Canvas und Turtle

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== Beispiel 1 ==
Das nachfolgende Beispiel zeichnet einen farbigen Kreis. Versuche durch leichte Anpassung die Anzahl der Kreissegmente zu verdoppeln ohne den Radius des Kreises zu vergrößern.

<run id="4d22cf74b8ac">
canvas.clear(); // Zeichenfläche löschen
turtle.move(200,100); // Turtle in die Mitte stellen

var isUp = false;

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

<canvas w=400></canvas>

== Beispiel 2 ==
Das folgende Beispiel verwendet zwei Turtles Bob und Eva. Bob ist betrunken und läuft verwirrt herum, während Eva versucht ihn wieder einzufangen. Eva wird immer langsamer während sie läuft, denn Bob zu jagen ist anstrengend. Schau dir den folgenden Quelltext an und versuch ihn zu verstehen. Was könntest du am Programm ändern, damit Eva nicht mehr so schnell erschöpft ist?

<run id="4adad1ed15da">
canvas2.clear(); // Zeichenfläche löschen
var Bob = new Turtle(2);
Bob.penColor(255,0,0);
Bob.move(300,200); 

var Eva = new Turtle(2);
Eva.penColor(0,255,0);
Eva.move(50,50);

var abstand;
for(var step = 0; step < 500; step++) {
  Eva.setAngleTo(Bob);
  Eva.forward((500-step)/250.0);

  Bob.forward(5 * Math.random());
  if (step%2 == 0)
    Bob.right(90 * Math.random());
  else
    Bob.left(90 * Math.random());

  // Abstand berechnen
  abstand = Math.sqrt((Eva.x - Bob.x)*(Eva.x - Bob.x)+(Eva.y - Bob.y)*(Eva.y - Bob.y));
  if(abstand < 5) {
   return("Eva hat Bob gefangen!");
   break; 
  }
}
if(abstand >= 5) {
   return("Eva kann nicht mehr! Ihr fehlten rund "+Math.round(abstand)+" Meter.");
}
</run>
Da Bob zufällig läuft, starte das Programm mehrmals.
<canvas w=600 h=400></canvas>