Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen:

Präsentation zum Thema: "Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen:"—  Präsentation transkript:

1 Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen:
openprocessing.org/visuals/?visualID=37337

2 Inhalte (verlinkt!) DesignByNumbers Variablen Processing IDE
Instanzvariablen Boolean Logik Processing & JAVA Koordinaten Verzweigungen Einfache Formen Schleifen Farben Methoden Code Grundgerüst Klassen Maus & Tasten noise NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

3 Design by Numbers: Ziele
Grafiken vom Computer zeichnen lassen, also programmieren  Beeindruckende Grafiken ... die man nicht von Hand zeichnen könnte Dynamische Grafiken ... die sich ständig verändern Interaktive Grafiken ... die auf Benutzerverhalten reagieren (Maus, Tasten,...) ... und zum Schluss alles zusammen, ggf. plus besondere Geräte (Website, Android Phone, Kinect, ...) besondere Grafik (Perlin Noise, Fraktale, 3D, ...) nicht nur Grafik, sondern auch Sounds NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

4 Design by Numbers: Mittel
Programmierumgebung & -sprache Processing, basierend auf JAVA Grundkenntnisse Programmieren Erarbeiten/Repetieren und viel üben Ideen und Kreativität Erst Beispiele variieren, dann eigenes Projekt Motivation und Eigenständigkeit können wir hoffentlich voraussetzen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

5 Design by Numbers: Ressourcen
Wiki Websites wikispaces.com Arbeitsblätter Folien Cheatcheets Links Einführungskurs auf Deutsch Konto erstellen, Sketches hochladen, zu unserem Classroom hinzufügen Hauptseite von Processing mit vielen Informationen, auf Englisch NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

6 Design by Numbers: Grobplanung
Montag & Dienstag Grundkurs Programmieren mit Processing (im Team) Materialien: & Folien Erfolgskontrolle: Arbeitsblätter Mittwoch Inputs zu: Projektplanung, Perlin Noise, ... (?) Projektskizze erstellen  anfangen Donnerstag & Freitag Arbeit am Projekt Ergebnisse auf ausstellen sagen Sie uns, was Sie interessiert NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

7 Processing IDE (integrated development environment)
Processing hat eine einfache IDE, die beim Erstellen und Verwalten von Programmen (=Sketches) hilft File: New, Open, Quit, Examples! Edit: Copy, Paste, Select, Indent, Comment… Sketch: Run, Stop, Show Sketch folder… Tools: Auto format, Color chooser… Help: Getting Started, Reference, Find in Reference… NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

8 IDE Menu Toolbar Sketch Tabs RUN Text Editor Message Line Text Area
Current Line# RUN Display Window Auch ausführen kann man Sketches direkt hier (Ctrl-R) Entweder öffnet sich das Programm in einem neuen Fenster oder man bekommt eine Fehlermeldung NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

9 Toolbar buttons NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

10 Sketch Files and Folders …
Der Ordner, in dem Ihre Programme gespeichert werden, heisst‘Sketchbook’ Sorgen Sie dafür, dass Ihre Sketche an einem für Sie zugänglichen Ort auf der Festplatte liegen benutzen Sie “save As…” oder ändern sie den Default-Ort: Ausserdem: bauen Sie Ihre Initialen in den Dateinamen ein Jeder Sketch hat seinen eigenen Ordner Die Datei, mit der Sie normalerweise arbeiten, hat die Endung .pde Beim Exportieren, ergeben sich andere (nicht mehr veränderbare) Versionen, in neuen Unterordnern, z.B. Web-Version (HTML & JavaScript) Betriebssystem-spezifisches Programm (z.B. .exe oder .app) Android Version NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

11 Ihr erstes Programm Öffnen Sie einen neuen Sketch Drücken Sie “Run”
Im Editor, tippen Sie: // Mein erstes Programm print(“Hallo Welt”); rect(10, 10, 50, 50); Drücken Sie “Run” Was ist im Message/Text Area? Was ist im Display window? Speicher Sie den Sketch an einen geeigneten Ort, unter einem geeigneten Namen z.B. D:/Dokumente/Processing/Sketches/NRHallo/NRHallo.pde NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

12 Fehler Vermutlich ist das Problem in dieser Zeile
Der Compiler beschreibt das Problem - hier ist es die GROSSSCHREIBUNG NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

