# Processing

## Block 1
### Aufgabe 1 – Hello World
1. Downloade Processing von der offiziellen Processing Website.
- https://processing.org/download
2. Entpacke die ZIP-Datei an einem geeigneten Ort.
3. Starte processing.exe
4. Gib diesen Code im Processing-Editor ein:

> 

5. Starte das Programm und schau was in der Konsole ausgegeben wird.

---

### Aufgabe 2 – Take Off

1. Schreibe ein Programm, das den Text Three-Two-One - Takeoff! in der Konsole ausgibt. Wenn dein Programm funktioniert, solltest du den angegebenen Text in der Konsole lesen können, so wie nachfolgend exemplarisch zu sehen ist:

Three-Two-One - Takeoff! 

2. Ändere das Programm so, dass folgendes erscheint:

Three 

Two 

One 

Takeoff! 

3. Mit der delay Funktion kannst du eine Zeitverzögerung zwischen den einzelnen Ausgaben einbauen. Dann sieht es etwas mehr nach Countdown aus.

> *Benutze Google oder die offizielle Dokumentation von processing, um herauszufinden, wie man die delay-Funktion benutzt.*
> Processing Language Reference -> https://processing.org/reference/

4. Wenn das geklappt hat, dann mach doch einfach weiter und modifiziere dein erstes Programm nach deinen Wünschen. Ändere z.B. den Text oder füge weitere Anweisungen zur Textausgabe hinzu. Reflektiere dabei, wie dein Programm auf die Änderungen reagiert.

5. Bonus Aufgabe:
Schreibe ein Programm, das das folgende Muster in der Konsole ausgibt:

Sanduhr: 
***** 
 ***  
  * 
 *** 
***** 

Pizzastück: 
************ 
 *        *  
  *      *   
   *    *    
    *  * 
     ** 

---

## Block 2 - Variablen und Loops

| Datentyp | Größe | Bereich / Beschreibung | Beispiel |
|-----------|-----------|------------------------------------------|----------------------------|
| `int` | 32 bit | -2.147.483.648 bis 2.147.483.647 | `int zahl = 100;` |
| `float` | 32 bit | Ca. 7 Dezimalstellen Genauigkeit | `float pi = 3.14;` |
| `boolean` | 1 bit | `true` oder `false` | `boolean flag = true;` |
| `String` | Variabel | Zeichenfolge, keine feste Begrenzung | `String text = "Hallo";` |

### Aufgabe 3

Erweitere das folgende Programm so, dass die Funktion secretNumber() zwei Parameter hat: einen String und einen int. Erstelle dann ein einzelnes println in dieser Funktion, das diese Parameter verbindet. Beispiel: println(text + num); (wobei text und num die Variablennamen der Parameter sind).

void setup() {
  String text = "The secret nummber is";
  int num = 777;
  
}

void secretNumber() {
  println(text + " " + num);
}

Rufe nun die Funktion secretNumber() mit den korrekten Argumenten auf.

#### Erwartetes Ergebnis:
Output:
> The secret number is 777

### Aufgabe 4 (Advanced)

Erweitere das Programm, um die Geheimzahl mehrmals mit unterschiedlichen Texten und Zahlen auszugeben. Füge eine weitere Funktion namens `printRandomNumber()` hinzu, die eine zufällige Zahl zwischen einem gegebenen Minimum und Maximum generiert und ausgibt. Verwende diese Funktion, um mehrere Geheimzahlen zu generieren und anzuzeigen.

Schritte:
1. Erstelle die Funktion `printRandomNumber(String text, int min, int max)`, die eine zufällige Zahl zwischen min und max generiert und diese zusammen mit dem text ausgibt.
2. Ändere die Funktion setup(), um mehrmals die Funktion `printRandomNumber()` mit unterschiedlichen Texten und Zahlenbereichen aufzurufen.

**Hinweis zur Funktion random():**
Die Funktion `random(min, max)` in Processing erzeugt eine zufällige Zahl zwischen min (einschließlich) und max (ausschließlich). Um eine Ganzzahl zu erhalten, kann man die Funktion `int(random(min, max+1))` verwenden. In dieser Aufgabe lernst du auch, dass Funktionen direkt an Variablenzuweisungen hinzugefügt werden können, zum Beispiel: `int num = int(random(min, max + 1));`.

#### Erwartetes Ergebnis:

Input:

void setup() {
  printRandomNumber("The secret number", 1, 999);
  printRandomNumber("Another secret number is", 1, 999);
  printRandomNumber("Yet another secret number is", 1, 999);
}

Output:

> The secret number is 523
> Another secret number is 107
> Yet another secret number is 892

---

## Block 3 - Canvas

### Aufgabe 5 – Fünf Kreise

