Processing-05. Coordination & Primitive Geometries

1. Coordination System

(click the image for the larger view)

The above image (A) presents the coordination system of the Processing and how it works. In the processing, the origin(0, 0) is the upper-left corner of the window and the value of X and Y increases down and to the right.
  The image (B) shows some examples of the coordination of points in the 100x100 pixel window. The thing is that the coordination starts with zero. So in the 100x100 pixel window, you need to keep in mind that the coordination of the upper-right corner is (99, 0) the lower-right (99, 99), and the lower-left (99, 0).
  The last image (C) gives an idea of the coordination system in 3 dimensions. The Z-values become negative as moving back in the space. 

2. Primitive Geometries
The processing offers 7 basic codes for primitive geometries, and they are as follow;

(click the image for the larger view)

The default shapes created by triangle, quad, rect, ellipse, and bezier functions have black outlines and are filled with light gray colour inside. The shape created in the first line of a program appears on top of others which are defined latter in the program.

3. Geometrical Attributes
3.1. Background Colour
background(0);      // set the background colour to black
background(255);  // set the background colour to white
background(124);  // set the background colour to dark gray
If the parameter inside the parenthesis is not defined, the default value 204(light gray) is assigned.

3.2. Filling colour
The inside colour of a shape can also be controlled by fill() function. fill() function uses the parameter(0~255) for filling colour. Once fill() is assigned, it will affect all the shapes following. So, in order to change the colour, you need to use fill() one more time. The second parameter inside the parenthesis defines the opacity of the shape. (zero is totally transparent and 255 entirely opaque)
e.g.) fill(0, 127)  // defines the black colour and opaque
If you want to create a shape without a filling colour, you just need to add noFill() function in the next sentence after defining the shape.
e.g.) rect(20, 20, 50, 50);
        noFill();

3.3. Stroke Colour
The stroke colour of shapes are defined by stroke() function. Like fill(), stroke() uses the gray value(0~255) to define the colour and the second parameter inside the parenthesis defines the opacity.
e.g.) stroke(0, 127);    // defines the stroke colour to black and little bit opaque

If you want to create a shape without the outline, add noStroke() function in the next sentence.
e.g.) rect(20, 20, 50, 50);
        noStroke();

3.4. Anti-aliasing
In the default mode, the shapes created in the processing are not assigned the anti-aliasing. In order to make them smooth, smooth() function can be used. On contrary, noSmooth() function deactivate the anti-aliasing. Once smooth() or noSmooth() function is assigned, it affects all the shapes afterwards.

3.5. Drawing attributes
(1) The thickness of a line is defined by strokeWeight() function and the one numeric parameter inside the parenthesis.
(2) strokeCap() function requires one parameter that can be either ROUND, SQUARE, or PROJECT. Each parameter defines the end shape of a line like the image following.

(3) strokeJoin() function requires one parameter that can be either MITTER, BEVEL, or ROUND.  MIITER is the default option for the corner shape in the processing, BEVEL is like the chamfer function, and ROUND is like the fillet function.

3.6. rectMode()

rectMode() function defines the way how a rectangle is drawn and requires one parameter of either CORNER, CORNERS, or CENTER.

(1) CORNER is the default way of drawing a rectangle.

(2) CORNERS uses 3rd, 4th parameters as the coordination of the corner opposite the first.

(3) CENTER uses 1st, 2nd parameters as the center of the rectangle and 3rd, 4th as the width and height.

3.7. ellipseMode()

Like rectMode(), ellipseMode() function defines how a ellipse is drawn. The parameter can be either CENTER, CORNER, CORNERS or RADIUS.

(1) CENTER is the default setting.

(2) CORNER uses 1st, 2nd parameters as the coordination of the upper-left corner of the rectangle that circumscribe the ellipse and 3rd, 4th parameters as the width and height.

(3) CORNERS uses 1st, 2nd as the coordination of the upper-left corner and 3rd, 4th as the lower-right corner of the circumscribing rectangle like CORNER.

(4) RADIUS uses 1st, 2nd parameters as the coordination of the center like CENTER option, but sets 3rd, 4th parameters half of the width and the height.