IT Wissenssplitter
Sorry, Bild fehlt

IT Wissenssplitter

Sherlock und Desiderat

Sorry, Bild fehlt

Turtle Grafik für Kinder

Turtlegrafik ist gar nicht schwer zu erlernen. Es eignet sich sehr gut für den Programmieranfänger.
Du musst nur bereit sein genau zu arbeiten und manchmal brauchst Du auch etwas Geduld bei der Fehlersuche.
Wenn ich bei dieser Anleitung einen Buchstaben vergesse oder welche vertausche, dann wirst Du trotzdem verstehen, was ich möchte. Aber der Computer kann nicht selber denken. Eine Kleinigkeit falsch eingegeben und schon passiert vielleicht gar nichts oder etwas anderes, als Du erwartet hast. Das ist aber nicht schlimm und passiert auch den Programmierprofis. Wie gesagt, dann braucht man einfach Geduld. Dafür kannst Du aber dann auch bestimmen was die Turtle zeichnen soll und damit Deine Freunde oder Eltern beeindrucken.

Turtle - Eine Einführung

Um alles wie vorgesehen betrachten zu können, muss Javaskript aktiviert sein.

Wenn Du einen einfachen und humorvollen Einstieg in das Reich der Programmierung suchst, bist Du hier genau richtig! Denn Turtlegrafik ermöglicht es uns mit nur ganz wenigen Begriffen Zeichnungen zu erstellen. - Natürlich auch in farbig.
Damit Du bei Deinen ersten Programmierversuchen nicht so alleine bist, wird Dich die kleine Schildkröte (engl.: turtle) begleiten. Sie ist leider nicht die Schlauste und benötigt daher ganz genaue Anweisungen, aber dann tut sie gerne, was Du ihr sagst.

Das brauchen wir:
  1. Erlaubnis vom Besitzer des Computers, dass wir etwas installieren dürfen.
  2. Ein Fenster, in dem wir programmieren können.
