\section{Die ersten Programme}

\subsection{Scratch-Oberfläche}
Die Oberflächen des Online- und Offline-Editors sind identisch und sehr übersichtlich gestaltet.\\
\begin{figure}[h]
	\centering
	\includegraphics[width=0.9\linewidth]{"images/Aufbau Scratch"}
	\caption{Scratch-Oberfläche}
	\label{fig:aufbau-scratch}
\end{figure}\\
Die Scratch-Oberfläche teilt sich in vier Bereiche auf.\\
Auf der \textcolor{red}{\textbf{Bühne}} läuft alles ab, was du programmierst. Dort machen deine Figuren das, was du ihnen im \textcolor{blue}{\textbf{Programmierbereich}} aufträgst.\\
In der \textcolor{green}{\textbf{Figurenliste}} findest du alle Figuren, die in deinem Projekt dabei sind. Anfangs ist es nur eine Figur. Du kannst dort auch neue Figuren erzeugen und bestimmte Eigenschaften festlegen. Außerdem findest du dort auf der rechten Seite den Hintergrund deiner Bühne, die Bühnenbilder.\\
In der \textcolor{magenta}{\textbf{Blockpalette}} findest du die Blöcke, die du zum Programmieren brauchst. Du kannst sie entweder dort direkt durch einen Mausklick testen, oder mit der Maus in den \textcolor{blue}{\textbf{Programmierbereich}} ziehen und an ein Programm anfügen. Die Anweisungen werden in verschiedene Bereiche unterteilt, die sich farblich unterscheiden.\\
Ähnlich wie LEGO-Steine werden die Blöcke im \textcolor{blue}{\textbf{Programmierbereich}} zu einem Programm zusammengefügt.
\\
\fbox{\parbox{\linewidth}{\textbf{Hinweis:} Falls Scratch nicht mit der Standardsprache Deutsch gestartet ist, kann die Sprache über den Globus links oben geändert werden.}}

\subsection{Neue Befehle}
Die Bühne in Scratch ist wie ein Koordinatensystem in der Mathematik aufgebaut. Die x-Achse verläuft waagrecht und die y-Achse senkrecht. Der Ursprung ($ x=0 ; y=0 $) liegt im Mittelpunkt der Bühne.\\
Zur Steuerung der Katze auf der Bühne gibt es folgende grundlegende Befehle:\\

\begin{center}
	\begin{tabular}{|m{5cm}|m{8cm}|c}
		\hline
		\tabbild[width=\linewidth]{"images/befehl 10er.png"} & Die Figur bewegt sich 10 Schritte in die aktuelle Richtung. Setzt man eine negative Zahl für die Anzahl der Schritte, läuft die Figur rückwärts. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl richtung.png"} & Setzt die Richtung der Figur in Richtung des Pfeils. Die Gradzahl kann auch direkt eingegeben geben. $0^\circ$ ist dabei senkrecht nach oben und nimmt im Uhrzeigersinn zu. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl koords.png"} & Setzt die Figur auf die Koordinaten $ x=19 ; y=5 $. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl setze x.png"} & Setzt die x-Koordinate der Figur auf 50. Die y-Koordinate bleibt unverändert.\\
		\hline
		\tabbild[width=\linewidth]{"images/befehl setze y.png"} & Setzt die y-Koordinate der Figur auf 50. Die x-Koordinate bleibt unverändert. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl x.png"}& Ändert die x-Koordinate um die Zahl. Es sind sowohl positive als aus negative Änderungen möglich. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl y.png"}& Ändert die x-Koordinate um die Zahl. Es sind sowohl positive als aus negative Änderungen möglich. \\
		\hline
	\end{tabular}
\end{center}
Damit man die Befehle (und eventuelle Fehler im Programm) leichter nachvollziehen kann, lässt man seine Figur ihre Bewegungen auf der Bühne zeichnen. Dazu benötigt man die Erweiterung \textit{Malstift} für Scratch. Die Übersicht der verfügbaren Erweiterungen kann man über einen Klick auf das blaue Symbol in der linken unteren Ecke (siehe Abb. \ref{fig:aufbau-scratch}) öffnen. Ein zweiter Klick auf den \textit{Malstift} fügt diesen zur Blockpalette hinzu.
\pagebreak

