Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen: openprocessing.org/visuals/?visualID=37337."—  Präsentation transkript:

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

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

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 3

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 4

5 Design by Numbers: Ressourcen Wiki wikispaces.com Arbeitsblätter Folien Cheatcheets Links Websites 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 5

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

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 7

8 IDE 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 8 Menu Toolbar Sketch Tabs Text Editor Message Line Text Area Current Line# RUN Display Window

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

10 Sketch Files and Folders … Der Ordner, in dem Ihre Programme gespeichert werden, heisstSketchbook 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 10

11 Ihr erstes Programm Öffnen Sie einen neuen Sketch 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 11

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

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 13

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 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 14 Processing Source code Processing Library Java Compiler Portable Java Program Java Library

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) x86 Windows OS X G3/4/5 CPU Phone OS Java VM PCMacCell Phone Portable Java Program Running Java Program Running Java Program Running Java Program JRE NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 15

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

17 Koordinaten am Computer 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 nicht dasselbe Koordinatensystem wie in der Mathematik! Ursprung 17

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 18

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

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

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

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

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

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 24

25 Los gehts! 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 25

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 (!!) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 26

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 27

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 // 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 28

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 29

30 farbig, Beispiel NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 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); 30

31 Transparenz, Beispiel Der letzte Wert gibt die Tranzparenz an wird oft alpha-Kanal genannt NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 31 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);

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); } 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 32

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

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

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

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

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

38 Maus-Tracking Processing weiss immer, wo die Maus ist: 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 38

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 39

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 40

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

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

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 43

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

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

46 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 (+/ ) 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)

47 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:

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

49 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

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

51 Methodenvariablen // Local count void setup() { size(200,200); } void draw() { int count = 0; count = count + 1; background(count); } 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 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 51 Geltungsbereich (= scope)

52 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 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 52 Geltungsbereich (= scope)

53 Oft gibt es viele Instanzvariablen Für alles, was sich kontinuierlich verändern soll. So gehts: Ausserhalb von draw() deklarieren und initialisieren Innerhalb von draw() abrufen und verändern Call to draw() circleXcircleYcircleWcircleH Eine solche Tabelle ist oft nützlich, um ein Programm zu analysieren! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 53

54 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)

55 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? ABOutput AB AND OR

56 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.

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 manAND so: && Eingebettete ifs: Komplexe Bedingung: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 57 int age = 17; int permit = 1; if (age >= 16){ if (permit == true){ print(OK to Drive); } else { print(Ride the bus); } ) else { print(Ride the bus); } int age = 17; int permit = 1; if (age >= 16){ if (permit == true){ print(OK to Drive); } else { print(Ride the bus); } ) else { print(Ride the bus); } int age = 17; int permit= 1; if (age >= 16 && permit == true){ print(OK to Drive); } else { print(Ride the bus); } int age = 17; int permit= 1; if (age >= 16 && permit == true){ print(OK to Drive); } else { print(Ride the bus); } ABOutput

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: || NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 58 int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(OK to Drive); else print(Ride the bus); int age = 17; int permit = 1; if (age >= 18 || (age >= 16 && permit == 1)) print(OK to Drive); else print(Ride the bus); ABOutput Die Klammern bewirken, dass das AND zuerst getestet wird

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 59

60 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 60 Verzweigungen: if 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); } Action Condition True False

61 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 61 Verzweigungen: if-else 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! True Action Condition True False Action

62 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 Condition Second True Action False True Third Condition Third True Action True False

63 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 Condition Second True Action False True Both False Action

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

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

66 if else Beispiele NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 66 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

67 constrain( ) kann Verzweigungen sparen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 67 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 }

68 Exercise 5-3: Move a rectangle… but stop! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 68 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: }

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! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 69 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(Ive been clicked!); 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(Ive been clicked!); if(button) // Does the same thing as if (button == true)

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 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 70 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; } 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? } button = !button; // quite a bit shorter, eh? }

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 71

72 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 72 Wozu Schleifen? // 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);

73 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 73 Wozu Schleifen? // 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

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

75 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? Action(s) Condition True False

76 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 las Action(s) Condition True False

77 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 Action(s) Condition True False

78 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

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

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

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

82 Increment and Decrement Operators NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 82 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.

83 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); }

84 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); }

85 Methoden sind Codeblöcke mit einem Namen 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 85

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

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

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

89 Übergabe- wert (e) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 89 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 … }

90 90 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 num NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

91 Rückgabewerte 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: NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 91 Methodenaufruf noStroke( ); Methodenaufruf strokeWeight( 5 ); Methodenaufruf int r = random(0,3); Methodendefinition void noStroke( ){} Methodendefinition void strokeWeight(int size){} Methodendefinition int random (int min, int max){} void = leer, nichts

92 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; } Beispiel: Methode mit Rückgabewert NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 92 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

93 Beispiel: Distanz zwischen 2 Punkten NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 93 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…

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 94

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

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 96

97 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 97

98 Arrays erstellen, Kurzform int[] meinArray = {2, 5, 0, 1}; NameTyp + []Werte zuweisen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 98 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

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;... NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 99 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 for (int i = 0; i < meinArray.length; i++ ) { meinArray[i] = (int) random(0, 10); } // gefüllt mit Zufallszahlen zwischen 0 und 9

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

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 101

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

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 103


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

Ähnliche Präsentationen


Google-Anzeigen