Processing

Processing

Design by NumbersNicolas Ruh & Christian Wüst

Quellen: www.learningprocessing.com

www.creativecoding.orghttp://shiffman.net

openprocessing.org/visuals/?visualID=37337

http://www.learningprocessing.com/

http://www.creativecoding.org/

http://shiffman.net/

Inhalte (verlinkt!)

DesignByNumbers

Processing IDEProcessing & JAVA

Koordinaten

Einfache Formen

Farben

Code Grundgerüst

Maus & Tasten

VariablenInstanzvariablen

Boolean Logik

Verzweigungen

Schleifen

Methoden

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


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


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


Design by Numbers: Ressourcen

Wikiwww.nicolasruh.wikispaces.com

ArbeitsblätterFolienCheatcheetsLinks

Websiteswww.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 EnglischReference, Tutorials, Beispiele ...


http://www.nicolasruh.wikispaces.com/

http://www.nicolasruh.wikispaces.com/


http://www.openprocessing.org/

http://www.processing.org/

Design by Numbers: Grobplanung


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 WIKI Inputs(?): sagen Sie uns, was Sie interessiertErweiterungen: Informationen sammeln zu

Gestalten Sie etwas Tolles!

http://www.openprocessing.com/


http://nicolasruh.wikispaces.com/Design+by+Numbers

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…


IDE

Auch ausführen kann man Sketches direkt hier (RUN = Ctrl-R)Entweder öffnet sich das Programm in einem neuen Fensteroder man bekommt eine Fehlermeldung


MenuToolbarSketch Tabs

Text Editor

Message LineText Area

Current Line#

RUN

DisplayWindow

Fehlermeldung

Toolbar buttons


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


Ihr erstes ProgrammÖffnen Sie einen neuen Sketch

Im Editor, tippen Sie:// Mein erstes Programmprint(“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


Fehler


Vermutlich ist das Problem in dieser Zeile

Der Compiler beschreibt das Problem

- hier ist es die GROSSSCHREIBUNG

Help, Find In ReferenceDoppelklick auf Befehl (wird in gelb hervorgehoben), dannMenu: 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 ein Beispiel auf


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 GrafikenProcessing-Sketches können als universale JAVA-Applications (.jar) exportiert werdenDie üblichen JAVA-Bibliotheken können in Processing eingebunden werden


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)

x86Windows OS X

G3/4/5 CPUPhone OS

Java VM Java VM Java VM

PC Mac Cell Phone

Portable Java Program

RunningJava

Program

RunningJava

ProgramRunning

Java Program

JRE


Koordinaten in der Mathematik

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

Ursprung

17

Koordinaten am Computer

Die obere linke Ecke ist 0,0X (= erste Koordinate) zählt nach rechtsY (= zweite Koordinate) zählt nach unten


nicht dasselbe Koordinatensystem wie in der Mathematik!

Ursprung

18

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


Einfache Formen

Je nach Form braucht es verschiedene Informationen:Point: x und yLine: Start & Endpunkt, also zweimal x und yRectangle: Zwei Ecken? Oder???Ellipse: ????


Point

In Processing: point(x, y);1. ‘point’(klein geschrieben) = vordefinierter Befehl2. in Klammern die Informationen (=Parameter)

bei ‘point’zwei Zahlen, die Koordinaten angeben

3. Semikolon; (nach jedem Befehl)


Line


In Processing: line(x1, y1, x2, y2);1. ‘line’(klein geschrieben) = vordefinierter Befehl2. in Klammern die Informationen (=Parameter)

bei ‘line’zwei Zahlenpaare, die Koordinaten angeben


22

Rectangle 1


In Processing: rect(x, y, w, h);1. ‘rect’(klein geschrieben) = vordefinierter Befehl2. in Klammern die Informationen (=Parameter)

bei ‘rect’die obere linke Ecke sowie Breite und Höhe


23

Rectangle 1b


In Processing: rectMode(CENTER); rect(x, y, w, h);1. ‘rect’(klein geschrieben) = vordefinierter Befehl2. in Klammern die Informationen (=Parameter)

bei ‘rect’der Mittelpunkt sowie Breite und Höhe


24

Rectangle 2


In Processing: rectMode(CORNERS); rect(x1, y1, x2, y2);1. ‘rect’(klein geschrieben) = vordefinierter Befehl2. in Klammern die Informationen (=Parameter)

bei ‘rect’die obere linke Ecke sowie die untere rechte Ecke


25

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)


RGB-FarbenWerden meist aus den drei Grundfarben Rot, Grün und Blau gemischt, z. B.:

Rot + Grün = GelbGrün + Blau = Cyanno 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)

28

Farbwähler

Processing hat einen eingebauten FarbwählerMenüpunkt: Tools Color Selectormit der Maus auswählen oder Farbwerte manuell eingebenRGB wie gehabt, ganz unten dasselbe im HexadezimalsystemHSB = andere Methode, mit drei Werten eine Farbe anzugeben

