Basic Functions in Processing

Setting up a canvas

Sets the size of the window/canvas where your drawing will appear.

size(width, height)

width:The number of pixels going from the first pixel to the last on the right
height:The number of pixels going from the first pixel to the last at the bottom

Setting the background colour of the canvas

Sets the background to a grayscale colour.

background([0…255])

[0…255]:The number between 0 and 255 represents the shade of gray for the background

0 is black
255 is white

Drawing a line

Draws a straight line on the canvas.

line(x1, y1, x2, y2)

x1:The x-coordinate of the starting point
y1:The y-coordinate of the starting point
x2:The x-coordinate of the ending point
y2:The y-coordinate of the ending point

Drawing a triangle

Draws a 3-sided shape on the canvas.

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

x1:The x-coordinate of the first vertex
y1:The y-coordinate of the first vertex
x2:The x-coordinate of the second vertex
y2:The y-coordinate of the second vertex
x3:The x-coordinate of the third vertex
y3:The y-coordinate of the third vertex

Drawing 4-sided shapes

Draws any quadrilateral on the canvas.

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

x1:The x-coordinate of the first vertex
y1:The y-coordinate of the first vertex
x2:The x-coordinate of the second vertex
y2:The y-coordinate of the second vertex
x3:The x-coordinate of the third vertex
y3:The y-coordinate of the third vertex
x4:The x-coordinate of the fourth vertex
y4:The y-coordinate of the fourth vertex

Draws a rectangle on the canvas.

rect(x, y, width, height)

x:The x-coordinate of the top-left vertex
y:The y-coordinate of the top-left vertex
width:The number of pixels from the top-left vertex to the top-right vertex
height:The number of pixels from the top-left vertex to the bottom-left vertex

Drawing an ellipse

Draws an ellipse on the canvas.

ellipse(x, y, width, height)

x:The x-coordinate of the center of the ellipse
y:The y-coordinate of the center of the ellipse
width:The number of pixels wide from the fullest part of the ellipse
height:The number of pixels tall the ellipse will be