13 Help, Find In Reference Doppelklick auf Befehl (wird in gelb hervorgehoben), dann Menu: Help  Find in Reference (oder Ctrl-Shift-F) funktioniert nur, wenn richtig geschrieben öffnet die richtige Seite in der Referenz (englisch) führt meistens ein Beispiel auf NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

14 Processing baut auf JAVA auf
Processing ist ein einfaches ‘front end’ für Java. Processing benötigt die JAVA SDK Software Development Kit Processing hat eigene Klassen für den Umgang mit Grafiken Processing-Sketches können als universale JAVA-Applications (.jar) exportiert werden Die üblichen JAVA-Bibliotheken können in Processing eingebunden werden Processing Source code Processing Library Java Compiler Portable Java Program Java NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

15 Die Java Virtual Machine (JVM)
Das besondere an JAVA ist, dass es innerhalb einer sogenannten Virtual Machine ausgeführt wird “Write once, run everywhere” – die JVM kümmert sich um die Betriebssystem-abhängigen Besonderheiten  JRE (Java Runtime Environment) Portable Java Program PC Mac Cell Phone Java VM Java VM Java VM Windows OS X Phone OS JRE x86 G3/4/5 CPU Running Java Program Running Java Program Running Java Program NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

16 Koordinaten in der Mathematik
Ursprung NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

17 Koordinaten am Computer
nicht dasselbe Koordinatensystem wie in der Mathematik! Ursprung Die obere linke Ecke ist 0,0 X (= erste Koordinate) zählt nach rechts Y (= zweite Koordinate) zählt nach unten NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

18 Einfache Formen Je nach Form braucht es verschiedene Informationen:
Point: x und y Line: Start & Endpunkt, also zweimal x und y Rectangle: Zwei Ecken? Oder??? Ellipse: ???? NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

19 Point In Processing: point(x, y);
‘point’(klein geschrieben) = vordefinierter Befehl in Klammern die Informationen (=Parameter) bei ‘point’zwei Zahlen, die Koordinaten angeben Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

20 Line In Processing: line(x1, y1, x2, y2);
‘line’(klein geschrieben) = vordefinierter Befehl in Klammern die Informationen (=Parameter) bei ‘line’zwei Zahlenpaare, die Koordinaten angeben Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

21 Rectangle 1 In Processing: rect(x, y, w, h);
‘rect’(klein geschrieben) = vordefinierter Befehl in Klammern die Informationen (=Parameter) bei ‘rect’die obere linke Ecke sowie Breite und Höhe Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

22 Rectangle 1b In Processing: rectMode(CENTER); rect(x, y, w, h);
‘rect’(klein geschrieben) = vordefinierter Befehl in Klammern die Informationen (=Parameter) bei ‘rect’der Mittelpunkt sowie Breite und Höhe Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

23 Rectangle 2 In Processing: rectMode(CORNERS); rect(x1, y1, x2, y2);
‘rect’(klein geschrieben) = vordefinierter Befehl in Klammern die Informationen (=Parameter) bei ‘rect’die obere linke Ecke sowie die untere rechte Ecke Semikolon; (nach jedem Befehl) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

24 Ellipse Modes Wie bei rect:
CORNER (x, y, width, height) CORNERS (x1, y1, x2, y2) CENTER (x, y, width, height) Zeichnet die Ellipse innerhalb dieser ‘Bounding box’ Ein Kreis is einfach eine spezielle Ellipse (width = height) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

25 Los geht‘s! Benutze einfache Formen, um ein Alien zu zeichnen!
zuerst auf Karopapier planen zuerst mit Standard-Farben dann mit Füllung, weitere Farben, dickere Striche,... NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

26 RGB-Farben Werden meist aus den drei Grundfarben Rot, Grün und Blau gemischt, z. B.: Rot + Grün = Gelb Grün + Blau = Cyan no colors = Black (!!) Werte gehen meist von 0 (= nichts) bis 255 (= maximal) (255, 0, 0)  knallrot (50, 0, 0)  hellrot (128)  mittleres Grau; zählt wie (128, 128, 128) (0, 0, 255, 128)  rot, halb transparent; ein vierter Wert gibt die Durchsichtigkeit an (0, 20)  schwarz, sehr transparent; zählt wie (0, 0, 0, 20) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

27 Farbwähler Processing hat einen eingebauten Farbwähler
Menüpunkt: Tools  Color Selector mit der Maus auswählen oder Farbwerte manuell eingeben RGB wie gehabt, ganz unten dasselbe im Hexadezimalsystem HSB = andere Methode, mit drei Werten eine Farbe anzugeben mit Code: colorMode(HSB); //H = hue; S = saturation; B = brightness mit colorMode kann man auch den Range der Farbwerte ändern, z.B.: colorMode(RGB,100); //RGB, aber Farbwerte von 0 bis 100 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