mit Code: colorMode(HSB); //H = hue; S = saturation; B = brightnessmit colorMode kann man auch den Range der Farbwerte ändern, z.B.:colorMode(RGB,100); //RGB, aber Farbwerte von 0 bis 100


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


grayscale, Beispiel

Füllfarbe und Rahmenfarbe gelten für alle folgenden Formen - esseidenn sie werden wieder geändertStandardwerte (also wenn Sie selbst nichts angeben):

background: 128 (mittleres grau)fill: 255 (weiss)stroke: 0 (schwarz)


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

32

Transparenz, Beispiel

Der letzte Wert gibt die Tranzparenz anwird oft ‚alpha‘-Kanal genannt


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


// Mein erstes Programmprint(“Hallo Welt”);rect(10, 10, 50, 50);

34

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


Schuhe anziehenVor die Türe gehen

Schritt machenLuft holen

Beispiel in Processing – was passiert?


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?


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


void setup() { size(200,200);}

void draw() { background(255); line(mouseX, mouseY, 100, 100);}

Maus-TrackingProcessing weiss immer, wo die Maus ist:mouseX: Die aktuelle X-Koordinate der MausmouseY: Die aktuelle Y-Koordinate der Maus

Ein Beispiel:


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 MauspmouseY: Die vormalige Y-Koordinate der Maus


Ein einfaches Zeicheprogramm Einfach immer Linien zeichnen

zwischen der vormaligen und der aktuellen Position der Maus:


Mausklicks und Tastendrucke


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


Variablen sind wie Kisten

int meineZahl = 7;

7

NameTyp Wert

=meinZahl

Form Anschrift Inhalt

zuweisen

einpacken


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


zuweisen

Strings (strenggenommen kein primitiver Typ)

String meinWort = “Hallo“;

Hallo

NameTyp Wert

=meinWort


var antwort:Boolean = true;

antwo

rt true

Name Typ Wert

=


Boolean (Wahrheitswerte)


Alle Primitive TypenGanzzahlenbyte: 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)

Fliesskommazahlenfloat: Eine grosse Zahl mit viele Nachkommastellen double: Doppelt so gross oder präzise, selten nötig

Andere Typenboolean: Wahrheitswert, also true oder falsechar: Ein Zeichen‘a’(in einfachen Anführungszeichen)


Benötigter SpeicherplatzGanzzahlenbyte:short:int:long:

Fliesskommazahlenfloat:double:

Andere Typenboolean:char:


Beispiele TypenGanzzahlenbyte: 123short: 1984int: 1784523long: 234345456789

Fliesskommazahlenfloat: 4.0double: 3.14159

Andere Typenboolean: truechar: ‘a’


Variablen benennenRegeln: 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);}________


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


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)

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!



System-VariablenEinige Variablen in Processing sind gegeben:(Diese kann man nicht direkt ändern, aber benutzen)

mouseX , mouseY, pmouseX and pmouseYwidth: Breite (in Pixeln) des display windowsheight: Höhe (in Pixeln) des display windowsframeCount: Der wievielte Frame gerade dran istframeRate: Rate (Frames pro Sekunde)screen.height, screen.width: Bildschirm Dimens.key: Die zuletzt gedrückte TastekeyCode: Numerischer Code für eine TastemousePressed: True or false (gedrückt oder nicht?)mouseButton: Welche Taste? (left, right, center)


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 = Ja0 = false = aus = Falsch = NeinKein 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 00 1 01 0 01 1 1

A B Output

0 0 00 1 11 0 11 1 1

AND

OR


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:


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 00 1 01 0 01 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: ||


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 00 1 11 0 11 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){ //wennHausaufgaben machen; //dann 1

} else if (es ist schönes Wetter) { //sonst wennins Badi gehen; //dann 2

} else { //sonstComputerspiele spielen; //dann 3

}



Verzweigungen: ifif (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


Verzweigungen: if-elseif (Condition){// True Action

} else {// False Action

}

Mit else kann man angeben, was passieren soll, wenn die Condition nicht true ergeben hatelse = sonst; dabei gibt man keine neue Condition an!

TrueAction

ConditionTrue

False

FalseAction


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


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

BeispielDie Maus-Position bestimmt die Hintergrundfarbe:


if (mouseX < width/3) { background(255);} else if (mouseX < 2*width/3) { background(127);} else { background(0);}

Bedingungen geschickt ordnen


if else Beispiele


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


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;

}



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


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


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


Schleifen: whileGenau 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)ConditionTrue

False


Schleifen: whileGenau 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”sx hat beim ersten Durchgang den Wert 2im nächsten den Wert 3, dann 4, usw.


False


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


False

Exercise 6.1: while-loop


