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 Boolean Logik Processing IDE
Verzweigungen Processing & JAVA Schleifen Koordinaten Methoden Einfache Formen Zufallszahlen Farben Perlin-noise Code Grundgerüst Arrays Maus & Tasten Klassen Variablen Projektauftrag Instanzvariablen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

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

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 jede(r) auf seinem/ihrem Niveau arbeiten kann Wichtig ist, dass alle am Ende besser programmieren können als zu Beginn beeindruckende Projekte entstehen NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

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

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

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

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

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

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

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

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

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

14 Ihr erstes Programm Öffnen Sie einen neuen Sketch Drücken Sie “Run”
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

15 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

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

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

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

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

20 Koordinaten am Computer
nicht ganz 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

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

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

23 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

24 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

25 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

26 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

27 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

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

29 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

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 (!!) 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

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

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

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

34 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

35 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

36 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

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

38 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

39 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

40 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

41 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

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

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

44 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

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

46 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

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

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

49 true boolean antwort = true; = Boolean (Wahrheitswerte) Typ Wert Name
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 (+/- 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

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

52 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

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

54 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

55 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

56 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

57 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 Aufrufe von 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

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) 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? AND A B Output 1 OR A B Output 1 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. NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

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

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

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

64 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

65 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

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 Second True Third Third True 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 Second True Both False NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst

68 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

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

70 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

71 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

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

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

74 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

75 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

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? Condition True Action(s) False 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 “la”s x hat beim ersten Durchgang den Wert 2 im nächsten den Wert 3, dann 4, usw. Condition True Action(s) False 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 Condition True Action(s) False 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 Kurzformen 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 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), 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; 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 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

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

96 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

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

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

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

100 Perlin-noise float n1 = noise(0.77); float n3 = noise(0.2); float n2 = noise(0.78); noise(x) 0.25 0.5 0.77 x 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

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

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

103 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

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

105 Man geht oft mit Schleifen durch Arrays:
Wenn der Array 10 Elemente hat, dann würde 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

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

107 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

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

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

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

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

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

113 Setup for a ‘Car’ before Objects
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 car’s location based on speed Learning Processing: Slides by Don Smith

114 Setup multiple ‘Cars’ before Objects
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 car’s location based on speed Learning Processing: Slides by Don Smith 114

115 Setup a ‘Car’ using Objects
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! Learning Processing: Slides by Don Smith 115

116 Setup a ‘Car’ using Objects
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) Learning Processing: Slides by Don Smith 116

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

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

119 Setup a ‘Car’ using Objects - Constructor
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 Learning Processing: Slides by Don Smith 119

120 Setup a ‘Car’ using Objects - Functions
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() Learning Processing: Slides by Don Smith 120

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: void setup() { size(200,200); // Initialize Car object myCar = new Car(); } class Car { Car() { // Constructor c = color(175); xpos = width/2; ypos = height/2; xspeed = 1; }

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

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