Beruflich Dokumente
Kultur Dokumente
Processing
Processing
Processing
● processing.org
● Visual Experimentation
Getting started
● Download
processing.org/download
● 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
● 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
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
● 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
● 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
● Zustand merken
● Variablen
Syntax Variable
● Variablendefinition
● Typ Variablenname ;
int grayValue;
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++;
}