Processing

Processing
● processing.org

● Entwickelt 2001 am MIT (Casey Reas, Ben Fry)

John Maeda (The Laws of Simplicity)

● Visual Experimentation
 Getting started
● Download
processing.org/download

● Kann direkt aufgerufen werden

● Integrierte Umgebung
 Code Area

Error Messages

Error Log
Run
- compiles the code
- opens a display window
- runs the program inside
Stop
- Terminates a running program
New
- Creates a new sketch (project)
Open
- Provides a menu with options to open files
Save
- Saves the current sketch to its current location
- To give the sketch a different name use“Save As”
Export
- Exports the current sketch as a
Java Applet embedded in an HTML file
(leeres) Programm I
 Programm II

background(0);
 Syntax Highlighting I

background(0);

● background
vordefinierter Name
 Syntax I

● Funktionsaufruf
● background Name
background(0); ● (0) Argument
● ; Aktionsende
 Programm II

background(0);

● background
vordefinierte Funktion aus der Sprachbibliothek

● Gross/Kleinschreibung beachten!
 Sprachbibliothek
● API: Application Programming Interface
● Vordefinierte Funktionen und Typen/Objekte

● Definiert den Sprachumfang

● Grundlage aller Programme

Sprachbibliothek (Reference)
Sprachbibliothek (Reference)
 API Dokumentation background
● Description
The background() function sets the color used for the background of the
Processing window.
The default background is light gray.
In the draw() function, the background color is used to clear the display
window at the beginning of each frame.

● Syntax
background(gray)

● Parameter
gray int or float: specifies a value between white and black
 Helligkeit
● Wert zwischen Schwarz und Weiß

● int
ganze Zahl

● float
Gleitkommazahl (mit . statt , )

● Wertebereich
0 - 255 bzw 0.0 - 255.0
 Fehler
; (Aktionsende) fehlt

Fehlermeldung manchmal ungenau

 Programm II

background(0);
 Programm III

background(255);
point(10,10);
 Syntax II

● Funktionsaufruf
● point Name
point(10,20); ● 10 Argument 1
● , Argument Trenner
● 20 Argument 2
● ; Aktionsende
 API Dokumentation point
● Description
Draws a point, a coordinate in space at the dimension of one pixel.
The first parameter is the horizontal value for the point, the second value
is the vertical value for the point

● Syntax
point(x, y)

● Parameter
x int or float: x-coordinate of the point
y int or float: y-coordinate of the point
Koordinatensystem
 Programm IV

background(128);
rect(10,10,30,30);
 Syntax III
● Funktionsaufruf
● rect Name
● 10 Argument 1
rect(10,10,30,30); ● , Argument Trenner
● 10 Argument 2
● , Argument Trenner
● 30 Argument 3
● , Argument Trenner
● 30 Argument 4
● ; Aktionsende
 API Dokumentation rect
● Description
Draws a rectangle to the screen.
A rectangle is a four-sided shape with every angle at ninety degrees.
The first two parameters set the location, the third sets the width, and the
fourth sets the height.
● Syntax
rect(x, y, width, height)

● Parameter
x int or float: x-coordinate of the location point
y int or float: y-coordinate of the location point
w int or float: width of the rectangle
h int or float: height of the rectangle
 Programm IV

background(128);
rect(10,10,30,30);
 Programm V

background(255);
fill(196);
rect(10,10,30,30);
 API Dokumentation fill
● Description
Sets the color used to fill shapes
● Syntax
fill(gray )

● Parameter
gray int or float: specifies a value between white and black
 Programm V

background(255);
fill(196);
rect(10,10,30,30);
 API Dokumentation fill
● Description
Sets the color used to fill shapes
● Syntax
fill(gray )
fill(red, green, blue )

● Parameter
gray int or float: specifies a value between white and black
red int or float: specifies red value
green int or float: specifies green value
blue int or float: specifies blue value
 Programm V

background(255);
fill(0,255,0);
rect(10,10,30,30);
Aufgabe
Basic Mode
Continuous Mode
 Programm VI

void draw() {
background(0);
}
 Syntax IV

● Funktionsdefinition
● void Ergebnistyp
void draw() { ● draw Funktionsname
statements ● () Argumente
} ● {} Aktionsblock
● statements Aktionen
 Programm VI

void draw() {
background(0);
}
 Change is good
● Bisher nur feste Werte
background(0)

● Variable Werte
● Zufallszahlen

● Funktion random
 API Dokumentation random
● Description
Generates random numbers.
Each time the random() function is called, it returns an unexpected value
(a float) between zero and the value of the high parameter.

● Syntax
random(high)
● Parameter
high int or float
● Returns
float
Fester Wert – Variabler Wert
 Programm VII

void draw() {
background ( random(255) );
}
 Time for Change
● Maximale Framerate

● Pause zwischen Frames

● Funktion delay
 API Dokumentation delay
● Description
Forces the program to stop running for a specified time.
Delay times are specified in thousandths of a second.

● Syntax
delay(milliseconds)

● Parameter
milliseconds int: duration of delay in milliseconds
Processing Loop II
 Programm VIII

void draw() {
background ( random(255) );
delay(200);
}
 Setup
● Initialisierung vor der draw Schleife

● Wird nur einmal ausgeführt

● Defaults setzen und andere Initialisierungen

Processing Loop III
 Programm IX
void setup() {
background(255 );
size(255, 255 ); // sets the display size
}
void draw() {
fill(0, 255, 0);
rect(10,10, 30,30);
}
 Syntax V
size(255, 255 ); // sets the display size

● Kommentar
● size(255, 255 ); Aktion
● // Kommentaranfang
● sets the display size Kommentar bis Ende der Zeile
 Programm IX
void setup() {
background(255 );
size(255, 255 ); // sets the display size
}
void draw() {
fill(0, 255, 0);
rect(10,10, 30,30);
}
 Programm X
void setup() {
background(255 );
size(255, 255 ); // sets the display size
}
void draw() {
fill(mouseX, mouseY, 0);
rect(10,10, 30,30);
}
 Syntax VI
fill(mouseX, mouseY, 0);

● mouseX, mouseY
● Vordefinierte Variable
● Enthalten die aktuellen Maus Koordinaten
 Programm X
void setup() {
background(255 );
size(255, 255 ); // sets the display size
}
void draw() {
fill(mouseX, mouseY, 0);
rect(10,10, 30,30);
}
 Keeping track
● Bisher zustandslose Schleifen

● Jeder Durchgang wieder neu

● Zustand merken
● Variablen
 Syntax Variable
● Variablendefinition

● Typ Variablenname ;
int grayValue;

● Typ Variablenname = Initialwert ;

int grayValue = 0;
 Programm
int grayValue = 0;

void draw() {
background(grayValue);
}
 Syntax Zuweisung
● Variablenname = Wert;
grayValue = 0;
grayValue = grayValue + 1;

● Variablenname += Wertänderung;
grayValue += 1;

● Zuweisungsoperatoren
+= -= *= /=
 Programm
int grayValue = 0;

void draw() {
background(grayValue);
grayValue = grayValue + 1;
// alternativ grayValue += 1;
// oder mit increment grayValue++;
}