====== Programmieren I: Programmieren mit TurtleGraphics (2022-2023) ======

===== - Einführung =====

Ein Computer ist zunächst einfach mal eine Maschine, die wahnsinnig schnell arbeiten (rechnen) kann. Damit man zum Beispiel ein Spiel spielen können, muss irgend jemand dem Computer also sagen, was er denn genau zu tun hat. Jemand muss also ein **Computerprogramm**, oder **Code**, schreiben. Dieses besteht aus //Befehlen, die der Computer auszuführen// hat. Damit der Computer auch versteht, was er machen soll, müssen Programmierer und Computer 'die gleiche Sprache' sprechen. Es gibt sehr viele unterschiedliche solche Programmiersprachen mit unterschiedlichen Anwendungsbereiechen und Vor- und Nachteilen.

Wir wählen hier die Programmiersprache **Python**. Im Jahre 2020 ist diese Sprache sicher in der Top 3 der wichtigsten Programmiersprachen - wenn nicht sogar auf dem ersten Platz. Dazu kommt, dass Python im Vergleich zu anderen Sprachen, z.B. C\+\+ (C Plus Plus), Java oder C# (C Sharp) relativ einfach zu erlernen ist. 

Wenn wir einen Satz mit vielen Schreibfelern und Grammatikfehler lesen, so sind wir meist trotzdem in der Lage, den Satz zu verstehen. Im Gegensatz zu uns hat ein Computer aber keine Intelligenz und ist deshalb nicht in der Lage, einen Text selbst zu interpretieren. Ein Computer kann ein Programm nur ausführen, wenn es gar keine Fehler, sogenannte **Bugs**, hat. Es ist deshalb ganz wichtig, dass man sich an die formalen Vorgaben der Programmiersprache hält.

Wie gesagt werden wir in der Programmiersprache Python programmieren. Wir brauchen aber noch ein Programm, um unseren Code zu schreiben und auszuführen, eine sogenannte **IDE (Integrated Development Environment, auf Deutsch Entwicklungsumgebung)**. Dazu wählen wir die IDE **TigerJython**.


==== Installation ==== 