28 Anwendung von Farben // Hintergrundfarbe; gleich sichtbar
background(255); // 100% weiss background(0,255,0); // 100% grün background(255,255,0); // 100% gelb // Rahmenfarbe für folgende Form(en) stroke(255,255,255); // weiss!! noStroke(); // keine Rahmenfarbe // Füllfarbe für folgende Form(en) fill(255,0, 255); // violett fill(255,255,0,128); // gelb, halbtransparent noFill(); // keine Füllfarbe NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

29 grayscale, Beispiel Füllfarbe und Rahmenfarbe gelten für alle folgenden Formen - esseidenn sie werden wieder geändert Standardwerte (also wenn Sie selbst nichts angeben): background: 128 (mittleres grau) fill: 255 (weiss) stroke: 0 (schwarz) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

30 farbig, Beispiel background(255); noStroke();
fill(255, 0, 0); // Bright red ellipse(80,60,100,100); fill(127, 0, 0); // Dark red ellipse(80,160,100,100); fill(255, 200, 200); // Pink (pale red) stroke(0); ellipse(100,260,100,100); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

31 Transparenz, Beispiel Der letzte Wert gibt die Tranzparenz an
noStroke(); fill(0); rect(0,0,200,400); fill(0, 0, 255); rect(200,0,200,400); fill(255,0,0,255); //100% opacity. rect(0,0,400, 50); fill(255,0,0,195); // 75% opacity. rect(0,100,400, 50); fill(255,0,0,128); // 50% opacity. rect(0,200,400, 50); fill(255,0,0,64); // 25% opacity. rect(0,300,400, 50); Der letzte Wert gibt die Tranzparenz an wird oft ‚alpha‘-Kanal genannt NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

