In Processing, you determine the coordinates of every object you draw on the screen.

 

The coordinate system is in pixels. The origin (ie. starting point) is the top left corner, you should give your coordinates relative to that point. Another thing you should know is, each shape has a different reference point. For example, rect() has its top left corner as a reference point. For ellipse(), it is the center. These reference points can also be changed with methods like rectMode() and ellipseMode().

​

​

Each shape has its own syntax to be created.

You want to give either its coordinates or its sizes or both.

Here are some shapes you should be familiar with

(for all values given below, ‘x’ and ‘y’ means x and y coordinates

in pixels, ‘w’ and ‘h’ means width and height values also in pixels):

​

point() - Simple point, only needs a single coordinate. Usage:

• point(x, y)

• point(x, y, z) - In case you are using 3 dimensions.

 

line() - For creating a line.

You can create a line with only a starting and ending point. Usage:

• line(x1, y1, x2, y2)

• line(x1, y1, z1, x2, y2, z2) - In case you are using 3 dimensions.

 

triangle() - For creating a triangle.

Usage: triangle(x1, y1, x2, y2, x3, y3)

 

quad() - For creating a quadrilateral.

Usage: quad(x1, y1, x2, y2, x3, y3, x4, y4)

 

rect() - For creating a rectangle.

The reference point is top left corner by default

(refer to the figure). Here is the usage:

• rect(x, y, w, h)

• rect(x, y, w, h, r) - ‘r’ mean the radius in pixels to make the corners rounded.

• rect(x, y, w, h, tl, tr, br, bl) - Radius for top left, top right, bottom right, bottom left corners respectively.        This is also in pixels.

 

ellipse() - For creating an ellipse shape.

This is also used to create a circle, same width and height values should be given.

The reference point for this shape is the center by default (refer to the figure). Here is the usage:

• ellipse(x, y, w, h)

 

arc() - Draw an arc. Usage:

• arc(x, y, w, h, start, stop) - ‘start’ and ‘stop’ is used to determine the angle to start and stop drawing the arc. Values are in radians. Constants such as “PI, HALF_PI, QUARTER_PI and TWO_PI” can be used.

• arc(x, y, w, h, start, stop, mode) - ‘mode’ variable is to determine the rendering style of the arc (string). Available options are “OPEN, CHORD, PIE”. OPEN will leave the non-drawn parts borderless. CHORD will complete the non-drawn parts with a border. PIE will make your arc look like a pie chart.

 

Displaying texts on the screen is similar to displaying shapes. You want to determine a coordinate at which you want your text to be displayed. There is however more to handling texts. You will have more control over your texts after the properties & settings section, where you’ll learn how to apply settings and properties to objects.

For now, I will show the basics of displaying texts. There are many ways to do it, here are some basics:

​

text() - Display texts. Usage:

• text(c, x, y) - ‘c’ means character, any alphanumeric character will be displayed.

• text(c, x, y, z) - In case you are working with 3 dimensions.

• text(str, x, y) - ‘str’ is the string to be displayed.

• text(str, x, y, z) - In case you are working with 3 dimensions.

• text(num, x, y) - ‘num’ is the numeric value to be displayed.

• text(num, x, y, z) - In case you are working with 3 dimensions.