Processing

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 ●

background(0);

Funktionsaufruf ●

background

●

(0)

●

;

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

point(10,20);

Funktionsaufruf ●

point

Name

●

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 ●

rect(10,10,30,30);

Funktionsaufruf ●

rect

Name

●

10

Argument 1

●

,

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 ●

void draw() { statements

}

Funktionsdefinition ●

void

Ergebnistyp

●

draw

Funktionsname

●

()

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

}