Ich empfehle IDLE (Python's Integrated DeveLopement Enviroment). Ich verwende hier Python 3, daher wähle eine IDLE Version 3.**. Die findest Du unter: Phython.org Download
Wenn Du noch keine Programme installieren kannst und 2. nicht verstehst, frage Deine Eltern oder einen Freund.
  1. Suche dieses Bild auf Deinem Bildschirm und klicke doppelt drauf. Sorry, Bild fehlt
  2. Findest Du es nicht auf dem Bildschirm, so suche es im Startmenü und klicke einmal drauf.
Es sollte sich nun ein solches Fenster öffnen:
Sorry, Bild fehlt
Wir benötigen eine Datei, in der wir schreiben wollen.
  1. Hierfür gehe mit der Maus oben im Menü auf das Wort „File“ (engl.: Datei)
  2. Das Menü klappt sich auf und Du klickst auf „New File“ (engl. Neue Datei)
Ein leeres Fenster öffnet sich.
  1. Gehe mit der Maus oben im Menü nochmal auf das Wort „File“ (engl.: Datei)
  2. Das Menü klappt sich auf und Du klickst auf „Save as...“(engl. Speichern unter...)

Ein weiteres Fenster öffnet sich.


  1. Gebe einen Dateinamen für Deine Datei ein, z.B. turtle1
  2. Klicke auf Speichern

Das zweite Fenster verschwindet wieder.


Jetzt rufen wir die Schildkröte:
Wir geben ein:
from turtle import*
shape(„turtle“)

Sorry, Bild fehlt
Jetzt geht es endlich los:
Die Schildkröte soll nun 50 Einheiten weit laufen und zeichnet dabei einen Strich.
Tippe hierfür in das Fenster folgendes ein:
forward (50)

Hat es geklappt?
Wir lassen das Programm laufen.
  1. Gehe mit der Maus oben im Menü auf das Wort „Run (engl.: Laufen)
  2. Das Menü klappt sich auf und Du klickst auf „Run Module...“
Ein kleines Fenster geht auf, darin steht:„Source Must Be Saved OK to Save? (engl. In etwa:“Quelle muss gespeichert werden, wähle OK zum Speichern.“)
Klicke „OK“
Ein Fenster geht auf und die kleine Schildkröte rennt los:

Sorry, Bild fehlt
Glückwunsch, Du hast gerade Dein erstes kleines Progrämmchen geschrieben!
Wenn Du der Schildkröte in Teil 2 folgst, lernst Du sie besser kennen.
Sorry, Bild fehlt

So wie jede echte Schildkröte auch, kann unsere Turtle in alle Richtungen laufen. Wir müssen ihr nur sagen wohin.
Am Anfang rufen wir wieder die Schildkröte:
from turtle import*
shape(„turtle“)

Die Schildkröte soll nun ein Dreieck zeichnen. Tippe hierfür in das Fenster folgendes ein:
forward (100)
right(120)
forward (100)
right(120)
forward (100)
right(120)

Erklärung:
Du sagst der Schildkröte in welche Richtung sie laufen soll (forward = vorwärts) und wie weit (100 Einheiten)
Du sagst ihr in welche Richtung sie sich drehen soll (right = rechts) und wie weit (120°).
Beachte: Die Winkelsumme im Dreieck ist = 360°. Wir haben 3 Ecken, also 3 Winkel, die alle gleich groß sein sollen. Wir rechnen 360 : 3 = 120.

Hat es geklappt?
Menü: „Run“ -->„Run Module...“
Ein kleines Fenster geht auf: „OK“

Ein Fenster neues öffnet sich und die kleine Schildkröte rennt los:

Sorry, Bild fehlt

Es geht aber auch kürzer mit der For-Schleife
Statt der 4 Striche musst Du 4mal die Leertaste benutzen.
For i in range(3):
----forward(100)
----right (120)

Das ist übrigens eine For-Schleife. Wir können sie benutzen, wenn etwas mehrmals gemacht werden soll.
In diesem Fall wird es 3mal gemacht: Es wird jeweils eine Linie gezeichnet und dann dreht sich die Schildkröte um 120°.
Warum 120°? Weil die Schildkröte wieder am Anfang ankommen soll. Vielleicht kennst Du das vom Kreis, der ja 360° hat. Weil wir in 3 Schritten zum Start zurück wollen, teilen wir 360° durch 3 und erhalten die 120°.
Warum muss man das eigentlich einrücken? Das ist so, weil Turtlegrafik zu einer Programmiersprache gehört, die Python heißt (ja, wie die Schlange). Bei dieser Programmiersprache sind leider auch Leerschritte wichtig und wenn wir zu viele oder zu wenig Leerzeichen setzen, versteht der Computer uns nicht.

Lasse nun das Programm laufen. Du erhältst das gleiche Ergebnis - oder auch nicht.
Falls es nicht funktioniert hat, prüfe, ob
1. Du „forward“ und „right“ eingerückt hast.
2. Du einen Tippfehler gemacht hast

Versuche folgendes:
Was passiert, wenn Du vor der ersten Laufanweisung folgendes eingibst:
right (180)

Erklärung:
Die Schildkröte dreht sich im Winkel von 180° bevor sie los rennt.

Versuche folgendes:
Was musst Du tun, damit eine Spitze des Dreiecks, das Du zeichnest, nach links zeigt?

Sorry, Bild fehlt

Was passiert, wenn Du die Winkelgröße (120) auf 70 oder 140 veränderst? Probiere es aus!
Warum erhältst Du selbst dann kein Dreieck, wenn die Summe der Winkel 360 ergibt? Genau, weil die Seitenlänge sich dann verändern muss. Probiere es aus!
Kannst Du die Seitenlängen anpassen? Richtig, dafür änderst Du den Wert forward.
Da dann die Seiten unterschiedlich lang sind, wenn die Winkel nicht gleich sind, kannst Du hierfür die For-Schleife nicht mehr benutzen.

Es gibt noch eine weitere Möglichkeit das Dreieck zu zeichnen:
Lege Dir einen neue Datei an, rufe Die Schildkröte und gebe folgendes ein:
circle (50, steps = 3)
Lasse das Programm laufen. Du erhältst wieder das selbe Ergebnis.

Erklärung:
50 ist der Durchmesser des Kreises.
Was „steps“ macht, findest Du gleich selbst heraus.

Versuche folgendes:
Was passiert, wenn Du beim Durchmesser statt einer 50 eine 25 oder 100 eingibst?
Was passiert, wenn Du statt einer 3 eine 4 oder 5 bei „steps“ eingibst?
Was passiert, wenn Du nur circle (50) eingibst?

Glückwunsch! Du kannst nun Dreiecke bis Vielecke und sogar einen Kreise zeichnen!
Wenn Du der Schildkröte in Teil 3 folgst, wird es bunt.
Sorry, Bild fehlt
Immer nur Schwarz!-Das wird selbst der geduldigsten Schildkröte zu bunt. Heute sagen wir ihr wie sie selbst eine schönere Farbe bekommt und wie sie farbige Formen malen kann.

Am Anfang rufen wir wieder die Schildkröte:

from turtle import*
shape(„turtle“)

Nun lassen wir die Schildkröte in einen grünen Farbeimer springen und ein kleines Stück laufen.
Tippe hierfür in das Fenster folgendes ein:

color ("green")
forward (100)

Hat es geklappt?
Menü: „Run“ -->„Run Module...“
Ein kleines Fenster geht auf: „OK“

Wir sehen, dass die Schildkröte nun grün ist (engl. Green = grün) und einen grünen Strich zeichnet.

Wir können auch einzeln die Strichfarbe ändern.
Dafür lassen wir die Schildkröte durch ein blaues Farbschälchen laufen. Füge pencolor("blue") wie hier in Deinen Code ein:

from turtle import*
shape("turtle")
color ("green")
pencolor("blue")
forward(50)

Hat es geklappt?
Menü: „Run“ -->„Run Module...“
Ein kleines Fenster geht auf: „OK“

Wir sehen, dass die Schildkröte noch immer grün ist (engl. green = grün), aber nun einen blauen Strich zeichnet (engl. blue = blau).

In Teil 2 haben wir gelernt Formen zu zeichnen. Jetzt können wir diese auch farbige Formen zeichnen, z.B.
from turtle import*
shape("turtle")
color ("green")
pencolor("blue")
forward (100)
right(120)
pencolor("purple")
forward (100)
right(120)
pencolor("orange")
forward (100)
right(120)

Hat es geklappt?
Menü: „Run“ -->„Run Module...“
Ein kleines Fenster geht auf: „OK“

Sorry, Bild fehlt
Wir können auch den Strich breiter machen:
Hierfür fügen wir unter „pencolor("blue")“ folgende Zeile ein:
pensize(4)

Versuche folgendes:
Was passiert wenn Du unter „pencolor("blue")“ nun pensize(7) eingibst?
Was passiert wenn Du außerdem unter pensize ("purple") nun pensize(2) eingibst?

Wir können auch Formen ausfüllen:
Hier ein Beispiel:

from turtle import*
shape("turtle")
left (90)
pencolor("LimeGreen")
pensize(4)
fillcolor("yellow")
begin_fill()
circle(125)
end_fill()

Erklärung:
fillcolor("yellow") bedeutet, dass die Füllfarbe gelb (engl. yellow) sein soll.
Gefüllt wird die Form, die zwischen „beginn_fill“ (engl. beginne Füllen) und „end_fill“ (engl. beende Füllen) steht. In dem Beispiel oben, ist es ein Kreis.

Info:
Hier ein paar Farbnamen, probiert sie doch einfach mal aus:
Sorry, Bild fehlt

Manchmal sieht man in Programmen auch merkwürdige Buchstaben- und Zahlenkombinationen, die Farben entsprechen. Das sind Hexadezimalzahlen, die wir hier aber nicht benutzen.


Glückwunsch, nun kannst Du färben wie ein Malermeister!
Du hast schon fast viele Grundlagen erlernt! Wenn Du der Schildkröte in Teil 4 folgst, lernst Du wie man Formen zeichnet, die nicht miteinander verbunden sind.
Sorry, Bild fehlt

Wir wollen nicht verbundenen Formen zu zeichnen. Außerdem hat die kleine Schildkröte noch ein paar Tricks auf Lager. Da die Schildkröte noch dabei ist sich mit Salat voll zu futtern, fangen wir schon mal ohne sie an. Vielleicht habt ihr beim Üben schon festgestellt, dass eure Programme allmählich länger werden.
Wie schön wäre es, wenn wir da etwas mehr Übersicht hätten oder Notizen machen könnten...

Kommentare/Kommentieren - Wir machen uns Notitzen im Programm:
Dafür verwenden wir dieses Zeichen #. Das nennt man Raute, Gitter oder Gartenzaun. Der Gartenzaun verhindert, dass die Turtle versucht das zu tun, was Du hier schreibst.
Du kannst den Gartenzaun in Deinen Code einbauen und somit verhindern, dass die Zeile ausgeführt wird. Z.B. # forward (100) beachtet die Turtle nicht.

Auch zum Testen eines Programms, kann es sinnvoll sein, Teile des Codes auszukommentieren, also eine Raute davor zu setzen. Dadurch siehst Du, ob der Rest des Codes funktioniert und findest eher den Fehler. Fehlersuche ist leider Geduldssache, denn es muss wirklich jedes Zeichen richtig sein.

Ich habe im Folgenden hinter die Raute geschrieben, was die folgende Zeile tut. Das empfehle ich Dir auch, wenn Du längere Programme schreibst. Das hilft Dir, wenn Du Dir nach längerer Zeit Dein Programm wieder ansiehst.

Nun rufen wir wieder die Schildkröte und lassen sie los laufen:

from turtle import*
#“mode (logo)“ platziert die Schildkröte in der Mitte und lässt sie nach oben schauen.
mode ("logo")
shape ("turtle")
color ("green")
forward (200)
#Die Schildkröte mag heute nicht rennen, sie versteckt sich:
hideturtle ()
right (90)
pencolor ("blue")
forward (200)
#Die folgende Zeile sagt der pappsatten Schildkröte, dass sie langsam gehen soll.
speed (1)
#Das gefällt der Schildkröte, sie erscheint wieder.
showturtle ()
pencolor ("red")
right (45)
forward (100)


Hat es geklappt?

Erklärung:
Wenn Du bei „speed“ eine 1 eingibst, wird die Schildkröte langsamer, wenn Du eine höhere Zahl (bis 10) einsetzt, dann läuft die Schildkröte wieder schneller.
Mit „hideturtle“ kannst Du die Schildkröte verstecken, mit „showturtle“ wieder erscheinen lassen.

So allmählich sollte unsere Schildkröte wieder fit werden, daher hier ein paar Übungen:

Die Schildkröte kann auch laufen, ohne zu zeichnen.
Füge folgenden Code einfach hinter dem Code von oben ein.
penup ()
fd (50)
pendown ()
left (90)
pencolor("LimeGreen")
pensize(9)
circle(125)


Die Schildkröte kann auch rückwärts laufen:
Füge folgenden Code einfach hinter dem Code von oben ein.
pensize (4)
pencolor("blue")
backward (150)
pencolor ("yellow")
circle (25)

Erklärung:
Mit „penup ( )“ wird der Stift angehoben. (engl. pen =Stift, up= hoch)
Mit „pendown ( )“ wird der Stift angehoben. (engl. pen =Stift, down= runter)
Mit „backward ( )“ lässt man die Schildkröte rückwärts laufen. (eng. backward = rückwärts)

Die Schildkröte kann auch seitwärts laufen:
tilt (-90)
pencolor ("black")
forward (100)
left (100)


Die Schildkröte kann auch hüpfend Tapsen hinterlassen:
stamp ()
penup ()
forward (30)
stamp ()
forward (30)
pendown ()
pencolor ("red")
forward (53)

Schildkröte schaut wieder in Laufrichtung:
tilt(90)

Erklärung:
Mit „stamp ( )“ erzeugt man die kleinen Schildkröten in der Zeichnung (engl. stamp =Stempel)
Mit „tilt (-90)“ wird die Schildkröte zur Laufrichtung um 90° nach links verdreht.
Soll die Schildkröte wieder normal laufen, so verwende nochmals „tilt“, aber mit entgegengesetzter Angabe (hier kann also „tilt(-90)“ durch „tilt (90)“ aufgehoben werden).

Hast du eine Idee was folgende Zeilen bedeuten könnten? (Teste es einfach aus)
rt(90)
pu ()
fd(196)
lt (90)
pd ()

Erklärung:
fd = forward für Schreibfaule
lt = left für Schreibfaule
rt = right für Schreibfaule
pu = penup für Schreibfaule
pd = pendown für Schreibfaule

Wir wollen nun den alten Kreis mit einem dünneren Kreis übermalen:
pensize (1)
pencolor ("black")
#Die kleine Schildkröte ist nun richtig munter und rennt ganz schnell.
speed(7)
circle (125)


Zum Abschluss noch ein paar Punkte:
pencolor ("grey2")
pensize (3)
dot ()
fd(30)
dot()
fd(30)
penup()
dot()
fd(30)
dot()
fd(30)
dot()


Erklärung:
Mit „dot“ werden Punkte (engl. dot =Punkt) an die Linie gemalt, wenn nun „penup“ benutzt wird, erscheinen nur die Punkte.

Hat es geklappt? Führe nun den gesamten Code hintereinander aus.
Sorry, Bild fehlt

Versuche folgendes:
Verändere Zahlenangaben im Code, verstehst Du warum sich was verändert?
Setze vor einige Codezeilen ein „#“. Verstehst Du warum sich was verändert?
Weißt Du warum die Linie und die Punkte am Ende in der Zeichnung „schwarz“ sind, obwohl wir doch "grey2"eingegeben haben? Ersetze "grey2" durch "grey45" und danach "grey77". Verstehst du was die Zahl bewirkt?

Tipp:
Wenn Du so viel zeichnest wie wir hier, wird irgendwann der Bildschirm ziemlich voll.
Mit „clearscreen ( )“ (engl. clear screen = reinige Bildschirm) kannst Du das verschwinden lassen, was Du bisher gezeichnet hast. Füge „clearscreen ( )“ in deinen Code ein und schaue was passiert.

Statt der Schildkröte bekommst Du einen langweiligen Pfeil. Füge daher folgenden Block ein.
clearscreen ( )
shape ("turtle")


Glückwunsch, von nun an sind Deiner Fantasie fast keine Grenzen mehr gesetzt.
Wenn Du der Schildkröte in Teil 5 folgst, lernst Du Formen zeichnen für Fortgeschrittene. Sorry, Bild fehlt

"Wir können doch schon alles zeichnen, was wir brauchen. Wozu dann noch was Neues und was sind überhaupt Funktionen?" füstert die kleine Schildkröte und scharrt ungeduldig mit den Füßen.

Funktionen:
Funktionen helfen Dir Dein Programm einfacher zu gestalten. Damit wir nicht total den Überblick verlieren, helfen zwar auch Kommentare. Aber wenn wir Funktionen verwenden, wird es nicht nur übersichtlicher, sondern wir können auch Programmteile mehrmals verwenden.
Vielleicht hast Du beim Üben in Teil 1-4 schon tolle Formen erstellt und willst diese wieder verwenden. Ja, Du kannst immer den Code kopieren, aber einfacher ist es, wenn Du der Schildkröte mit einer Zeile sagen kannst, dass sie die Form malen soll. Sie kleine Schldkröte schaut mich etwas ungläubig an. Gut, dann legen wir mal los.

Hier also ein Beispiel
from turtle import*
mode ("logo")
shape ("turtle")
color ("LavenderBlush3")
#Dreieck zeichnen:
forward (200)
right (120)
forward (200)
right (120)
forward (200)
right (120)

So weit, so bekannt! Die kleine Schildkröte nickt eifrig.
Und nun das Selbe als Funktion:
# Hier definiere ich die Funktion mit dem Namen "Dreieck":
Erklärung:
def bedeutet, dass ich eine Funktion definieren will. Ich lege also fest, wie die Funktion heißt und was sie tun soll. Diese Funktion habe ich Dreieck genannt.
Hinter dem : ist der Code, wie Du ihn bereits kennst.
Achtung: Du mußt den Code in der Funktion so einrücken wie hier! (also 4 Zeichen)

Mit "Dreieck( )" rufst Du die Funktion "Dreieck" auf, damit sie ausgeführt wird. Das kannst Du beliebig oft tun.

"Das ist jetzt aber nicht kürzer gewesen als vorher" meint die kleine Schildkröte.

Stimmt, wenn Du den Code nur einmal verwenden willst, nützt Dir die Funktion nicht viel. Aber wenn Du ganz viele Dreiecke zeichnen willst, dann musst Du immer nur noch die Funktion angeben.

Beispiel:
pensize (15)
Dreieck ()
pensize (3)
Dreieck ()
right (90)
Dreieck ()
forward (200)
Dreieck ()


"Wow, das ging jetzt aber schnell", sagt die Schildkröte und springt vor dem letzten Dreieck kurz in die Höhe.
Versuche es auch einmal Hat es geklappt?

Dann kommt hier noch ein Beispiel mit ganz vielen Funktionen:
Versuche es auch mal
Hat es geklappt?
Sorry, Bild fehlt

Erklärung:
Es ist egal in welcher Reihenfolge Du die Funktionen definierst. aber wichtig ist die Reihenfolge, in der Du sie aufrufst. Es sind sozusagen Miniprogramme, die Du nacheinander ausführen lassen kannst.
Tipp:

1)Wenn Du nur eine Funktion hiervon aufrufst, dann kannst Du sehen, was diese genau tut. Kommentiere den Aufruf der anderen Funktionen einfach aus.
2) Lege Dir eine kleine Bibliothek aus Funktionen an, in der Du Formen oder Teile von Formen speicherst, die Du häufiger benutzen möchtest.
Glückwunsch, nun kannst Du auch schon Funktionen verwenden!
Wenn Du der Schildkröte in Teil 6 folgst, zeigt sie Dir weitere Codebeispiele. Natürlich darfst Du diese frei verwenden. Sorry, Bild fehlt


