Processing Design by Numbers Nicolas Ruh & Christian Wüst Quellen: www.learningprocessing.com www.creativecoding.org http://shiffman.net openprocessing.org/visuals/?visualID=37337

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Alle Primitive Typen Ganzzahlen byte: Eine sehr kleine Zahl (-127 bis +128) short: Eine kleine Zahl (-32768 bis +32767) 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ü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

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

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

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

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

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

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

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

(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

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

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

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

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

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

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