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

Processing

Design by NumbersNicolas Ruh & Christian Wüst

Quellen: www.learningprocessing.com

www.creativecoding.org

http://shiffman.net

openprocessing.org/visuals/?visualID=37337

http://www.learningprocessing.com/

http://www.creativecoding.org/

http://shiffman.net/

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


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




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

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


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

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


http://www.openprocessing.org/

http://www.processing.org/

Design by Numbers: Vorerfahrung?

Stellen Sie sich gegenseitig vor

Finden Sie heraus, wo Sie stehen in Bezug auf bisherige Erfahrungen im Programmieren (irgendeine Programmiersprache)


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 WIKIInputs(?): 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

Processing has promoted software literacy within the visual arts and visual literacy within technology


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 Fenster

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


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


Fehler


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


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


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


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


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


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


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)


Line


In Processing: line(x1, y1, x2, y2);1. ‘line’(klein geschrieben) = vordefinierter Befehl


bei ‘line’zwei Zahlenpaare, die Koordinaten angeben


24

Rectangle 1


In Processing: rect(x, y, w, h);1. ‘rect’(klein geschrieben) = vordefinierter Befehl


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


25

Rectangle 1b


In Processing: rectMode(CENTER); rect(x, y, w, h);1. ‘rect’(klein geschrieben) = vordefinierter Befehl


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


26

Rectangle 2


In Processing: rectMode(CORNERS); rect(x1, y1, x2, y2);1. ‘rect’(klein geschrieben) = vordefinierter Befehl


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


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)


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)

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


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

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

34

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


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

Processing weiss immer, wo die Maus ist:mouseX: Die aktuelle X-Koordinate der Maus

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

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

zuweise

n

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


zuweise

nStrings (strenggenommen kein primitiver Typ)

String meinWort = “Hallo“;

Hallo

NameTyp Wert

=meinWort


boolean antwort = true;

antw

orttrue

NameTyp Wert

=


Boolean (Wahrheitswerte)


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)


Benötigter Speicherplatz

Ganzzahlen

byte:

short:

int:

long:

Fliesskommazahlen

float:

double:

Andere Typen

boolean:

char:


Beispiele Typen

Ganzzahlen

byte: 123

short: 1984

int: 1784523

long: 234345456789

Fliesskommazahlen

float: 4.0

double: 3.14159

Andere Typen

boolean: true

char: ‘a’


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


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

Aufrufe von

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


Wahrheitswerte (Booleans) & 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


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


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

}



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


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


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


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:


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 wiederholt

das ist wichtig, damit die Schleife auch mal zu Ende geht

Variablen benutzen, damit sich bei der Wiederholung

trotzdem etwas ändern kann


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


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


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


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


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


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


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



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


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


oldY = y;

y = y + random(-10,10);


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


oldY = y;

y = noise(i*0.03)*200;


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


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


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


Arrays erstellen, Kurzform

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

NameTyp + [] Wertezu

weisen


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;

...


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


Exercise 9-7: Loop/Array continued:


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


Klassen


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


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


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


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 car

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


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


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


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.


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




Documents

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