\begin{bsp}
	\label{bsp1}
	Das folgende Programm zeichnet ein Rechteck der Größe $100 \times 200$. Die Größe wird in der Anzahl der Schritte gemessen.\\
	\begin{center}
		\begin{multicols}{2}
			\begin{scratch}
				\setxy{-100}{-50}
				\set{90}
				\delete
				\penon
				\move{200}
				\turnl{90}
				\move{100}
				\turnl{90}
				\move{200}
				\turnl{90}
				\move{100}
				\penoff
			\end{scratch}
			\begin{tikzpicture}
				\draw[step=0.5cm,color=gray,thin,xshift=0.5cm,yshift=0.5cm] (0,0) grid +(85mm,125mm);
			\end{tikzpicture}
		\end{multicols}
			
	\end{center}
	Überlege und skizziere neben dem Codeblock, welchen Weg die Katze bei der Ausführung des Programm läuft. Programmiere den Codeblock am Computer und überprüfe deine Hypothese, indem du ihn ausführen lässt (Doppelklick auf den Codeblock).

\end{bsp}
\textbf{Speichere jede der folgenden Aufgaben in einer einen Datei ab. Der Dateiname soll die Nummer der Aufgabe sein (Bsp:``Aufgabe 2.1'').}\\

\newpage
\begin{aufgabe}
	Wandle das Programm aus Beispiel \ref{bsp1} so ab, dass die Katze ein Quadrat der Größe $150 \times 150$ zeichnet.
\end{aufgabe}

\begin{aufgabe}
	Programmiere ein Skript für deine Figur so, dass sie ein gleichseitiges Dreieck mit der Seitenlänge 250 zeichnet. Gehe folgendermaßen vor:
	\begin{enumerate}
		\item Skizziere hier den Weg, den deine Katze laufen soll.\\
		\begin{tikzpicture}
			\draw[step=0.5cm,color=gray,thin,xshift=0.5cm,yshift=0.5cm] (0,0) grid +(160mm,50mm);
		\end{tikzpicture}
		\item Überlege, wie groß die Innenwinkel eines gleichseitigen Dreiecks sind. Die Figur dreht jeweils um $180^\circ$ minus den Innenwinkel des Dreiecks.
		\item Programmiere dein Skript in Scratch. (Tipp: Setze deine Figur zu Beginn deines Programms in das linke untere Viertel der Bühne.)
	\end{enumerate}
\end{aufgabe}

\begin{aufgabe}
	Schreibe ein Programm, dass die abgebildete Skizze zeichnet.\\
	Lege als erstes einen geeigneten Startpunkt fest und die Blickrichtung fest.
	\begin{center}
		\includegraphics[width=0.3\linewidth]{images/Rhombus}
	\end{center}
\end{aufgabe}

\newpage
\subsubsection*{Farben}
Die Figur kann in verschiedenen Farben und Strichstärken zeichnen. Hier eine kleine Übersicht:

\begin{center}
	\begin{tabular}{|m{5cm}|m{8cm}|c}
		\hline
		\tabbild[width=0.7\linewidth]{"images/befehl pen on.png"} & Schaltet den Malstift ein.  \\
		\hline
		\tabbild[width=0.7\linewidth]{"images/befehl pen off.png"} & Schaltet den Malstift aus. Es ist sinnvoll am Ende eines Programms den Stift auszuschalten um keine ungewollten Linien zu zeichnen, wenn die Figur danach bewegt wird. \\
		\hline
		\tabbild[width=0.7\linewidth]{"images/befehl del.png"} & Löscht alle bisherigen Malspuren, z.B. nachdem die Figur an ihrer Startposition angekommen ist. \\
		\hline
		\tabbild[width=\linewidth]{"images/befehl pen color.png"} & Legt die Farbe des Stifts fest. Ein Klick in das Farbfeld öffnet den Farbeditor.\\
		\hline
		\tabbild[width=\linewidth]{"images/befehl pen thick.png"} & Setzt die Strichstärke auf die gewünschte Größe. \\
		\hline
	\end{tabular}
\end{center}

\begin{aufgabe}
	Schreibe ein Programm, das einen Blitz (siehe Skizze) zeichnet. Wähle selbst die Länge der Linien und der Winkel. Bonus: Ändere die Farbe der Linie so, dass es tatsächlich wie ein Blitz aussieht.
	\begin{center}
		\includegraphics[width=0.2\linewidth]{images/Blitz}
	\end{center}
