\section{Die ersten Programme}

\subsection{Scratch-Oberfläche}
Die Oberflächen des Online- und Offline-Editors unterscheiden sich nicht, dadurch kann problemlos zwischen beiden gewechselt werden.\\
\begin{figure}[h]
	\centering
	\includegraphics[width=0.9\linewidth]{"images_eps/Aufbau_Scratch"}
	\caption{Scratch-Oberfläche}
	\label{fig:aufbau-scratch}
\end{figure}\\
Die Scratch-Oberfläche (siehe Abb. \ref{fig:aufbau-scratch}) teilt sich in vier Bereiche auf.
\subsubsection*{Bühne:}
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.\\
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.

\subsubsection*{Figurenliste:}
In der \textcolor{OliveGreen}{\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 (z.B. Größe) festlegen. Außerdem findest du dort auf der rechten Seite den Hintergrund deiner Bühne, die Bühnenbilder. Über den blauen Knopf in der ganz rechten unteren Ecke kannst du neue Bühnebilder hinzufügen.

\subsubsection*{Blockpalette:}
In der \textcolor{magenta}{\textbf{Blockpalette}} findest du die Blöcke, die du zum Programmieren brauchst. Du kannst ihre Funktionen dort direkt durch einen Doppelklick testen.
Ähnlich wie LEGO-Steine werden die Blöcke im \textcolor{blue}{\textbf{Programmierbereich}} zu einem Programm zusammengefügt.

\subsubsection*{Programmierbereich:}
Ähnlich wie LEGO-Steine werden die Blöcke im \textcolor{blue}{\textbf{Programmierbereich}} zu einem Programm zusammengefügt. Ziehe sie dazu mit der Maus aus der \textcolor{magenta}{\textbf{Blockpalette}} in den \textcolor{blue}{\textbf{Programmierbereich}}.\\
Du kannst ein Programm durch einen Doppelklick auf den Programmblock ausführen oder, falls du den entsprechenden Block an den Anfang des Programms gesetzt hast, mit der grünen Fahne.\\

\fbox{\parbox{\linewidth}{{\footnotesize \textit{\textbf{Hinweis:} Falls Scratch nicht mit der Standardsprache Deutsch gestartet ist, kann die Sprache über den Globus links oben geändert werden.}}}}

\begin{aufgabe}
	Du lernst nun, wie du eine neue Figur in deiner Programmierumgebung erstellst. Führe dafür folgende Schritte der Reihe nach aus.
	\begin{enumerate}
		\item Klicke auf den \glqq Katzenkopf\grqq{} in der unteren rechten Ecke.
		\item Suche nach der Figur mit dem Namen \glqq Beetle\grqq.
		\item Füge die Figur durch einen Klick auf diese ein.
		\item Klicke die Standardfigur mit dem Namen \glqq Figur1\grqq{}  einmal und lösche sie mit einem Klick auf das Mülleimersymbol. 
	\end{enumerate}
	Verwende für deine Programmieraufgabe in Zukunft die neue Beetle-Figur. Diese hat den Vorteil, dass du die Blickrichtung der Figur leicht erkennen kannst.
\end{aufgabe}

\subsection{Neue Befehle}
Zur Steuerung deiner Figur auf der Bühne gibt einige grundlegende Befehle. Diese findest du in Tabelle \ref{tab:grundbefehle}.\\
Die meisten Befehlsblöcke sind durch ihre Beschriftung selbsterklärend. Anonsten kannst du die Funktion herausfinden, indem du den Block in den Programmierbereich ziehst, ausführst und beobachtest, was mit deiner Figur auf der Bühne passiert.\\
%\begin{center}
%	\begin{table}[h]
%		\begin{tabular}{|m{5cm}|m{9cm}|c}
%			\hline
%			\tabbild[width=\linewidth]{"images_eps/befehl_10er"} & 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_eps/befehl_richtung"} & 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_eps/befehl_koords"} & Setzt die Figur auf die angegebenen Koordinaten  $ x=19 ; y=5 $. \\
%			\hline
%			\tabbild[width=\linewidth]{"images_eps/befehl_setze_x"} & Setzt die \textbf{x-Koordinate} der Figur auf 50. Die y-Koordinate bleibt unverändert.\\
%			\hline
%			\tabbild[width=\linewidth]{"images_eps/befehl_setze_y"} & Setzt die \textbf{y-Koordinate} der Figur auf 40. Die x-Koordinate bleibt unverändert. \\
%			\hline
%			\tabbild[width=\linewidth]{"images_eps/befehl_x"}& Ändert die x-Koordinate um die gegebene Zahl. Es sind sowohl positive, als auch negative Änderungen möglich. \\
%			\hline
%			\tabbild[width=\linewidth]{"images_eps/befehl_y"}& Ändert die y-Koordinate um die gegebene Zahl. Es sind sowohl positive, als auch negative Änderungen möglich. \\
%			\hline
%		\end{tabular}
%		\caption{Bewegung Grundbefehle}
%		\label{tab:grundbefehle}
%	\end{table}
%\end{center}

