Processing
description
Transcript of Processing
Processing
Design by NumbersNicolas Ruh & Christian Wüst
Quellen: www.learningprocessing.com
www.creativecoding.org
http://shiffman.net
openprocessing.org/visuals/?visualID=37337
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
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. plusbesondere 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
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. plusbesondere 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
Design by Numbers: Mittel
Programmierumgebung & -sprache:Processing, basierend auf JAVA
Grundkenntnisse Programmieren:Erarbeiten/Repetieren und viel üben
Ideen und Kreativität:Erst Beispiele variieren, dann eigenes Projekt
Motivation und Eigenständigkeit:können wir hoffentlich voraussetzen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 5
Design by Numbers: Ressourcen
Wiki
www.nicolasruh.wikispaces.com
Arbeitsblätter
Folien
Cheatcheets
Links
Websites
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
Reference, Tutorials, Beispiele ...
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 6
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
Design by Numbers: Grobplanung
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 8
Grundkurs Processing
Mo Di Mi Do Fr
Sketches erweitern, Ideen sammeln, Projektskizze erstellen
Eigenes Projekt umsetzen
Sketches hochladen: www.openprocessing.com Projekt hochladen
Material: www.creativecoding.org & Folien Erfolgskontrolle: ArbeitsblätterArbeitsweise: im Team, teilweise geführt
Inspiration: s. Links auf dem WIKIInputs(?): sagen Sie uns, was Sie interessiertErweiterungen: Informationen sammeln zu
Gestalten Sie etwas Tolles!
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
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
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
MenuToolbarSketch Tabs
Text Editor
Message LineText Area
Current Line#
RUN
DisplayWindow
Fehlermeldung
Toolbar buttons
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 12
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
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 Namenz.B. D:/Dokumente/Processing/Sketches/NRHallo/NRHallo.pde
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 14
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
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
Processing baut auf JAVA aufProcessing 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 ProcessingLibrary
Java Compiler
Portable Java Program
JavaLibrary
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 Java VM Java VM
PC Mac Cell Phone
Portable Java Program
RunningJava
Program
RunningJava
ProgramRunning
Java Program
JRE
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 18
Koordinaten in der Mathematik
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst
Ursprung
19
Koordinaten am Computer
Die obere linke Ecke ist 0,0X (= 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
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
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
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
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 ‘line’zwei Zahlenpaare, die Koordinaten angeben
3. Semikolon; (nach jedem Befehl)
24
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 ‘rect’die obere linke Ecke sowie Breite und Höhe
3. Semikolon; (nach jedem Befehl)
25
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 ‘rect’der Mittelpunkt sowie Breite und Höhe
3. Semikolon; (nach jedem Befehl)
26
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 ‘rect’die obere linke Ecke sowie die untere rechte Ecke
3. Semikolon; (nach jedem Befehl)
27
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
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
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)
30
Farbwähler
Processing hat einen eingebauten FarbwählerMenü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 anzugebenmit 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
Anwendung von Farben
// Hintergrundfarbe; gleich sichtbarbackground(255); // 100% weissbackground(0,255,0); // 100% grünbackground(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); // violettfill(255,255,0,128); // gelb, halbtransparentnoFill(); // keine Füllfarbe
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 32
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
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
Transparenz, Beispiel
Der letzte Wert gibt die Tranzparenz anwird 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);
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()
Beispiel: Joggen gehen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 37
Schuhe anziehenVor die Türe gehen
Schritt machenLuft holen
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?
die Grösse des display Window, das braucht es immer
der Default wäre 60
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
Der background-Trickvoid 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);}
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
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
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
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
Interaktionen mit der Mausif (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
Variablen sind wie Kisten
int meineZahl = 7;
7
NameTyp Wert
=meinZahl
Form Anschrift Inhalt
zuweise
n
einpacken
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 46
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
zuweise
nStrings (strenggenommen kein primitiver Typ)
String meinWort = “Hallo“;
Hallo
NameTyp Wert
=meinWort
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 48
var antwort:Boolean = true;
antw
orttrue
Name Typ Wert
=
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 49
Boolean (Wahrheitswerte)
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 (-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 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: 234345456789
Fliesskommazahlen
float: 4.0
double: 3.14159
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
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);}________
Ergebnis?
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)
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)
Oft gibt es viele InstanzvariablenFür alles, was sich kontinuierlich verändern soll. So geht‘s:
Ausserhalb von draw() deklarieren und initialisierenInnerhalb von draw() abrufen und verändern
Call to draw()
circleX circleY circleW circleH
1 0 0 50 100
2 0.5 0.5 50.5 100.5
3 1.0 1.0 51 101
10 4.5 4.5 54.5 104.5
30 14.5 14.5 64.5 114.5
100 49.5 49.5 99.5 149.5
200 99.5 99.5 149.5 199.5
Eine solche Tabelle ist oft nützlich, um ein Programm zu analysieren!
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 57
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 58
System-VariablenEinige 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 (Boolean) & LogikBooleans 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?
A B Output
0 0 0
0 1 0
1 0 0
1 1 1
A B Output
0 0 0
0 1 1
1 0 1
1 1 1
AND
OR
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.
Logische Operatoren: ANDManchmal sollen mehrere Bedingungen erfüllt sein, bevor man etwas tutBeispiel:
If age >= 16 AND permit == truePrint “OK to drive”
In JAVA schreibt man‘AND’ 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 && permit == true){ print(“OK to Drive”);} else { print(“Ride the bus”);}
A B Output
0 0 0
0 1 0
1 0 0
1 1 1
Logische Operatoren: ORManchmal 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”);
A B Output
0 0 0
0 1 1
1 0 1
1 1 1
Die Klammern bewirken, dass das AND zuerst getestet wird
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
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 64
Verzweigungen: if
if (Condition){// True Action
}
Die Condition ist meist eine logische RechnungNur wenn dabei true herauskommt…
… wird der Code in den geschweiften Klammern ausgeführt
Beispiel:if (mouseX < width/2){
fill(255, 0, 0);
}
Action
ConditionTrue
False
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!
TrueAction
ConditionTrue
False
FalseAction
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 66
Verzweigungen: else ifMehrere 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 TrueAction
FirstCondition
False
True
SecondCondition Second
TrueAction
False
True
ThirdCondition Third True
Action
True
False
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 67
Verzweigungen: else if und elseEin 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 TrueAction
FirstCondition
False
True
SecondCondition Second
TrueAction
False
True
Both FalseAction
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);}
Bedingungen geschickt ordnen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 69
if else Beispiele
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 70
float r = 150; // variablesfloat 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 ifes geht ohne Klammen – bitte vermeiden
constrain( ) kann Verzweigungen sparen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 71
float r = 150; // variablesfloat 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}
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
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 73
Wozu Schleifen?// No variablesstroke(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);
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 74
Wozu Schleifen?// No variablesstroke(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 variablesstroke(0);int xpos = 50;
while (xpos <= 150){
line(xpos,60,xpos,80);xpos = xpos + 10;
}solange das true ergibt,
wird der Codeblock wiederholtdas ist wichtig, damit die
Schleife auch mal zu Ende geht
Variablen benutzen, damit sich bei der Wiederholung
trotzdem etwas ändern kann
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
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.
Action(s)Condition
True
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
Action(s)Condition
True
False
Exercise 6.1: while-loop
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 79
Exercise 6.2: for-loop
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 80
Exercise 6-3Wuzzit 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);}
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;}
Kurzformen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 82
Beim Programmieren (insbesondere von Schleifen) will man häufig hoch- oder runterzählenDeswegen 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ählenDekrementieren = 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);
}
}
Methoden
sind Codeblöcke mit einem NamenNamen 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ützlichwenn 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
MethodenkopfName der Methode
Typ des Rückgabewerts
Typ und Name der Übergabewerte
Anfangdes Codeblocks
Endedes Codeblocks
Methoden-körper
Methoden
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 86
MethodenaufrufName der Methode
Übergabe-
Wert
drawShip( 100 );
void drawShip (int size) { // Code
// Code // …
}
Beispiel für das Auslagern von MethodenCodeteile benennen erhöht die Übersichtlichkeit!
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 87
Jede Methode sollte nur eine Aufgabe haben
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 88
sprechende Namen zu finden ist
dann einfach
Ü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 colorvoid 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 …}
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
MethodenaufrufnoStroke( );
MethodenaufrufstrokeWeight( 5 );
Methodenaufrufint r = random(0,3);
Methodendefinitionvoid noStroke( ){}
Methodendefinitionvoid strokeWeight(int size){}
Methodendefinitionint random (int min, int max){}
void = leer, nichts
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 totalsum gibt den Wert von total zurück (return), der Wert passt zum Typ intin 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; }
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…
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
Faustregeln für Methoden
Schreiben Sie viele, kleine Methoden
Jede Methode sollte nur eine Aufgabe habendann 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
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 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‘.
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
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
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
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 100
0.770 x
no
ise(
x)
0.50.25
float n2 = noise(0.78);
float n1 = noise(0.77);float n3 = noise(0.2);
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
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
Arrays erstellen, Kurzform
int[] meinArray = {2, 5, 0, 1};
NameTyp + [] Wertezu
weisen
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
Arrays erstellen, mehrere Schritte
int[] meinArray = new int[4];
//erstellt Array mit 4 leeren (null) ElementenmeinArray[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
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]}
Wenn der Array 10 Elemente hat, dann würde im letzten Durchgang arr[10] benutzt, also das elfte Element!
Arrays: Hinweise
Leere Elemente haben den Wert nullarray.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
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 };
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
Klassen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 109
Instanzvariable
All
das
geh
ört
zu
r K
lass
e
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)
class Car {int carSize = 10;Car(){
//Code}void drive(){
//Code}
}
Klassen
NKSA | Design By Numbers | Nicolas Ruh & Christian Wüst 110
Instanzvariable
All
das
geh
ört
zu
r K
lass
e
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)
class Car {int carSize = 10;Car(int size){
this.carSize = size;
}void drive(){
//Code}
}
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
Exercise 8.1: Plan a Car Class
Let’s plan a simple CarList 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
Setup for a ‘Car’ before Objects
Learning Processing: Slides by Don Smith 113
Use global variables for ‘properties’Color: carColorLocation: carX, carYSpeed: carSpeed
In setup()Set the carColorSet the starting locationSet the initial speed
In draw()Fill backgroundDisplay car at location with color (may use a function)Increment car’s location based on speed
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 CarsDeclare 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 backgroundLoop through all the cars
Display car at location with color (may use a function)Increment car’s location based on speed
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: carColorLocation: carX, carYSpeed: carSpeedCar object instead!
We end up with one variable to represent the car
Instead of initializing all of those variables, we initialize the car object!
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)
The ‘Car’ classConvert the non-OOP Car Data to a ClassNon-OOP OOP
Setup a ‘Car’ using Objects - Data
Learning Processing: Slides by Don Smith 118
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
Setup a ‘Car’ using Objects - Constructor
Learning Processing: Slides by Don Smith 119
We need to write instructions to build a carIt is called the ‘Constructor’ method
Move the code that was in setup()
Set variables for color, location and speed inside
Setup a ‘Car’ using Objects - Functions
Learning Processing: Slides by Don Smith 120
Move the functions that did things to the carMove the code to inside the Car class
The will be called methods of the class
Move the code that was in display()and drive()
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; } }}
What was that about a ‘Constructor’?A constructor is a special method of a class
Has the same name as the class
“Builds’ the objectSets 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();}
And here is the OOPized versionIs 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
Car Class should really be in its own file…
Click ‘Right Arrow’ in tabs rowUse ‘New Tab’ in menu to create a new fileName the new tab exactly like the class = ‘Car’Move the code for the ‘Car’ class to itSaves 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
Your first multi-file Project!
What if we want to make more cars?
Right now, all cars are exactly the sameTheir 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; }
Please review parameter passing…Make a new frog with a length of 100
Now we can make two ‘custom’ carsUse your new ‘parameterized’ constructor!
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..);
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!
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