32 Interaktionen mit der Maus
if (mousePressed) { if (mouseButton == LEFT) { stroke(0, 200, 100); fill(0, 100, 50); ellipse(mouseX, mouseY, 100, 100); } else if (mouseButton == RIGHT) { stroke(0, 50, 100); fill(0, 100, 200); ellipse(mouseX, mouseY, 50, 50); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

33 Grundstruktur für dynamische Sketches
// Mein erstes Programm print(“Hallo Welt”); rect(10, 10, 50, 50); Das war einfach – aber langweilig, weil statisch. Für interessantere, dynamische Programme braucht man ein immer gleiches Grundgerüst: Code, der nur einmal, (zu Beginn) ausgeführt wird Code, der immer wieder (in jedem Frame) ausgeführt wird Achtung!: wirklich gezeichnet wird erst am Ende von draw() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

34 Beispiel: Joggen gehen
Schuhe anziehen Vor die Türe gehen Schritt machen Luft holen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

35 Beispiel in Processing – was passiert?
die Grösse des display Window, das braucht es immer size(200,200); background(255); frameRate(40); der Default wäre 60 Welche Farbe ist das? Muss diese Zeile hier stehen? fill(0,0,0,10) rect(0,0,10,10); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

36 Beispiel in Processing – was passiert?
size(200,200); background(255); frameRate(40); line(100,100, mouseX,mouseY); die momentane X-Koordinate der Maus NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

37 Der background-Trick void setup() { size(200,200); background(255); } void draw() { line(mouseX, mouseY, 100, 100); void setup() { size(200,200); } void draw() { background(255); line(mouseX, mouseY, 100, 100); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

38 Maus-Tracking Processing weiss immer, wo die Maus ist: Ein Beispiel:
mouseX: Die aktuelle X-Koordinate der Maus mouseY: Die aktuelle Y-Koordinate der Maus Ein Beispiel: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

39 Mehr Maus-Tracking … Processing merkt sich auch, wo die Maus beim letzten Aufruf von draw()war (also im vorigen Frame) pmouseX: Die vormalige X-Koordinate der Maus pmouseY: Die vormalige Y-Koordinate der Maus NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

40 Ein einfaches Zeicheprogramm
Einfach immer Linien zeichnen zwischen der vormaligen und der aktuellen Position der Maus: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

41 Mausklicks und Tastendrucke
Zwei weitere vorgegebene Methoden: mousePressed() keyPressed() Im Codeblock zwischen den geschweiften Klammer gibt man an, was passieren soll, wenn das entsprechende Ereignis eintritt Aufgerufen werden die Methoden automatisch NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

42 Variablen sind wie Kisten
zuweisen Typ Name Wert int meineZahl = 7; Form Anschrift Inhalt einpacken = meinZahl 7 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

43 Beispiele und Fachbegriffe
int zahl1; //deklarieren zahl1 = 7; //initialisieren print("zahl1 ist: " + zahl1); //ausgeben zahl1 = zahl1/2; //berechnen und zuweisen print("zahl1 ist jetzt: " + zahl1); //wieder ausgeben float zahl2 = 10.7; //deklarieren & initialisieren print("summe: " + (zahl1 + zahl2)); //ausgeben NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

44 Strings (strenggenommen kein primitiver Typ)
zuweisen Typ Name Wert String meinWort = “Hallo“; = Hallo meinWort NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

45 true var antwort:Boolean = true; = Boolean (Wahrheitswerte) Name Typ
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

46 Alle Primitive Typen Ganzzahlen
byte: Eine sehr kleine Zahl (-127 bis +128) short: Eine kleine Zahl ( bis ) int: Eine grosse Zahl (-2,147,483,648 bis +2,147,483,647) long: Eine enorm grosse Zahl (+/- 264) Fliesskommazahlen float: Eine grosse Zahl mit viele Nachkommastellen double: Doppelt so gross oder präzise, selten nötig Andere Typen boolean: Wahrheitswert, also true oder false char: Ein Zeichen‘a’(in einfachen Anführungszeichen) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

47 Benötigter Speicherplatz
Ganzzahlen byte: short: int: long: Fliesskommazahlen float: double: Andere Typen boolean: char: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

48 Beispiele Typen Ganzzahlen byte: 123 short: 1984 int: 1784523
long: Fliesskommazahlen float: 4.0 double: Andere Typen boolean: true char: ‘a’ NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

49 Variablen benennen Regeln: Du sollst nicht ...
... Umlaute, Satzzeichen, Sonderzeichen verwenden ... Zahlen als erstes Zeichen benutzen ... existierende Schlüsselwörter benutzen, z.B.: mouseX, int, size, heigth, ... Konventionen: Du sollst ... ... sprechende Namen wählen rundenZaehler, maxRechteckBreite, … ... den camelCase benutzen (dasHeisstAlso): erstes Wort klein … … alle Folgenden gross schreiben NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

50 Methodenvariable vs. Instanzvariable
Ergebnis? // Global " count " int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); ________ // Local " count " void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); ________ NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

51 Geltungsbereich (= scope)
Methodenvariablen count wir innerhalb einer Methode deklariert  count existiert nur bis zum Ende dieser Methode count kann ausserhalb dieser Methode nicht benutzt werden (Geltungsbereich) count wird bei jedem Aufruf von draw() neu erschaffen // Local “count” void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); Geltungsbereich (= scope) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

52 Geltungsbereich (= scope)
Instanzvariablen // Global “count” int count = 0; void setup() { size(200,200); } void draw() { count = count + 1; background(count); count wir ausserhalb einer Methode deklariert  count existiert bis zum Ende des Programms count kann in allen Methoden dieses Sketches benutzt werden (= Geltungsbereich) count wird beim Start des Programms initialisiert, dann nur noch verändert Geltungsbereich (= scope) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

53 Oft gibt es viele Instanzvariablen
Für alles, was sich kontinuierlich verändern soll. So geht‘s: Ausserhalb von draw() deklarieren und initialisieren Innerhalb von draw() abrufen und verändern Call to draw() circleX circleY circleW circleH 1 50 100 2 0.5 50.5 100.5 3 1.0 51 101 10 4.5 54.5 104.5 30 14.5 64.5 114.5 49.5 99.5 149.5 200 199.5 Eine solche Tabelle ist oft nützlich, um ein Programm zu analysieren! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

54 System-Variablen Einige Variablen in Processing sind gegeben:
(Diese kann man nicht direkt ändern, aber benutzen) mouseX , mouseY, pmouseX and pmouseY width: Breite (in Pixeln) des display windows height: Höhe (in Pixeln) des display windows frameCount: Der wievielte Frame gerade dran ist frameRate: Rate (Frames pro Sekunde) screen.height, screen.width: Bildschirm Dimens. key: Die zuletzt gedrückte Taste keyCode: Numerischer Code für eine Taste mousePressed: True or false (gedrückt oder nicht?) mouseButton: Welche Taste? (left, right, center) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

55 Wahrheitswerte (Boolean) & Logik
Booleans können nur zwei Werte haben: true or false (Ja oder Nein) Computer denken in Nullen und Einsen: 1 = true = an = Wahr = Ja 0 = false = aus = Falsch = Nein Kein vielleicht … Vergleiche ergeben Wahrheitswerte: Sind Sie männlich? Sind Sie älter als 17? Ist myScore zwischen 80 und 89? Ist lastName “Mueller“? Ist x gerade und grösser als 0? Ist x gerade oder grösser als 0? AND A B Output 1 OR A B Output 1 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

56 Logische Operatoren (fast) Wie in der Algebra > grösser als
< kleiner als >= grössergleich <= kleinergleich == gleich Achtung!: ‘=‘ steht für eine Zuweisung: x = 5; != ungleich Auf beiden Seiten logischer Operatoren müssen Wahrheitswerte stehen! Das Ergebnis einer ‚logischen Rechnung‘ ist wieder ein Wahrheitswert. NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

57 Logische Operatoren: AND
Manchmal sollen mehrere Bedingungen erfüllt sein, bevor man etwas tut Beispiel: If age >= 16 AND permit == true Print “OK to drive” In JAVA schreibt man‘AND’ so: && Eingebettete ifs: Komplexe Bedingung: A B Output 1 int age = 17; int permit = 1; if (age >= 16){ if (permit == true){ print(“OK to Drive”); } else { print(“Ride the bus”); } ) else { int age = 17; int permit= 1; if (age >= 16 && permit == true){ print(“OK to Drive”); } else { print(“Ride the bus”); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

58 Logische Operatoren: OR
Manchmal genügt es, wenn zumindest eine von zwei Bedingungen erfüllt ist Beispiel: If age >= 18 OR (age >= 16 AND permit == 1) Print “OK to drive” In JAVA schreibt man ‘OR’ so: || A B Output 1 int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(“OK to Drive”); else print(“Ride the bus”); Die Klammern bewirken, dass das AND zuerst getestet wird NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

59 Verzweigungen ... erlauben das Erstellen von Codeblöcken ({}), die nur dann ausgeführt werden, wenn (if) bestimmte Bedingungen (conditions) erfüllt sind – oder eben nicht (else). Z.B.: if (ich habe noch Hausaufgaben){ //wenn Hausaufgaben machen; //dann 1 } else if (es ist schönes Wetter) { //sonst wenn ins Badi gehen; //dann 2 } else { //sonst Computerspiele spielen; //dann 3 } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

60 Verzweigungen: if if (Condition){ // True Action }
False if (Condition){ // True Action } Die Condition ist meist eine logische Rechnung Nur wenn dabei true herauskommt… … wird der Code in den geschweiften Klammern ausgeführt Beispiel: if (mouseX < width/2){ fill(255, 0, 0); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

61 Verzweigungen: if-else
True Action Condition False if (Condition){ // True Action } else { // False Action } Mit else kann man angeben, was passieren soll, wenn die Condition nicht true ergeben hat else = sonst; dabei gibt man keine neue Condition an! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

62 Verzweigungen: else if
Mehrere Conditions: if (age >= 21){ // First True Action } else if (age > 18){ // Second True Action } else if (age > 5) // Third True Action } Sobald eine Condition true ergibt werden die restlichen ignoriert Man kommt also nur dann zur zweite, wenn die erste false war! First True Action First Condition False True Second Second True Third Third True NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

63 Verzweigungen: else if und else
Ein else am Ende ist immer für diejenigen Fälle zuständig, in denen alle vorhergehenden Conditions false ergeben haben if (age >= 21){ // First True Action } else if (age > 18){ // Second True Action } else { // Both False Action } First True Action First Condition False True Second Second True Both False NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

64 Beispiel Die Maus-Position bestimmt die Hintergrundfarbe:
if (mouseX < width/3) { background(255); } else if (mouseX < 2*width/3) { background(127); } else { background(0); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

65 Bedingungen geschickt ordnen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

66 if else Beispiele float r = 150; // variables float g = 0;
float b = 0; void setup() { size(200,200); } void draw() { background(r,g,b); stroke(255); // Line down center line(width/2, 0, width/2, height); if (mouseX > width/2){ // If right r = r + 1; // more red } else { // Else left r = r - 1; // less red if (r > 255) // Range Check r r = 255; if (r < 0) // Range Check r r = 0; else gehört zum nähesten if es geht ohne Klammen – bitte vermeiden NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

67 constrain( ) kann Verzweigungen sparen
float r = 150; // variables float g = 0; float b = 0; void setup() { size(200,200); } void draw() { background(r,g,b); stroke(255); // Line down center line(width/2, 0, width/2, height); if (mouseX > width/2){ // If right r = r + 1; // more red } else { // Else left r = r - 1; // less red r = constrain(r,0,255); // Range Check r NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

68 Exercise 5-3: Move a rectangle… but stop!
float x = 0; void setup() { size(200,200); } void draw() { background(255); fill(0); rect(x,100,20,20); x = x + 1; // Keep x in left half // Conditional version: // constrain version: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

69 Using a boolean variable for Buttons
A button is just a rollover area that senses mouse clicks. Testing if (mouse is in the area of the object) AND mouse clicked can be quite a number of comparisons! boolean button = false; int ulx = 50, uly = 50, w = 100, h = 75; // rect variables … if (mouseX > ulx && mouseY > uly && mouseX < ulx + w && mouseY < uly + h && mousePressed) button = true; else button = false; // Later in code if (button == true) print(“I’ve been clicked!”); if(button) // Does the same thing as if (button == true) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

70 Example 5.5: A Button as a switch
Test where the mouse is in the mousePressed() method. Then set a boolean variable to true or false boolean button = false; int ulx = 50, uly = 50, w = 100, h = 75; // rect variables … void draw() { if (button) // actions if button pressed } void mousePressed() { if (mouseX > ulx && mouseY > uly && mouseX < ulx + w && mouseY < uly + h) if (button) // alternate on every click button = false; else button = true; button = !button; // quite a bit shorter, eh? } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

71 Schleifen ... erlauben das Erstellen von Codeblöcken ({}), die wiederholt ausgeführt werden (while, do while, for) – bis die Abbruchbedingung sie beendet while (es ist noch was auf dem Teller) { einen Löffel essen; } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

72 Wozu Schleifen? // No variables stroke(0); line( 50,60, 50,80);
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

73 Wozu Schleifen? eigentlich ändert sich nicht viel – genauer:
// No variables stroke(0); line( 50,60, 50,80); line( 60,60, 60,80); line( 70,60, 70,80); line( 80,60, 80,80); line( 90,60, 90,80); line(100,60,100,80); line(110,60,110,80); line(120,60,120,80); line(130,60,130,80); line(140,60,140,80); line(150,60,150,80); eigentlich ändert sich nicht viel – genauer: die roten Zahlen werden immer um 10 grösser NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

74 Wozu Schleifen? // with variables stroke(0); int xpos = 50;
Variablen benutzen, damit sich bei der Wiederholung trotzdem etwas ändern kann // with variables stroke(0); int xpos = 50; while (xpos <= 150){ line(xpos,60,xpos,80); xpos = xpos + 10; } das ist wichtig, damit die Schleife auch mal zu Ende geht solange das true ergibt, wird der Codeblock wiederholt NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

75 Schleifen: while Genau wie ein if, nur dass das Ganze so lange wiederholt wird, bis die condition false ergibt int x = 2; while (x < 10){ print(“la”); x++; } Wie oft wird “la” ausgegeben? Condition True Action(s) False NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

76 Schleifen: while Genau wie ein if, nur dass das Ganze so lange wiederholt wird, bis die condition false ergibt int x = 2; while (x < 10){ print(“la”); x++; } Von 2 wird in Einer-Schritten bis <10 gezählt, also Sieben “la”s Condition True Action(s) False NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

77 Schleifen: for Wie while, nur alles an einem Ort (Semikolons!):
for (int x = 2; x < 10; x++){ print(“la”); } bei x = 2 anfangen; weitermachen, solange x < 10; in jeder Runde x um Eins erhöhen Condition True Action(s) False NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

78 for Schleife Syntax und Beispiel
Use two semicolons (;) as separators: for(Setup variables; Test Condition ;Change test variable){ for( int x = 1; x < 10 ; x = x + 1) { // Action(s) go here } Who came up with this? Programmers of course Why? It saves typing, and it puts all three parts on one line NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

79 Exercise 6.1: while-loop NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

80 Exercise 6.2: for-loop NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

81 Exercise 6-3 Wuzzit Do? for (int i = 0; i < 10; i++) {
rect(i*20,height/2, 5, 5); } int i = 0; while (i < 10) { ellipse(width/2,height/2, i*10, i*20); i++; } for (float i = 1.0; i < width; i *= 1.1) { rect(0,i,i,i*2); } int x = 0; for (int c = 255; c > 0; c –= 15) { fill(c); rect(x,height/2,10,10); x = x + 10; } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

82 Increment and Decrement Operators
Loops often use a counter and increment or decrement it as they go. Here is a a “shortcut” way to decrement or increment a variable: increment operator ++x; // increments x by one – BEFORE it is used x++; // increments x by one – AFTER it is used decrement operator --x; // decrements x by one – BEFORE it is used x--; // decrements x by one – AFTER it is used When these operators are used as part of an expression, then the choice of pre versus post will make a difference. NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

83 Wie sieht das Ergebnis aus?
int s = 255; size(s, s); background(0); strokeWeight(2); for(int i = 0; i < s; i++) { for(int j = 0; j < s; j++) { stroke(i,0,j); point(i,j); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

84 Wie sieht das Ergebnis aus?
int s = 400; size(s, s); background(0); strokeWeight(2); colorMode(HSB,s); for(int i = 0; i < s; i++) { for(int j = 0; j < s; j++) { stroke(i,j,s); point(i,j); } NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

85 Methoden sind Codeblöcke mit einem Namen Methoden sind nützlich
Namen und Parameter (Übergabe- und Rückgabewert(e)) der Methode werden im Methodenkopf definiert Der eigentliche Code kommt in den Methodenkörper, zusammengehalten von {} Um eine Methode aufzurufen, muss man nur ihren Namen schreiben - und ggf. Werte des richtigen Typs übergeben Methoden sind nützlich wenn man Code-Teile mehrfach benutzen will um die Übersicht zu behalten (sinnvolle Namen!) um Code flexibel zu gestalten NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

86 Methoden void drawShip (int size) { // Code // … } drawShip( 100 );
Methodenkopf Typ des Rückgabewerts Name der Methode Typ und Name der Übergabewerte Anfang des Codeblocks void drawShip (int size) { // Code // … } Methoden -körper Ende des Codeblocks Methodenaufruf Name der Methode Übergabe- Wert drawShip( 100 ); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

87 Beispiel für das Auslagern von Methoden
Codeteile benennen erhöht die Übersichtlichkeit! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

88 Jede Methode sollte nur eine Aufgabe haben
sprechende Namen zu finden ist dann einfach NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

89 Übergabe- wert(e) void draw() { background(0);
// Übergib vier Werte an drawCar drawCar( 100,100,64, color(200,200,0) ); drawCar( 50 ,75 ,32, color(0,200,100) ); drawCar( 80 ,175,40, color(200,0,0) ); } // drawCar erwartet vier Werte, drei ints & eine color void drawCar(int x, int y, int thesize, color c) { // Hier können jetzt die vier Variablen (x, y, thesize // & c) benutzt werden, sie haben zunächst die über – // gebenen Werte … NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

90 Pass by Value (Animated)
Name of Presentation - Net TeleTrain Pass by Value (Animated) Let's take a closer look at how this works. void draw() { int n = 10; println(n); byValue(n); println(n); } // end draw() void byValue(int num) { num = 73; println(n); } // end byValue() RAM 10 n 10 num 73 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst August 2002

91 Rückgabewerte void = leer, nichts manche Methoden kann man aufrufen, ohne Werte übergeben zu müssen: manche Methoden muss man Werte übergeben, damit sie funktionieren: manche Methoden geben sogar Werte zurück: Methodenaufruf noStroke( ); Methodendefinition void noStroke( ){} Methodenaufruf strokeWeight( 5 ); Methodendefinition void strokeWeight(int size){} Methodenaufruf int r = random(0,3); Methodendefinition int random (int min, int max){} NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

92 Beispiel: Methode mit Rückgabewert
in draw wird sum aufgerufen, drei Werte werden übergeben sum empfängt drei Werte vom erwarteten Typ und weist sie a, b und c zu sum addiert und speichert das Ergebnis in der Methodenvariable total sum gibt den Wert von total zurück (return) in draw wird der zurückgegebene Wert answer zugewiesen void draw() { int answer; answer = sum( 17, 42, 52); println(answer); noLoop(); } int sum(int a, int b, int c) { int total = a + b + c; return total; NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

93 Beispiel: Distanz zwischen 2 Punkten
float distance(float x1, float y1, float x2, float y2) { float dx = x1 – x2; // one side of the right triangle float dy = y1 – y2; // other side of the right triangle float d = sqrt(dx*dx + dy*dy); // hypoteneuse length return d; } in Processing gibt es die Methode dist()die genau das tut… NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

94 Faustregeln für Methoden
Schreiben Sie viele kleine Methoden Jede Methode sollte nur eine Aufgabe haben dann ist sie klein (wenige Zeilen Code, meist < 10) dann ist sie einfach zu benennen dann wird Ihr Code verständlich (auch ohne Kommentare) dann kann Sie eher wiederverwertet werden NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

95 Obergrenze (exklusive)
Zufallszahlen Processing (und andere Programmiersprachen) kann eine zufällige Zahl generieren (also eigentlich ist das eine Lüge, aber eine nützliche) random() ist eine‘Methode’, die eine zufällige Fliesskommazahl (float) generiert Beispiele: Untergrenze Obergrenze (exklusive) So kann man aus einer Fliesskommazahl eine Ganzzahl machen. Das nennt man ‘casting‘. NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

96 Nützliche vorgegebene Methoden
randomNumber = random(min, max) //eine Zufallszahl generieren numberInRange = range(min, max, number) //garantieren, dass eine Zahl innerhalb eines Bereichs ist distance = dist(x1, y1, x2, y2) //die Distanz zwischen zwei Punkten berechnen strokeWeight(size) //die Dicke des Rahmens kontrollieren newColor = lerpColor(fromColor,toColor,r) //Zwischenfarbe Berechnen pixelArray = loadPixels() //die momentan dargestellten Pixel in einen 2D-Array laden NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

97 (das gilt eigentlich für jede Datenstruktur, aber)
Arrays ... sind eine Sammlung von Werten, die unter einem Namen gespeichert werden (das gilt eigentlich für jede Datenstruktur, aber) ... Arrays: können nur gleichartige (Typ) Werte aufnehmen können ihre Grösse Nicht ändern stellen den Zugriff auf bestimmte Werte über eckige Klammern und einen index ([i]) bereit können Mehrdimensional sein Ein Array ist also wie ein Regal mit Werten drin NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

98 Arrays erstellen, Kurzform
zuweisen Typ + [] Name Werte int[] meinArray = {2, 5, 0, 1};  ein „Regal“ mit vier Fächern und den ganzzahligen Werten 2, 5, 0, 1 drin Um auf Werte zuzugreifen braucht es die Nummer des Faches (=Index). Achtung: gezählt wird ab 0! int x = meinArray[1];  x hat den Wert 5 meinArray[0] = 7;  im ersten Fach ist eine 7 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

99 Arrays erstellen, mehrere Schritte
int[] meinArray = new int[4]; //erstellt Array mit 4 leeren (null) Elementen meinArray[0]=2; //Elemente einfüllen meinArray[1]=5; ... Oft kann man das „Befüllen“ des Arrays mit einer Schleife regeln: for (int i = 0; i < meinArray.length; i++ ) { meinArray[i] = (int) random(0, 10); } // gefüllt mit Zufallszahlen zwischen 0 und 9 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

100 Man geht oft mit Schleifen durch Arrays:
Wenn der Array 10 Elemente hat, dann wird im letzten Durchgang arr[10] benutzt, also das elfte Element! for (int i = 0; i <= arr.length; i++ ) { //mach was mit jedem Element, also arr[i] } Achtung!: wenn der Index zu gross ist und damit auf ein nicht existierendes Element verweist, dann passiert das: Exception in thread "Animation Thread" java.lang.ArrayIndexOutOfBoundsException: 10 at OutOfBounds.setup(OutOfBounds.java:21) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

101 Arrays: Hinweise Leere Elemente haben den Wert null
array.length ergibt die Anzahl der Elemente Das erste Element hat den Index 0! Das letzte Element hat den Index arr.length-1! Es gibt Arrays für jeden Datentyp, also auch eigene Klassen oder ein Array von Arrays Arrays gibt es in JAVA nur noch aus historischen Gründen, eigentlich sollte man sauberere Datenstrukturen (Z.B. die Klasse ArrayList) vorziehen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

102 Exercise 9-7: Loop/Array continued:
int [] nums = { 5, 4, 2, 7, 6, 8, 5, 2, 6, 14 }; NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

103 Klassen sind nützlich, wenn es viele gleichartige oder ähnliche Objekte braucht haben eigene Instanzvariablen und Methoden müssen instanziiert werden durch new KlassenName(); Dabei wird genau genommen der Konstruktor aufgerufen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst