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 Zufallszahlen Perlin-noise Arrays Klassen Projektauftrag NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 2

3 Design by Numbers: Ziele Grafiken vom Computer zeichnen lassen, also programmieren, d.h. 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 (Android Phone, Kinect, LeapMotion,...) 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: Ziele Grafiken vom Computer zeichnen lassen, also programmieren, d.h. 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 (Android Phone, Kinect, LeapMotion,...) besondere Grafik (Perlin Noise, Fraktale, 3D,...) nicht nur Grafik, sondern auch Sounds NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 4 Wichtig ist, dass 1.jede(r) auf seinem/ihrem Niveau arbeiten kann 2.alle am Ende besser programmieren können als zu Beginn 3.beeindruckende Projekte entstehen Wichtig ist, dass 1.jede(r) auf seinem/ihrem Niveau arbeiten kann 2.alle am Ende besser programmieren können als zu Beginn 3.beeindruckende Projekte entstehen

5 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

6 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 Reference, Tutorials, Beispiele... NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 6

7 Design by Numbers: Vorerfahrung? Stellen Sie sich gegenseitig vor Finden Sie heraus, wo Sie stehen in Bezug auf bisherige Erfahrungen im Programmieren (irgendeine Programmiersprache) NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 7

8 Design by Numbers: Grobplanung NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 8 Grundkurs Processing MoDiMiDoFr Sketches erweitern, Ideen sammeln, Projektskizze erstellen Eigenes Projekt umsetzen Sketches hochladen: hochladen Material: & Folienwww.creativecoding.org Erfolgskontrolle: Arbeitsblätter Arbeitsweise: im Team, teilweise geführt Material: & Folienwww.creativecoding.org Erfolgskontrolle: Arbeitsblätter Arbeitsweise: im Team, teilweise geführt Inspiration: s. Links auf dem WIKIWIKI Inputs(?): sagen Sie uns, was Sie interessiert Erweiterungen: Informationen sammeln zu Inspiration: s. Links auf dem WIKIWIKI Inputs(?): sagen Sie uns, was Sie interessiert Erweiterungen: Informationen sammeln zu Gestalten Sie etwas Tolles!

9 Processing Processing has promoted software literacy within the visual arts and visual literacy within technology NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 9

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

11 IDE Auch ausführen kann man Sketches direkt hier (RUN = 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 11 Menu Toolbar Sketch Tabs Text Editor Message Line Text Area Current Line# RUN Display Window Fehlermeldung

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

13 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 Im Unterordner data liegen ggf. zusätzliche Dateien, z.B. Bilder NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 13

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

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

16 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, lokal) führt meistens Beispiele auf NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 16

17 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 17 Processing Source code Processing Library Java Compiler Portable Java Program Java Library

18 Die Java Virtual Machine (JVM) Das besondere an JAVA ist, dass es innerhalb einer sogenannten Virtual Machine ausgeführt wird, die es für alle Geräte gibt 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 18

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

20 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 ganz dasselbe Koordinatensystem wie in der Mathematik! Ursprung 20

21 Koordinatensystem in Processing (für Fortgeschrittene) In Processing kann man das Koordinatensystem mit Befehlen verändern z.B. verschieben, rotieren, skalieren, verzerren Befehle: translate(), rotate(), scale() Das ist oft einfacher, als die Formen zu ändern Ausserdem kann ein Koordinatensystem gespeichert und wieder hergestellt werden Befehle: pushMatrix(), popMatrix() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 21

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

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

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

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

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

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

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

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

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

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

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

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

34 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); 34

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

36 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); 36 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()

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

38 Beispiel in Processing – was passiert? NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 38 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

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

40 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 40 void setup() { size(200,200); } void draw() { background(255); line(mouseX, mouseY, 100, 100); }

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

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

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

44 Mausklicks und Tastendrucke NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 44 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

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

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

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

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

49 boolean antwort = true; antwort true Name TypWert = NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 49 Boolean (Wahrheitswerte)

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

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

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

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

54 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 54 // 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?

55 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 55 Geltungsbereich (= scope)

56 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 56 Geltungsbereich (= scope)