Exercise 6.2: for-loop


Exercise 6-3Wuzzit 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;}

Kurzformen


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


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


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 definiertDer 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 willum die Übersicht zu behalten (sinnvolle Namen!)um Code flexibel zu gestalten


MethodenkopfName der Methode

Typ des Rückgabewerts

Typ und Name der Übergabewerte

Anfangdes Codeblocks

Endedes Codeblocks

Methoden-körper

Methoden


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!


Jede Methode sollte nur eine Aufgabe haben


sprechende Namen zu finden ist

dann einfach

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


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


in draw wird sum aufgerufen, drei Werte werden übergeben sum empfängt drei Werte vom erwarteten Typ und weist sie a, b und c zusum 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


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 MethodenrandomNumber = random(min, max) //eine Zufallszahl generierennumberInRange = constrain(number, min, max) //garantieren, dass eine Zahl innerhalb eines Bereichs istvalue2 = map(value1, min1, max1, min2, max2) //konvertiert einen Wert in einen anderen Wertebereichdistance = dist(x1, y1, x2, y2) //die Distanz zwischen zwei Punkten berechnenstrokeWeight(size) //die Dicke des Striches/Rahmens kontrollierennewColor = lerpColor(fromColor,toColor,r) //Zwischenfarbe berechnenpixelArray = loadPixels() //die momentan dargestellten Pixel in einen Color-Array laden


Faustregeln für Methoden

Schreiben Sie viele, kleine MethodenJede Methode sollte nur eine Aufgabe haben

dann ist sie klein (wenige Zeilen Code, meist < 10)

dann ist sie einfach zu benennendann wird Ihr Code verständlich (auch ohne Kommentare)

dann kann Sie eher wiederverwertet werden



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


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


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


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ückWenn die übergebenen x-Werte nahe beieinander liegen, dann werden sich auch die noise(x)-Werte ähnelnDas geht auch mit mehreren Dimensionen: noise(x,y,z);


0.770 x

nois

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


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 aufnehmenkönnen ihre Grösse Nicht ändernstellen 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


Arrays erstellen, Kurzform

int[] meinArray = {2, 5, 0, 1};NameTyp + [] Werte

zuweisen


ein „Regal“ mit vier Fächern und den ganzzahligen Werten 2, 5, 0, 1 drinUm auf Werte zuzugreifen braucht es die Nummer des Faches (=Index). Achtung: gezählt wird ab 0!int x = meinArray[1]; x hat den Wert 5meinArray[0] = 7; im ersten Fach ist eine 7

Arrays erstellen, mehrere Schritteint[] meinArray = new int[4];

//erstellt Array mit 4 leeren (null) ElementenmeinArray[0]=2; //Elemente einfüllenmeinArray[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

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:


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 ElementeDas 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 ArraysArrays gibt es in JAVA nur noch aus historischen Gründen, eigentlich sollte man sauberere Datenstrukturen (Z.B. die Klasse ArrayList) vorziehen


Exercise 9-7: Loop/Array continued:


int [] nums = { 5, 4, 2, 7, 6, 8, 5, 2, 6, 14 };

Klassensind nützlich, wenn es viele gleichartige oder ähnliche Objekte brauchthaben 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 übergebenKlassen können in eigenen Dateien stehen


Klassen


Instanzvariable

All

das

gehö

rt z

ur 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


Instanzvariable

All

das

gehö

rt z

ur 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-KlasseDas Beispiel ist auf Englisch; Hinweise:

object = InstanzOOP = ObjektOrientiertes Programmieren (OOP bedeutet grob: mit Klassen) global variable = Instanzvariableparameters = Übergabewerte


Exercise 8.1: Plan a Car ClassLet’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 objectsWe’ll use our setup() and draw() methods

Setup for a ‘Car’ before Objects

Learning Processing: Slides by Don Smith 111

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


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


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 carInstead of initializing all of those variables, we initialize the car object!

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 backgroundTell the car to ‘move’ based on speedTell 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


Let’s break it down step by stepDeclare the plan for the ‘Car’

Outside draw() and setup()Put variables for color, location and speed inside

Setup a ‘Car’ using Objects - Constructor


We need to write instructions to build a carIt is called the ‘Constructor’ methodMove the code that was in setup()Set variables for color, location and speed inside

Setup a ‘Car’ using Objects - Functions


Move the functions that did things to the carMove the code to inside the Car classThe will be called methods of the classMove 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 object

Sets initial values

It is ‘called’ when you use new:

class Car {

Car() { // Constructor c = color(175); xpos = width/2; ypos = height/2; xspeed = 1; }

void setup() { size(200,200); // Initialize Car object myCar = new Car();}

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.


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


Date post:	23-Feb-2016
Category:	Documents
Upload:	hayes
View:	29 times
Download:	0 times

Processing

Documents