Gehe auf die Website [[https://www.tjgroup.ch/index.php?site=download|TigerJython]] und lade die passende Version von TigerJython für dein Betriebssystem hinunter und installiere diese.

*Tipp:* Höchswahrscheinlich benötigst du die 64-bit Version

*Achtung Mac User:* Mac User befolgen für die Installation die Schritte auf folgender Seite: [[https://www.tjgroup.ch/index.php?site=installMac]]
==== Entwicklungsumgebung ==== 

Das Menu in TigerJython oben links sieht aus wie folgt:

{{:fms_tigerjython:tigerjython_ide.png?300|}}

Die wichtigsten Befehle, die du in TigerJython brauchst, sind die vier Symbole ganz links:

  * **Neues Projekt** erstellen (Ctrl+N)
  * Bestehendes Projekt **öffnen** (Ctrl+O)
  * **Speichern** (Ctrl+S)
  * Programm **ausführen** (F5)

Du solltest dir angewöhnen, möglichst wenig mit der Maus zu machen und anstelle die Tastatur benutzen. Besonders die Taste F5 (Programm ausführen) ist sehr praktisch.


==== Aufgaben ====

   * In jedem Kapitel gibt es ein **Set an Aufgaben**. Jedes Set ist mit einem Buchstaben gekennzeichnet.
   * Erstelle an einem Ort auf deinem Computer, der mit OneDrive synchronisiert wird, einen Ordner für die Informatik und darin einen Unterordner für dieses Thema, z.B.: `Informatik\Programmieren 1\`
   * Erstelle für **jede Aufgabe ein eigenes File**. Benenne dieses nach dem folgenden Schema: Aufgabe B2 in File `aufgabe_B_2`
   * Für einige Aufgaben wird es **Musterlösung** geben, aber nicht für alle. Falls du dir unsicher bist: Frage bei der Lehrperson nach.
   * Du bist **selbst verantwortlich**, dass du alle Aufgaben gelöst hast.

==== Tipps ====

   * Im Dossier gibt es viele kleine **Code-Beispiele**. Tippe diese jeweils //von Hand ab// und versuche, alles zu //verstehen//. Wenn du den Code per Copy-Paste kopierst, lernst du gar nichts!
   * Nutze **Autocomplete**: Tippe die ersten paar Buchstaben eines Befehls (z.B. *fo* für *forward*) ein. Drücke dann Ctrl+Leertaste. Dir werden dann alle Möglichkeiten, wie deine Einfabe erweitert werden könnte, angezeigt. Mit diesem Vorgehen bist du schneller und *vermeidest Schreibfehler*!
   * Verwende **Shortcuts**:
      * F5: Code ausführen
      * Ctrl+S: Speichern (mache dies regelmässig!)
      * Generell: Benutze die Maus so wenig wie möglich!

===== - Einfache Bewegungen =====

Kreiere ein neues Projekt und nenne es *turtle_01.py* und füge diesem folgenden Inhalt hinzu:

<code python>
from gturtle import *

Options.setPlaygroundSize(800,600)

fritz = Turtle()

fritz.forward(100)
</code>

Verwende anstelle von *fritz* deinen Namen (keine Bindestriche im Namen!)

Erklärung der Zeilen:
  - Zuerst musst du das *Modul gturtle importieren*, damit wir mit Turtlegrafik arbeiten können.
  - Mit dem Befehl `Options.setPlaygroundSize(800,600)` wird die Fenstergrösse auf 800x600 Pixel festgelegt.
  - Erzeuge einen neuen Turtle mit einem Namen. Man nennt dieses auch ein *Turtle-Objekt*.
  - Gib deinem Turtle den Befehl, 100 Pixel vorwärts zu laufen.

Du kannst deinem Turtle nun auch sagen, er soll sich um einen gewissen Winkel drehen oder rückwärts laufen. Die wichtigsten Befehle sind:

^ Befehl ^ Beschreibung ^
| forward(s) | s Schritte (in Pixel) vorwärts bewegen         |
| back(s)    | s Schritte rückwärts bewegen                   |
| right(w)   | um den Winkel w (in Grad) nach rechts drehen   |
| left(w)    | um den Winkel w nach links drehen              |
| home()     | setzt Turtle in die Mitte des Fensters mit Richtung nach oben |
| setPos(-100,50) | Setzt Turtle an Position (-100,50) |
| setX(30)     | setzt x-Koordinate des Turtles |
| setY(30)     | setzt y-Koordinate des Turtles |
| hideTurtle()     | Turtle versteckt sich, darauf folgende Befehle werden instantan ausgeführt |
| Options.setPlaygroundSize(800,600) | Fenstergrösse (hier: 800 x 600 Pixel) |

==== Aufgaben A ====

=== Aufgabe A1 ===

Mache dich mit all diesen **Befehlen vertraut** und probiere sie aus.

=== Aufgabe A2 ===

Programmiere dein Turtle so, dass es ein **Quadrat** abläuft.

=== Aufgabe A3 ===

Programmiere deinen Turtle so, dass er **deinen Namen**, Spitznamen oder zumindest deine Initialen abläuft.

=== Aufgabe A4 ===

Wahrscheinlich hast du die letzte Aufgabe (Quadrat ablaufen) so gelöst, dass dein Code aus 4x genau den gleichen vier Zeilen Code besteht. Dies ist zwar richtig, vom Programmierstyle her aber nicht sehr elegant. Mit `repeat` kannst du sagen, dass du einen Codeblock eine gewisse Anzahl mal hintereinander ausführen möchtest:

<code python>
repeat 4:
    # schreibe hier deinen Code
</code>

Bemerkungen:
   * Der Codeblock, welcher mehrfach Wiederholt werden soll muss nach dem `repeat` Befehl **eingerückt** sein, und zwar um genau 4 Leerzeichen (oder 1x Tab).
   * **Kommentare** werden in Python mit `#` gekennzeichnet. Kommentare werden von Python *ignoriert*. Man kann diese z.B. brauchen, um im Code Erklärungen anzufügen, damit jemand andere den Code besser verstehen kann.

Mache eine Kopie deiner Lösung aus Aufgabe A2. Schreibe nun deine Lösung um, indem du den `repeat` Befehl verwendest.

===== - Kreisbogen =====

Um einen Turtle namens *Fritz* einen **Punkt** mit Radius 20 Pixel zeichnen zu lassen, tippe einfach:

<code python>
fritz.dot(20)
</code>

Bisher haben wir unsere Turtles ausschliesslich gerade Linien laufen lassen. Um auf einem **Bogen** (engl. "arc") zu gehen, verwende die Befehle

<code python>
fritz.rightArc(r, w)
fritz.leftArc(r, w)
</code>

Diese beiden Funktionen zeichnen einen Bogen nach rechts (`rightArc`) und nach links (`leftArc`). Diesen Funktionen muss man zwei Zahlen als Argumente übergeben:

   * Zahl r: Radius des Kreises in Pixel
   * Zahl w: Winkel in Grad

Zum Beispiel zeichnet man mit dem Befehl `rightArc(100, 180)` einen Halbkreis (180 Grad Winkel) mit Radius 100 Pixel.

==== Aufgaben B ====

=== Aufgabe B1 ===

Verwende die Befehle `dot(), forward(), right(), left()`, um folgende Figur zu zeichnen:

{{:gf_informatik:s1a4.png?300|}}

Versuche nun deinen Code zu kurz wie möglich zu schreiben. Vermeide Code-Wiederholungen, arbeite deshalb mit `repeat`.

=== Aufgabe B2 ===

Zeichne mit Hilfe der Befehle `rightArc()` und `leftArc()` die nebenstehende Figur.

{{:gf_informatik:a1_6.png?300|}}

=== Aufgabe B3 ===

Zeichne die folgende Schmetterling-Figur:

{{: gf_informatik:butterfly.png?250|}}

=== Aufgabe B4 ===

Zeichne die folgenden Figuren;

{{:gf_informatik:s1a123.png?600|}}

=== Aufgabe B5 ===

Gelingt es dir die nebenstehende Figur in einem Zug zu zeichnen, ohne dass dabei eine Strecke zweimal durchlaufen wird?

{{: gf_informatik:s1a5.png?200|}}


===== - Farben (**Optional) =====

Wir haben gelernt, wie man mit einem Turtle Figuren zeichnen kann. Nun wollen wir noch etwas Farbe ins Spiel bringen!

==== Flächen füllen ====

Just for fun: Kopiere den folgenden Code eine und führe diesen aus:

<code python>
from gturtle import *

fritz = Turtle()

fritz.setPos(-50, 50)
fritz.setPenColor("red")
repeat 4:
    repeat 3:
        fritz.forward(100)
        fritz.right(90)
    fritz.left(180)
fritz.setFillColor("red")
fritz.fill(-60, 60)
</code>

Studiere den Code Zeile für Zeile. Stelle sicher, dass du folgende Befehle genau verstehst:

^ Befehl ^ Erklärung^
| setPenColor('red') | Legt die **Farbe des Stiftes** fest.|
|setPenWidth(10)| Legt die **Breite des Stiftes** fest.|
| setFillColor('blue') | Legt die **Farbe der Füllung** fest.|
| fill(x,y) | **Füllt die geschlossene Fläche**, in der sich der Punkt mit den Koordinaten (x, y) befindet. |
| penUp() | Hebt den Stift, es wird also **nicht gezeichnet** |
| penDown() | Setzt Stift wieder ab, es wird also wieder **gezeichnet** |

==== Farbe auswählen ====

Viele Farben sind vordefiniert und können über ihren englischen Begriff aufgerufen werden:
`"blue"`, `"red"`, `"green"`, ...

Mit dem Befehl `askColor` wird ein Fenster geöffnet, in welchem man eine Farbe auswählen kann:
<code python>
farbe = askColor("Hallo, ich bin ein Titel!", "red")
</code>

   * Die Funktion `askColor` verlangt zwei Argumente:
      * Einen Titel.
      * Die Farbe, welche zu Beginn ausgewählt sein soll
   * Die ausgewählte Farbe wird in der Variablen `farbe` gespeichert. Diese kann dann weiter verwendet werden, z.B. kann man mit `setPenColor(farbe)` die ausgewählte Farbe als Stiftfarbe verwenden.

==== Sprites ====

Ein **Sprite** (engl. für Kobold) wird in der Computerwelt eine Figur in einem Computerprogramm (z.B. Game) genannt. Standardmässig wird in der Turtlegrafik eine Schildkröte als Sprite gewählt, es gibt aber auch viele andere Sprites, wie z.B. einen Tiger: 

<code python>
fritz = Turtle("sprites/tiger_0.gif")
</code>

Eine Übersicht über alle Sprites findest du hier:
https://www.programmierkonzepte.ch/index.php?inhalt_links=navigation.inc.php&inhalt_mitte=sprites.html

Natürlich kannst du auch ein eigenes Bild als Sprite laden. Speichere dazu dein Bild in den //gleichen Ordner wie das Python-Projekt//. Ein Bild //foto.jpg// kannst du dann wie folgt laden:

<code python>
fritz = Turtle("foto.jpg")
</code>

Unter anderem funktioniert dies für folgende Formate: JPG, PNG, GIF

Typische Fehler:

   * Foto und Projekt in unterschiedlichen Ordnern
   * Dateinamenserweiterung (z.B. //.jpg//) wurde vergessen
   * Filenamen muss zu 100% stimmen, auch Gross-/Kleinschreibweise ist wichtig
   * Achtung, TigerJython hat Mühe mit Pfaden, die Leerstellen enthalten...


==== Hintergrundbild ====

Füge ein Bild, z.B. mit Namen //schottland.jpg// in den Ordner, wo das Projekt gespeichert wurde.
<code python>
from gturtle import *
 
fritz = Turtle()
fritz.drawImage("schottland.jpg")
</code>

==== Aufgaben C ====

=== Aufgabe C1 ===

Zeige ein Hintergrundbild an. Zeichne darüber verschiedene geometrische Formen in verschiedenen Farben.

=== Aufgabe C2 ===

Mache **Kunst** mit Turtlegrafik! Überlege dir selbst ein Motiv. Wie wäre es mit etwas, was zur aktuellen Saison passt?


===== - Lösungen =====

<nodisp 1>
++++Lösungen|
==== Aufgaben A ====

<code python aufgabe_A2.py>
from gturtle import *
 
fritz = Turtle()

fritz.forward(100)
fritz.left(90)
fritz.forward(100)
fritz.left(90)
fritz.forward(100)
fritz.left(90)
fritz.forward(100)
fritz.left(90)
</code>


<code python aufgabe_A3.py>
from gturtle import *
 
fritz = Turtle()

# Buchstabe: K
fritz.setPos(-200,-100)
fritz.forward(200)
fritz.setPos(-200,0)
fritz.right(45)
fritz.forward(141)
fritz.setPos(-200,0)
fritz.right(90)
fritz.forward(141)

# Buchstabe: S
fritz.setPos(-50,-100)
fritz.left(45)
fritz.forward(100)
fritz.left(90)
fritz.forward(100)
fritz.left(90)
fritz.forward(100)
fritz.right(90)
fritz.forward(100)
fritz.right(90)
fritz.forward(100)

# Buchstabe: R
fritz.setPos(100,-100)
fritz.left(90)
fritz.forward(200)
fritz.right(90)
fritz.forward(100)
fritz.right(90)
fritz.forward(100)
fritz.right(90)
fritz.forward(100)
fritz.left(135)
fritz.forward(141)
</code>


<code python aufgabe_A4.py>
from gturtle import *

fritz = Turtle()

repeat 4:
    fritz.forward(100)
    fritz.left(90)
</code>

==== Aufgaben B ====

<code python aufgabe_B1.py>
from gturtle import*

Options.setPlaygroundSize(1000,400)

matteo = Turtle()
matteo.setPos(-450,-100)

repeat 4:
    matteo.dot(20)
    matteo.right(45)
    matteo.forward(150)
    matteo.dot(20)
    matteo.right(90)
    matteo.forward(150)
    matteo.left(90+45)
</code>


<code python aufgabe_B2.py>
from gturtle import *

Options.setPlaygroundSize(800,800)

matteo = Turtle()
matteo.setX(-300)

matteo.rightArc(300, 180)
matteo.rightArc(150, 180)
matteo.leftArc(150, 180)
</code>


<code python aufgabe_B3.py>
from gturtle import *

Options.setPlaygroundSize(1000,1000)

matteo = Turtle()

matteo.rightArc(100, 360)
matteo.rightArc(200, 360)
matteo.rightArc(400, 70)
matteo.home()
matteo.leftArc(100, 360)
matteo.leftArc(200, 360)
matteo.leftArc(400, 70)
</code>

<code python aufgabe_B4.py>
from gturtle import *
 
Options.setPlaygroundSize(800,600)
 
anna = Turtle()
anna.hideTurtle()

# 1
anna.setPos(-350,-100)

repeat 3:
    anna.forward(200)
    anna.right(120)

# 2
anna.setPos(-100,-50)

repeat 6:
    anna.forward(100)
    anna.right(60)

# 3
anna.setPos(150,-50)

repeat 2:
    anna.forward(100)
    anna.right(90)
repeat 3:
    anna.forward(100)
    anna.left(90)
</code>

<code python aufgabe_B5.py>
from gturtle import *
 
Options.setPlaygroundSize(800,600)
 
josef = Turtle()
#josef.hideTurtle()

josef.setPos(350,-100)

m = 200
l = m*sqrt(2)
s = m/sqrt(2)

josef.left(45)
josef.forward(l)
repeat 2:
    josef.right(90)
    josef.forward(s)
josef.right(90)
josef.forward(l)
josef.right(135)
josef.forward(m)
repeat 3:
    josef.right(90)
    josef.forward(m)
</code>
++++
</nodisp>