57 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 Aufrufe von draw() circleXcircleYcircleWcircleH Eine solche Tabelle ist oft nützlich, um ein Programm zu analysieren! NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 57

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

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

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

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

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

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

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

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

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

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

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

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

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

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

72 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

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

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

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

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++; } Wie oft wird la ausgegeben? Action(s) Condition True False

77 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 77 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++; } Beginnend bei 2 wird in Einer-Schritten bis <10 gezählt, also Sieben las x hat beim ersten Durchgang den Wert 2 im nächsten den Wert 3, dann 4, usw. Action(s) Condition True False

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

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 Kurzformen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 82 Beim Programmieren (insbesondere von Schleifen) will man häufig hoch- oder runterzählen Deswegen gibt es Kurzformen: x++;// Kurzform für x = x + 1; x--;// Kurzform für x = x – 1; x += 5;// Kurzform für x = x + 5; x *= 2;// Kurzform für x = x * 2;... Technische gesprochen sind diese Kurzformen Increment und Decrement Operatoren Inkrementieren = hochzählen Dekrementieren = runterzählen

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 NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 86 Methodenaufruf Name der Methode Übergabe- Wert drawShip( 100 ); void drawShip (int size) { // Code // … }

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 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 ), der Wert passt zum Typ int 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; }

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 Nützliche vorgegebene Methoden randomNumber = random(min, max) //eine Zufallszahl generieren numberInRange = constrain(number, min, max) //garantieren, dass eine Zahl innerhalb eines Bereichs ist value2 = map(value1, min1, max1, min2, max2) //konvertiert einen Wert in einen anderen Wertebereich distance = dist(x1, y1, x2, y2) //die Distanz zwischen zwei Punkten berechnen strokeWeight(size) //die Dicke des Striches/Rahmens kontrollieren newColor = lerpColor(fromColor,toColor,r) //Zwischenfarbe berechnen pixelArray = loadPixels() //die momentan dargestellten Pixel in einen Color-Array laden NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 94

95 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

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

97 random() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 97 size(400,300); float oldY; float y = height/2; strokeWeight(4); background(255); for(int i = 0; i < width; i++) { oldY = y; y = height/2 + random(-100,100); line(i, oldY, i+1, y); } Eine Linie, bei der die Y-Koordinate zufällig um bis zu +/- 100 Pixel verschoben wurde: sieht ziemlich krakelig aus, weil die Verschiebungen nichts miteinander zu tun haben Eine Linie, bei der die Y-Koordinate zufällig um bis zu +/- 100 Pixel verschoben wurde: sieht ziemlich krakelig aus, weil die Verschiebungen nichts miteinander zu tun haben

98 random() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 98 size(400,300); float oldY; float y = height/2; strokeWeight(4); background(255); for(int i = 0; i < width; i++) { oldY = y; y = y + random(-10,10); line(i, oldY, i+1, y); } Eine Linie, bei der die Y-Koordinate jeweils um bis zu +/- 10 Pixel zusätzlich verschoben wurde: etwas weniger krakelig, weil die Verschiebungen kleiner sind und zur vorherigen dazu gezählt werden Eine Linie, bei der die Y-Koordinate jeweils um bis zu +/- 10 Pixel zusätzlich verschoben wurde: etwas weniger krakelig, weil die Verschiebungen kleiner sind und zur vorherigen dazu gezählt werden

99 noise() NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 99 size(400,300); float oldY; float y = height/2; strokeWeight(4); background(255); for(int i = 0; i < width; i++) { oldY = y; y = noise(i*0.03)*200; line(i, oldY, i+1, y); } Eine Linie, bei der die Y-Koordinate von der noise()-Funktion bestimmt wird: hat auch eine Zufallskomponente, ist aber weniger krakelig – und die genaue Art lässt sich einstellen Eine Linie, bei der die Y-Koordinate von der noise()-Funktion bestimmt wird: hat auch eine Zufallskomponente, ist aber weniger krakelig – und die genaue Art lässt sich einstellen

100 Perlin-noise Die noise()-Kurve wird intern generiert, die Funktion gibt den Wert an einer bestimmten Stelle der Kurve zurück Wenn die übergebenen x-Werte nahe beieinander liegen, dann werden sich auch die noise(x)-Werte ähneln Das geht auch mit mehreren Dimensionen: noise(x,y,z); NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst x noise(x) float n2 = noise(0.78); float n1 = noise(0.77); float n3 = noise(0.2);