In dieser Aufgabe wollen wir die unten dargestellte Form programmieren: Erstelle ein neues Programm mit der Fenstergröße 800x600 Pixel. Dafür brauchst du die `size()` Funktion.

void setup() {
  size(800, 600); // Setzt die Größe des Zeichenfensters
}

**Lies zuerst den folgenden Artikel: [`Coordinate System and Shapes`](https://processing.org/tutorials/coordinatesystemandshapes)**

### Hinweise:
1. **Fenstergröße:** Verwende die Funktion [`size(width, height)`](https://processing.org/reference/size_.html), um die Fenstergröße auf 800x600 Pixel zu setzen.
2. **Hintergrundfarbe:** Verwende die Funktion [`background()`](https://processing.org/reference/background_.html), um die Hintergrundfarbe des Fensters zu ändern.
3. **Kreise zeichnen:** Verwende die Funktion [`ellipse(x, y, width, height)`](https://processing.org/reference/ellipse_.html) oder [`circle(x, y, diameter)`](https://processing.org/reference/circle_.html), um die Kreise zu zeichnen.
4. **Füllfarbe:** Verwende die Funktion [`fill(r, g, b)`](https://processing.org/reference/fill_.html), um die Füllfarbe der Kreise zu ändern. Hier sind einige RGB-Farbwerte, die du verwenden kannst:

| Farbe | RGB-Wert | Beispielcode |
|---------|---------------------|------------------------|
| Rot | (255, 0, 0) | `fill(255, 0, 0);` |
| Grün | (0, 255, 0) | `fill(0, 255, 0);` |
| Blau | (0, 0, 255) | `fill(0, 0, 255);` |
| Gelb | (255, 255, 0) | `fill(255, 255, 0);` |

> Weitere RGB Farben kannst Du auf folgender Website generieren:
> https://www.w3schools.com/colors/colors_rgb.asp

#### Beispiel füllfarbe:

  fill(150, 111, 51); // Setzt die Farbe des Hauskörpers
  rect(300, 300, 200, 200); // (x, y, Breite, Höhe)

#### Aufgabe:
1. Zeichne fünf Kreise nebeneinander. Benutze hierfür die `ellipse()` oder `circle()` Funktion in Processing.
2. Färbe jeden Kreis in einer anderen Farbe ein.
3. Ändere die Hintergrundfarbe des Fensters.
4. Zeichne zusätzlich einige andere Formen wie Vierecke oder Linien. Schaue in der Processing-Referenz unter der Kategorie ["2D Primitives"](https://processing.org/reference/#shape) nach, um zu sehen, welche Funktionen es gibt und welche Parameter sie benötigen.

#### Erwartetes Ergebnis:

### Aufgabe 6 – Würfelzahl 5

In dieser Aufgabe wollen wir die unten dargestellte Form programmieren: Erstelle ein neues Programm mit der Fenstergröße 600x600 Pixel. Kommentiere deine Codezeilen.

### Hinweise:
1. **Fenstergröße:** Verwende die Funktion [`size(width, height)`](https://processing.org/reference/size_.html), um die Fenstergröße auf 600x600 Pixel zu setzen.
2. **Hintergrundfarbe:** Verwende die Funktion [`background(50, 50, 50);
`](https://processing.org/reference/background_.html), um die Hintergrundfarbe des Fensters zu ändern. ( 50, 50, 50 = Grau)
3. **Kreise zeichnen:** Verwende die Funktion [`ellipse(x, y, width, height)`](https://processing.org/reference/ellipse_.html) oder [`circle(x, y, diameter)`](https://processing.org/reference/circle_.html) für die Kreise.
4. **Positionierung:** Zeichne die Kreise an den Ecken des Fensters und einen Kreis in der Mitte, um die Zahl 5 darzustellen.
5. **Kommentiere deinen Code:** Verwende Kommentare, um die einzelnen Schritte deines Programms zu erklären. Das hilft dir, den Code später besser zu verstehen und zu pflegen.

### Aufgaben:
1. Zeichne fünf Kreise, die die Form einer Würfelzahl 5 darstellen.
2. Kommentiere deine Codezeilen, um die Funktion der einzelnen Teile zu erklären.

#### Erwartetes Ergebnis:

## Block 4 draw() und Kontrollstrukturen

### Aufgabe 7

Bis jetzt lief dein Programmcode sequentiell von oben nach unten. Nun wollen wir mit einer Selektion gewisse Anweisungen unter eine Bedingung (Selektion) stellen. Somit wird ein gewisser Code nur ausgeführt, sobald eine gewisse Bedingung erfüllt (true) ist.

Für diese Übung brauchst du folgendes Code-Gerüst:

void setup() { 
  //Fenstergrösse 
  //Hintergrund 
  //usw... 
  //kommt hier. 
} 

void draw() { 
  //Logik der Aufgabe  
  //kommt hier   
} 

**Teil 1:**

Erstelle ein neues Programm mit der Bildschirmgrösse 800x600. Alles was jetzt kommt, wird innerhalb von draw() programmiert.

Mit der von Processing vordefinierten Variable mouseY bzw. mouseX kannst du die momentane Mausposition ermitteln. Gib diese beiden Variablen erst mal in der Konsole aus. Starte das Programm und fahre mit der Maus auf der Fensteroberfläche. Beobachte dabei die Konsolenausgabe.

An der Position des Maus-Cursors soll nun ein Kreis mit Höhe 50 und Breite 50 gezeichnet werden. Dieser Kreis bewegt sich nun 1:1 mit der Maus.
> hint: `int kreis_y = mouseY;`

**Teil 2:**
Sobald der Mauszeiger auf der Y-Achse über der Mitte des Bildschirms liegt, soll der Bildschirmhintergrund weiss sein → ansonsten Schwarz.

Der Maus-Kreis soll weiss sein, wenn der Hintergrund Schwarz ist (und umgekehrt).

>Hilfestellung zu if-Anweisung: https://michaelkipp.de/processing/if.html.


### Aufgabe 8
In dieser Aufgabe kannst du dein Know-how von Variablen, Operatoren und der Selektion verbessern. Auch lernst du logische Verknüpfungen einzusetzen. In nachfolgender Aufgabe brauchst du wieder einen setup() und einen draw() Funktionsblock.

Studiere folgenden Code: Gibt es bei den println Zeilen jeweils true oder false?

Notiere die Ausgabe im notepad (vorerst ohne zu schummeln und den Code in Processing einzugeben).

boolean result = false; 
int x = 7; 

result = (x > 7); 
println("1. Resultat: " + result); 

result = (x == 7); 
println("2. Resultat: " + result); 

result = (x == 5 || x >= -7); 
println("3. Resultat: " + result); 

result = (x == 5 && x >= -7); 
println("4. Resultat: " + result); 

result = (x != 8 || x == 0 ); 
println("5. Resultat: " + result); 

result = (2 * x - 1 < 14 || x / 7 == 3); 
println("6. Resultat: " + result); 

result = (x - 2 == 5 && x != 8); 
println("7. Resultat: " + result); 

### Aufgabe 9
> Hilfestellung:
> https://processing.org/tutorials/gettingstarted
> https://processing.org/reference/
> google :)

Erstelle ein Fenster mit der Grösse 800x600 Pixel.

Definiere die Variablen posX, speedX und diameter als ganze Zahlen oberhalb des setup() Funktionsblocks (als globale Variablen). Die Variable speedX soll den Wert 3 erhalten, posX soll den Wert 300 erhalten. Die Variable diameter (Durchmesser) setzt du auf 50.

Zeichne nun einen Kreis innerhalb des draw() Funktionsblocks. Für die X-Position des Kreises setzt du die Variable posX ein. Für die Y-Position nimmst du 300. Für den Durchmesser des Kreises setzt du die Variable diameter ein.

Erhöhe nun in einer separaten Anweisung die posX um den Betrag speedX. Mach dies im draw() Funktionsblock ganz unten. Was passiert?

Was passiert wenn du für speedX einen negativen Wert (z.B. -3) definierst?

Sorge nun dafür, dass der “Ball” an der rechten Bildschirmseite wieder abprallt und nach links fliegt. Dafür brauchst du ein if-Statement. Für die Linksbewegung kannst du den speedX negativ machen in dem du den Betrag mal -1 rechnest.

Mit dem gleichen Prinzip kannst du den Ball nun am linken Bildschirmrand abprallen lassen. Du erinnerst dich sicherlich gerne an den Mathe Unterricht: “Minus mal Minus gibt Plus” :-)

Wenn du jetzt für die Y-Position auch noch eine Variable machst (posY) und ebenfalls einen Speed (speedY) definierst, so kannst du den Ball auch an dem oberen und unteren Bildschirmrand abprallen lassen. YAY!

Benutze in dieser Aufgabe die von Processing definierten Variablen height und with. Somit funktioniert dein Programm immer noch, auch wenn du eine andere Fenstergrösse via size() machst. Probiere es aus!

Zusatz: Bei jedem Abprallen soll der Ball schneller werden.
Expert Zusatz: Steurung mit der Tastatur.

### Aufgabe 10 (Optional) ADVANCED:
https://processing.org/tutorials/objects

>Weitere Processing Hilfestellungen und Tutorials:
>https://michaelkipp.de/processing/
>https://happycoding.io/tutorials/processing/