\end{aufgabe}
\newpage
\begin{bsp}
	Im nächsten Schritt soll die Katze ein regelmäßiges Sechseck wie in Abbildung \ref{fig:6eck} zeichnen.\\
	\begin{figure}[H]
		\begin{minipage}[b]{.4\linewidth} % [b] => Ausrichtung an \caption
			\centering
			\includegraphics[width=\linewidth]{images/6eck}
			\caption[Scratch-Figur Sechseck]{Sechseck}
			\label{fig:6eck}
		\end{minipage}
		\hspace{.1\linewidth}% Abstand zwischen Bilder
		\begin{minipage}[b]{.4\linewidth} % [b] => Ausrichtung an \caption
			\centering
			\includegraphics[width=\linewidth]{images/6eck2}
			\caption[Scratch-Figur Sechseck]{Sechseck mit Winkeln}
			\label{fig:6eck2}
		\end{minipage}
	\end{figure}

\begin{center}
	\begin{multicols}{2}
		Vor der Programmierung des Skripts müssen wir festlegen, an welcher Stelle unsere Figur mit dem Zeichnen beginnt. In Abb.\ref{fig:6eck} sitzt die Katze bereits an entsprechender Stelle.\\
		Als nächstes überlegen wir, um wie viel Grad sich die Katze nach dem Zeichnen einer jeden Seite drehen muss (siehe Abb. \ref{fig:6eck2}).Damit zum Schluss ein regelmäßiges Sechseck entsteht müssen alle sechs Winkel gleich groß sein. Die Katze startet mit Blickrichtung nach oben (In Scratch: Richtung $0^\circ$) und befindet sich am Schluss ihrer Bewegung wieder an ihrer Startposition. Sie hat nach dem 6-maligen eine vollständige Drehung von $360^\circ$ ausgeführt. Der Drehwinkel an jeder Ecke ist somit $\frac{360^\circ}{6}=60^\circ$. Die ist exakt der Nebenwinkel zum Innenwinkel des regelmäßigen Sechsecks.\\
		Nachdem wir jetzt den Ablauf des Programms kennen, können wir es in Scratch programmieren. Schreibe das Programm ab und führe es aus.
		\begin{center}
			\begin{scratch}
				\setxy{-50}{-50}
				\delete
				\penon
				\set{0}
				\move{100}
				\turnr{60}
				\move{100}
				\turnr{60}
				\move{100}
				\turnr{60}
				\move{100}
				\turnr{60}
				\move{100}
				\turnr{60}
				\move{100}
			\end{scratch}
		\end{center}
	\end{multicols}
	
\end{center}
	
	\label{bsp:6eck}	
\end{bsp}
\begin{aufgabe}
	Schreibe ein Programm, das ein regelmäßiges Fünfeck mit Seitenlänge 110 zeichnet. Gehe wie in Beispiel \ref{bsp:6eck} vor (Skizze auf Papier, Winkel einzeichnen ...).
\end{aufgabe}

\pagebreak




\subsection{Programme mit Rechnungen}
Computer können mathematische Berechnungen sehr schnell durchführen, weshalb sie auch "Rechner" genannt werden. Rechnungen sind in Scratch im Block \textcolor{green}{\textit{Operatoren}} untergebracht.
\begin{bsp}
	Wir wollen den Term $(163\cdot 3)-(77\cdot 4)$ berechnen lassen. Dafür schreiben wir in Scratch folgendes Programm:
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.4\linewidth]{"images/bsp rechnen"}
		\label{fig:bsp-rechnen}
		\caption{Beispiel für die Berechnung eines mathematischen Terms.}
	\end{figure}
\end{bsp}
Ein Klick auf den Codeblock führt die Berechnung aus und zeigt das Ergebnis in einer Sprechblase darunter an.
Damit lässt sich Scratch nicht nur als (umständlicher) Taschenrechner nutzen, sondern man kann diese Berechnungen direkt in seine Programme einbauen.
\begin{bsp}
	\begin{multicols}{2}
		Erinnern wir uns an Beispiel \ref{bsp:6eck}, in dem wir das regelmäßige Sechseck gezeichnet haben. Die Figur dreht sich in 6 Schritten insgesamt um $360^\circ$. Sie dreht sich an jeder Ecke um $\frac{360^\circ}{6}$. Wir müssen dies nicht selbst berechnen sondern können es das Programm überlassen. Unser Beispiel sieht jetzt aus wie nebenan.
		\columnbreak
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\linewidth]{"images/bsp 6eck rechnen"}
			\label{fig:bsp-6eck-rechnen}
		\end{figure}
	\end{multicols}	
\end{bsp}
\pagebreak
\begin{aufgabe}
	Schreibe ein Programm, das ein regelmäßiges Siebeneck zeichnet. Die Seitenlänge kannst du selbst wählen.
\end{aufgabe}

\begin{bsp}
	Wir möchten ein rechtwinkliges Dreieck wie in Abb. \ref{fig:dreieck} zeichnen. Das Dreieck hat einen $90^\circ$ und zwei $45^\circ$ Winkel. Die Katheten (kurzen Seiten) haben die Länge x. Die Länge der Hypothenuse y (lange Seite) lässt sich mit dem Satz des Pythagoras ("Die Summe der Kathetenquadrate ist gleich dem Quadrat der Hypothenuse") berechnen. Du lernst ihn in Klasse 9 im Fach Mathematik kennen. Für jetzt reicht das Ergebnis: $y \approx x\cdot 1,414214$.\\
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.3\linewidth]{images/dreieck}
		\caption{Rechtwinkliges Dreieck}
		\label{fig:dreieck}
	\end{figure}
	Anstatt die Länge umständlich vorher zu Berechnen, übernimmt dies jetzt unser Programm. Achte darauf, statt eines Dezimalkommas einen Dezimalpunkt zu verwenden.
	\begin{center}
		\begin{scratch}
			\setxy{-50}{-50}
			\delete
			\penon
			\set{45}
			\move{70}
			\turnr{90}
			\move{70}
			\turnr{135}
			\move{\mult{70}{1.414214}}
		\end{scratch}
	\end{center}
	\label{bsp:dreieck-rechtwinklig}
\end{bsp}
\pagebreak
\begin{aufgabe}
	Schreibe ein Programm, das mit Scratch das Haus des Nikolaus (sie Abb. \ref{fig:haus-nikolaus}) zeichnet. Es besteht aus mehreren rechtwinkligen Dreiecken wie in Beispiel \ref{bsp:dreieck-rechtwinklig}. Damit kannst du überlegen, wie viel länger/kürzer die einzelnen Strecken sind. Das Grundquadrat hat eine Seitenlänge von 185.
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.3\linewidth]{"images/haus nikolaus"}
		\caption{Schema Haus des Nikolaus}
		\label{fig:haus-nikolaus}
	\end{figure}
	
\end{aufgabe}
\pagebreak
\subsection{Teste dich selbst}
\subsubsection*{Wissensfragen}
\begin{enumerate}
	\item Was haben Computer mit Automatisierung zu tun?
	\notes[10pt]{1}{\textwidth}
	\item Ist eine Programmiersprache eine Sprache?
	\notes[10pt]{1}{\textwidth}
	\item Wozu dienen Programmiersprachen?
	\notes[10pt]{1}{\textwidth}
	\item Was ist ein Programm?
	\notes[10pt]{1}{\textwidth}
	\item Was haben Programme mit einer Programmiersprache zu tun?
	\notes[10pt]{2}{\textwidth}
	\item Welche Befehle hast du in Scratch kennen gelernt? Nenne 5.
	\notes[10pt]{2}{\textwidth}
	\item Beschreibe kurz den Ablauf des Codeausschnitts und zeichne das Bild dazu.
		\begin{center}
			\begin{multicols}{2}
				\begin{scratch}
					\move{100}
					\turnr{90}
					\move{100}
					\turnr{90}
					\move{100}
					\turnr{90}
					\move{100}
					\turnr{90}
				\end{scratch}
				\begin{tikzpicture}
					\draw[step=0.5cm,color=gray,thin,xshift=0.5cm,yshift=0.5cm] (0,0) grid +(85mm,85mm);
				\end{tikzpicture}
			\end{multicols}
				
			\end{center}
\end{enumerate}

\subsubsection*{Programmieraufgaben}
\begin{aufgabe}
	Schreibe ein Programm, das mit der Katze ein Segelschiff wie in der Skizze zeichnet. Verwende die Maßangaben aus der Skizze.
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.6\linewidth]{images/boot}
		\label{fig:boot}
	\end{figure}
\end{aufgabe}

\begin{aufgabe}
	Die folgende Abbildung zeigt ein kleines Quadrat, das um $45^\circ$ gedreht in einem großen Quadrat liegt. Die Seiten des großen Quadrats sind $1,414214$ Mal so lang wie dies Seiten des kleinen Quadrats.
	Schreibe ein Programm, dass diese Figur mir den zwei Quadraten zeichnet. Das große Quadrat soll eine Seitenlänge von $218$ haben und die Katze soll sich am Ende verstecken.
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\linewidth]{images/quadrat}
		\label{fig:quadrat}
	\end{figure}
\end{aufgabe}
