The coordinate system

Note that the coordinate system in the processing programming is defined as shown opposite.
As usual, the x-axis shows higher values on the right. The y-axis, on the other hand, is exactly the opposite as usual. Higher y values are positioned lower on the scale! 

Drawing points

Points can be generated with the command point.

The coordinates will be established relatively from the upper left corner of the output window.

point
Syntax	point(x, y)
Parameter	x: x-coordinate of the point y: y-coordinate of the point
Example
point(10, 10); point(10, 12); point(10, 14); point(10, 16); point(10, 18); point(10, 20); point(12, 10); point(12, 12); point(12, 14);point(12, 16); point(12, 18); point(12, 20);point(14, 10); point(14, 12); point(14, 14);point(14, 16); point(14, 18); point(14, 20);

2. Drawing lines

Lines are generated with the command line:

line
Syntax	line(x1, y1, x2, y2)
Parameter	x1: x-coordinate of the first point y1: y-coordinate of the first point x2: x-coordinate of the second point y2: y-coordinate of the second point
Example
line(10, 80, 30, 40); line(20, 80, 40, 40); line(30, 80, 50, 40); line(40, 80, 60, 40); line(50, 80, 70, 40);

3. Drawing rectangles

Rechtecke bestehen aus einem Rand und einer Füllung. Sie können mit dem rect-Befehl erzeugt werden.

rect
Syntax	rect(a,b,c,d) rect(a,b,c,d,r) rect(a, b, c, d, tl, tr, br, bl)
Parameter	a: x-coordinate b: y-coordinate c: width d: height r: radius for rounded corner tl: radius for top left corner tr: radius for top right corner br: radius for bottom right corner bl: radius for bottom left corner
Example
fill(255,0,0); rect(10, 10, 60, 60); fill(0,255,0); rect(80, 10, 60, 60, 10); fill(0,0,255); rect(150, 10, 60, 60, 20, 10, 5, 0);

4. Changing the drawing area

You can change the drawing area with the commands size and background.

size
Syntax	size(w, h)
Parameter	w: width of the drawing area h: height of the drawing area
Description	allows to adjust the size of the drawing area

Syntax	background(rgb) background(rgb, alpha)
Parameter	rgb: any color value alpha: opacity
Description	allows to colour the drawing area

5. Representation of colours

Colours can be defined in different ways. In Processing the following representations are possible:

Description	Beispiel
RGB-individual values All colour components can have values between 0 and 255	background(204, 153, 0)
Greyscale A grey tone is used with values between 0 and 255	background(155)
RGB-hex-representation Colour components are displayed in hexadecimal numbers	background(#FFCC00)

In addition, opacity with values between 0 and 255 can be specified in many cases, to influence the visibility of the object background.

6. Fillings and stroke colour and stroke width

In order to change the representation of drawn objects you use the commands  stroke, strokeWeight
and fill.

stroke
Syntax	stroke(rgb) stroke(rgb, alpha)
Parameter	rgb: any colour value alpha: opacity
Description	changes the colour of lines and borders for all the following commands.

strokeWeight
Syntax	strokeWeight(weight)
Parameter	weight: weight in pixels
Description	changes the weight of lines and borders for all the following commands.

fill
Syntax	fill(rgb) fill(rgb, alpha)
Parameter	rgb: any colour value alpha: opacity
Description	changes the colour of the filling for all the following commands.