\begin{aufgabe}
	Finde heraus, was die Blöcke in der Tabelle bewirken. Tipp: Ziehe deine Figur, bevor du einen Block testest, immer auf eine zufällige Position auf der Bühne.
	\begin{center}
		\begin{table}[h]
			\begin{tabular}{|m{5cm}|m{9cm}|c}
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_10er"} & \\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_richtung"} &  \\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_koords"} & \\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_setze_x"} &\\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_setze_y"} &  \\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_x"}&  \\
				\hline
				\tabbild[width=\linewidth]{"images_eps/befehl_y"}& \\
				\hline
			\end{tabular}
			\caption{Bewegung Grundbefehle}
			\label{tab:grundbefehle}
		\end{table}
	\end{center}
\end{aufgabe}


\subsection{Erweiterungen}
Scratch bietet eine Vielzahl an Erweiterungsmöglichkeiten für die verschiedensten Anwendungsfälle.\\
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.\\
Für uns ist die Erweiterung \textit{Malstift} unverzichtbar. Damit kannst du die Auführung von Befehlen (und eventuelle Fehler im Programm) leichter nachvollziehen, weil die Figur ihre Bewegungen auf die Bühne zeichnet.

\begin{aufgabe}
	Füge deiner Blockpalette die Erweiterung \textcolor{OliveGreen}{\textbf{\textit{Malstift}}} hinzu.
\end{aufgabe}
\pagebreak

\begin{bsp}
	\label{bsp1}
	Überlege dir, welche Funktion die einzelnen Codeblöcke haben und notiere sie daneben. Skizziere neben dem Codeblock was die Figur bei der Ausführung des Programms auf die Bühne zeichnet. 
	\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}
			\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}
Überprüfe deine Hypothese, indem du den Codeblock programmierst und anschließend ausführst (Doppelklick auf den Codeblock).\\

% Das folgende Programm zeichnet ein Rechteck der Größe $100 \times 200$. Die Größe wird in der Anzahl der Schritte gemessen.\\
\end{bsp}

\newpage
\textbf{Speichere jede der folgenden Aufgaben in einer eigenen Datei ab. Der Dateiname soll die Nummer der Aufgabe sein (Bsp: ``Aufgabe 2.4'').}\\
\begin{aufgabe}
	Wandle das Programm aus Beispiel \ref{bsp1} so ab, dass die Figur 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 Figur laufen soll und an welchen Stellen sie sich drehen muss.\\
		\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.\\
	(Tipp: Du kannst in die Skizze unten mit Bleistift Eintragungen vornehmen.)
	\vspace{2cm}
	\begin{center}
		\includegraphics[width=0.3\linewidth]{images_eps/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_eps/befehl_pen_on"} & Schaltet den Malstift ein.\\
		\hline
		\tabbild[width=0.7\linewidth]{"images_eps/befehl_pen_off"} & 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_eps/befehl_del"} & Löscht alle bisherigen Malspuren, z.B. nachdem die Figur an ihrer Startposition angekommen ist. \\
		\hline
		\tabbild[width=\linewidth]{"images_eps/befehl_pen_color"} & Legt die Farbe des Stifts fest. Ein Klick in das Farbfeld öffnet den Farbeditor.\\
		\hline
		\tabbild[width=\linewidth]{"images_eps/befehl_pen_thick"} & 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 und Dicke der Linie so, dass es tatsächlich wie ein Blitz aussieht.
	\begin{center}
		\includegraphics[width=0.2\linewidth]{images_eps/blitz}
	\end{center}
\end{aufgabe}
\newpage
\begin{bsp}
	Im nächsten Schritt soll die Figur 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}
			\includegraphics[width=\linewidth]{images_eps/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}
			\includegraphics[width=\linewidth]{images_eps/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 Figur bereits an entsprechender Stelle.\\
		Als nächstes überlegen wir, um wie viel Grad sich die Figur 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 Figur 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.
		\vfill\columnbreak
		\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_eps/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_eps/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_eps/dreieck}
		\caption{Rechtwinkliges Dreieck}
		\label{fig:dreieck}
	\end{figure}
	\noindent 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, welches 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_eps/haus_nikolaus"}
		\caption{Schema Haus des Nikolaus}
		\label{fig:haus-nikolaus}
	\end{figure}
	Zeichne die in das Feld einmal das Haus des Nikolaus, so wie du es zeichnen würdest. Achte darauf, dass keine Seite doppelt gezeichnet werden darf! Zeichne nun die acht Zeichenschritte als einzelne Bilder nebeneinander, damit hast du einen leichteren Überblick über die einzelnen Programmierschritte.\\
	(Tipp: Füge nach jeder gezeichneten Seite einen Warteblock mit 1 Sekunde ein)
	
\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 Figur ein Segelschiff wie in der Skizze zeichnet. Verwende die Maßangaben aus der Skizze.
	\begin{figure}[H]
		\centering
		\includegraphics[width=\linewidth]{images_eps/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 Figur soll sich am Ende verstecken.
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.4\linewidth]{images_eps/quadrat}
		\label{fig:quadrat}
	\end{figure}
\end{aufgabe}