Die folgenden Codebeispiele sind nicht mehr ganz so einfach. Nehme die Beispiele einfach als Ausblick, was es noch so gibt. Wenn Du bis hierhin gekommen bist, solltest Du Dir überlegen, ob Du Dir ein Buch zu dem Thema besorgst, auf YouTube Videos ansiehst oder sogar einen Programmierkurs machst.
Tipp: Wenn Du im Internet nach Codebeispielen schaust, dann verwende nur Code, den Du verstanden hast! Es gibt leider manchmal auch Code, in dem etwas enthalten ist, das man nicht haben möchte und vielleicht Deinen Rechner schädigen kann.

Hast Du schon mal etwas von Fraktalen gehört? Das sind etwas andere Formen. Hier zeichnet die Turtle ein einfaches Fraktal mit drei Farben. Es heißt "Kochsche Schneeflocke":

Du kannst den Code in eine leere Datei kopieren und als Dateiendung .py anhängen. Dann kannst Du ihn ausführen.
Du kannst nun den Code verändern oder Du schreibst Deinen eigenen Code und guckst hier nur rein, um zu sehen wie etwas genau geschrieben wird.

Erklärung: Ok, hier wird es etwas kompliziert, weil man im Idealfall schon etwas programmieren kann, wenn man Schleifen verwendet. Aber wir bekommen das schon hin.

Hier ist der Code mit ausführlicher Erklärung:
Sorry, Bild fehlt

Die Erklärung hier ist wirklich sehr kurz. Ich empfehle Dir das nochmal woanders gründlich nachzulesen.

Hat es geklappt?
Sorry, Bild fehlt

Immer nur alleine rumrennen, da muss es doch noch mehr geben?

Die Turtle hat sich etwas einsam gefühlt. Also passierte, was passieren musste. Sie hat eine andere Turtle kennen gelernt und eine Familie gegründet. Da ist ganz schön was los.


Hier zwei Bilder, was die Turtles tun:
Sorry, Bild fehlt Sorry, Bild fehlt

Das Herz setzt sich zusammen aus geraden Linien und Kreisausschnitten

Jetzt ist es Zeit für Deine eigenen Ideen.
Vielleicht baut Deine Turtle ein Haus und darüber zeichnest Du einen tollen Regenbogen? Mit etwas Übung kann Deine Turtle die tollsten Kunststücke machen.

Die Turtle gehört zu der Programmiersprache Python. In dem Bereich zu Python kannst Du sie also nochmals treffen. Dort trifft sie sich mit anderen Turtles für ein Wettrennen.