101 Perlin-noise: Einstellungen mit noiseDetail() mit noiseDetail() lassen sich die Charakteristiken des noise beeinflussen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 101 noiseDetail(4, 0.5); //=default noiseDetail(2, 0.5); // weicher noiseDetail(7, 0.5); // zackiger noiseDetail(4, 0.1); // gröber noiseDetail(4, 0.8); // feiner dasselbe wie nichts angeben

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

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

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

105 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 105 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 würde im letzten Durchgang arr[10] benutzt, also das elfte Element!

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

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

108 Klassen sind nützlich, wenn es viele gleichartige oder ähnliche Objekte braucht haben eigene Instanzvariablen und Methoden (bzw. Eigenschaften und Fähigkeiten) müssen (meist) instanziiert werden, d.h. durch new KlassenName() ; wird aus der Klasse (~= Bauplan) ein konkretes Objekt (= Instanz) abgeleitet. Von einer Klasse kann es beliebig viele Instanzen geben. Genau genommen wird bei der Instanziierung der (ein) Konstruktor aufgerufen – so kann man der neuen Instanz gleich Werte übergeben Klassen können in eigenen Dateien stehen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 108

109 Klassen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 109 Instanzvariable All das gehört zur Klasse Konstruktor (Name wie Klasse kein void) Konstruktor (Name wie Klasse kein void) Methode Name der Klasse (Grossschreibung!) Instanziierung: Car car1 = new Car( ); Hier wird eine Instanz von Car erstellt und unter dem Namen car1 gespeichert. car1.carSize ist 10 (=default) Hier wird eine Instanz von Car erstellt und unter dem Namen car1 gespeichert. car1.carSize ist 10 (=default) class Car { int carSize = 10; Car(){ //Code } void drive(){ //Code }

110 Klassen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 110 Instanzvariable All das gehört zur Klasse Konstruktor (Name wie Klasse kein void) Konstruktor (Name wie Klasse kein void) Methode Name der Klasse (Grossschreibung!) Instanziierung: Car car2 = new Car(99); Hier wird eine Instanz von Car erstellt und unter dem Namen car2 gespeichert. car2.size ist 99 (per Konstruktor) Hier wird eine Instanz von Car erstellt und unter dem Namen car2 gespeichert. car2.size ist 99 (per Konstruktor) class Car { int carSize = 10; Car(int size){ this.carSize = size; } void drive(){ //Code }

111 Klassen: Beispiel Auf den folgenden Folien finden Sie ein ausführliches Beispiel für eine Car-Klasse Das Beispiel ist auf Englisch; Hinweise: object = Instanz OOP = ObjektOrientiertes Programmieren (OOP bedeutet grob: mit Klassen) global variable = Instanzvariable parameters = Übergabewerte NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 111

112 Exercise 8.1: Plan a Car Class Lets plan a simple Car List data and functions Lets compare how we could convert the function we wrote to show different card with objects Well use our setup() and draw() methods

113 Setup for a Car before Objects Learning Processing: Slides by Don Smith 113 Use global variables for properties Color: carColor Location: carX, carY Speed: carSpeed In setup() Set the carColor Set the starting location Set the initial speed In draw() Fill background Display car at location with color (may use a function) Increment cars location based on speed

114 Setup multiple Cars before Objects Learning Processing: Slides by Don Smith 114 Use global arrays of variables for properties Allows us to use a loop to initialize a number of Cars Declare Color array: carColor [ ] Declare carX array: carX [ ] Declare carY array: carY [ ] Declare carSpeed array: carSpeed [ ] In setup() Set and initialize the arrays In draw() Fill background Loop through all the cars Display car at location with color (may use a function) Increment cars location based on speed

115 Setup a Car using Objects Learning Processing: Slides by Don Smith 115 One big difference with objects is that you move all of the global variables inside the Car object Color: carColor Location: carX, carY Speed: carSpeed Car object instead! We end up with one variable to represent the car Instead of initializing all of those variables, we initialize the car object!

116 Setup a Car using Objects Learning Processing: Slides by Don Smith 116 Outside of all methods (global) Declare a parking place for a car In setup() Make a new car object based on the Car plan) Sets initial values for color, location and speed In draw() Fill background Tell the car to move based on speed Tell the car to display itself (call a function)

117 The Car class Convert the non-OOP Car Data to a Class Non-OOPOOP

118 Setup a Car using Objects - Data Learning Processing: Slides by Don Smith 118 Lets break it down step by step Declare the plan for the Car Outside draw() and setup() Put variables for color, location and speed inside

119 Setup a Car using Objects - Constructor Learning Processing: Slides by Don Smith 119 We need to write instructions to build a car It is called the Constructor method Move the code that was in setup() Set variables for color, location and speed inside

120 Setup a Car using Objects - Functions Learning Processing: Slides by Don Smith 120 Move the functions that did things to the car Move the code to inside the Car class The will be called methods of the class Move the code that was in display()and drive()

121 The whole Car (Example 8.1) class Car { // Define a class for a car color c; // Variables. float xpos; float ypos; float xspeed; Car() { // A constructor. c = color(175); xpos = width/2; ypos = height/2; xspeed = 1; } void display() { // Function. // The car is just a square rectMode(CENTER); stroke(0); fill(c); rect(xpos,ypos,20,10); } void drive() { // Function. xpos = xpos + xspeed; if (xpos > width) { xpos = 0; }

122 What was that about a Constructor? A constructor is a special method of a class Has the same name as the class Builds the object Sets initial values It is called when you use new : class Car { Car() { // Constructor c = color(175); xpos = width/2; ypos = height/2; xspeed = 1; } void setup() { size(200,200); // Initialize Car object myCar = new Car(); }

123 And here is the OOPized version Is the OOP version shorter? Is it easier to read? Not yet maybe, but soon, and for the rest of your life. Learning Processing: Slides by Don Smith 123

124 Car Class should really be in its own file… Click Right Arrow in tabs row Use New Tab in menu to create a new file Name the new tab exactly like the class = Car Move the code for the Car class to it Saves to a Car.pde file in your folder Keep both files in the same folder If you want to use your Car class in another project, simply copy the Car.pde file there

125 Your first multi-file Project!

126 What if we want to make more cars? Right now, all cars are exactly the same Their constructor sets up the color, location… How could we make custom cars? Remember parameters? What if a Car constructor took parameters? class Car { Car(color colp, int xp, int yp, int speedp) { c = colp; xpos = xp; ypos = yp; xspeed = speedp; }

127 Please review parameter passing… Make a new frog with a length of 100

128 Now we can make two custom cars Use your new parameterized constructor!

129 And imagine an array of Cars! You can use the Car class just like any other type Declare an array of our new Cars object: Car [ ] parkingLot; setup() { parkingLot = new Car[10]; } But wait… what just happened? Did you create 10 cars? No, not yet. You created 10 parking stalls for cars So we still have to build the cars and set all of the colors, locations and speeds… parkingLot[0] = new Car(color, x, y..);

130 Filling the parking lot the easy way! Once you have the parking lot created, Car [ ] parkingLot; setup() { parkingLot = new Car[10]; } Use a for loop to make a bunch of cars! for (int i; i < 10; i++) { parkingLot[i] = new Car(color, x, y..); } Arrays and loops work wonderfully together! And they are even more fun with objects!

131 Design by Numbers: Projektauftrag Grobe Zielsetzung: Entwickeln Sie einen möglichst faszinierenden, interaktiven Screensaver, inkl.: Beeindruckende visuelle Elemente... Formen, Kurven, Bilder, Farben,... Dynamische Veränderung... es passiert ständig (automatisch) etwas Interessantes... Interaktion... Benutzerverhalten (Maus, Tasten,...) wird einbezogen Natürlich wollen wir Sie nicht davon abhalten, weitere interessante Dinge mit einzubauen (in Absprache), z.B.: besondere Geräte (Android Phone, Kinect, LeapMotion,...) besondere Grafik (Perlin Noise, Fraktale, 3D,...) nicht nur Grafik, sondern auch Sounds NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 131


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

Ähnliche Präsentationen


Google-Anzeigen