Basic Drawing Functions in Processing
We will begin by using simple functions defined by Processing to build basic shapes in a display window. A display window is activated at the beginning of every Processing "sketch". The size of the display window is determined by the number of pixels along each axis. Similar to a Cartesian plane, the x-axis is horizontal and the y-axis is vertical. However, the origin (0,0) is located at the top left corner of the display window. The specific location of each individual pixel is defined by an ordered pair (x,y).
size():
The default size of the display window is 100 pixels by 100 pixels, however we can change the size of the display window by using the built-in function size() and passing the values of the height and width (in pixels) to the function. The size() function must be the first line of the setup function in an "active" sketch. By calling this function, the built-in variables height and width are initialized.
General format:
size(width, height);
Example: Create a display window with a height of 400 pixels and a width of 300 pixels.
The default size of the display window is 100 pixels by 100 pixels, however we can change the size of the display window by using the built-in function size() and passing the values of the height and width (in pixels) to the function. The size() function must be the first line of the setup function in an "active" sketch. By calling this function, the built-in variables height and width are initialized.
General format:
size(width, height);
Example: Create a display window with a height of 400 pixels and a width of 300 pixels.
line():
To draw a line in the display window, use the function line(), passing it 4 parameters: the x and y coordinates of each point that defines the line.
General Format:
line(x1,y1,x2,y2);
Example: Using the previously defined display window, create a line from point (50, 50) to (200,350)
To draw a line in the display window, use the function line(), passing it 4 parameters: the x and y coordinates of each point that defines the line.
General Format:
line(x1,y1,x2,y2);
Example: Using the previously defined display window, create a line from point (50, 50) to (200,350)
triangle():
To draw a triangle, use the built-in function triangle(), passing it 6 parameters: the coordinates of the 3 points that define a triangle.
General Format:
triangle(x1,y1, x2,y2, x3,y3);
Example: In a display window 200 x 200, draw a triangle with points at (25,45), (150, 60) & (50, 175)
To draw a triangle, use the built-in function triangle(), passing it 6 parameters: the coordinates of the 3 points that define a triangle.
General Format:
triangle(x1,y1, x2,y2, x3,y3);
Example: In a display window 200 x 200, draw a triangle with points at (25,45), (150, 60) & (50, 175)
rect():
To draw a rectangle, use the built-in function rect(), passing it 4 parameters: the coordinates of the upper left corner, the height and width.
General Format:
rect(x,y,width, height);
Example: In a display window 200 x 200, draw a rectangle starting at (25,25) with a height of 100 and width of 75.
To draw a rectangle, use the built-in function rect(), passing it 4 parameters: the coordinates of the upper left corner, the height and width.
General Format:
rect(x,y,width, height);
Example: In a display window 200 x 200, draw a rectangle starting at (25,25) with a height of 100 and width of 75.
ellipse():
To draw a circle or ellipse, use the ellipse built-in function passing it 4 parameters: the coordinates of the centre point, the height and width.
General Format:
ellipse(x,y,width, height);
Example: Draw an ellipse in a display window 300 x 300 with the centre at (150, 150), a height of 100 and width of 200
To draw a circle or ellipse, use the ellipse built-in function passing it 4 parameters: the coordinates of the centre point, the height and width.
General Format:
ellipse(x,y,width, height);
Example: Draw an ellipse in a display window 300 x 300 with the centre at (150, 150), a height of 100 and width of 200
quad()
To draw any other quadrilateral (4 sided shape), use the quad() function passing 8 parameters, the coordinates of the 4 points that define the quadrilateral.
General Format:
quad(x1, y1, x2, y2, x3, y3, x4, y4);
Example: In a display window 400 x 400 draw a 4-sided shape containing the following points (20, 15), (300, 20), (325, 300), ( 40, 250)
To draw any other quadrilateral (4 sided shape), use the quad() function passing 8 parameters, the coordinates of the 4 points that define the quadrilateral.
General Format:
quad(x1, y1, x2, y2, x3, y3, x4, y4);
Example: In a display window 400 x 400 draw a 4-sided shape containing the following points (20, 15), (300, 20), (325, 300), ( 40, 250)
rotate():
To rotate any shape in 2D space, use the rotate function with 1 parameter: the angle of the rotation in radians. This function should be before the shape it affects. The rotation is clockwise around its relative position to the origin.
General Format:
rotate(angle);
Example: In a display window 300 x 300, draw a square starting at point (75, 25), a width and height of 140 but rotated PI/4 (Pi divided by 4) radians.
To rotate any shape in 2D space, use the rotate function with 1 parameter: the angle of the rotation in radians. This function should be before the shape it affects. The rotation is clockwise around its relative position to the origin.
General Format:
rotate(angle);
Example: In a display window 300 x 300, draw a square starting at point (75, 25), a width and height of 140 but rotated PI/4 (Pi divided by 4) radians.
Building a Compound Image
To create a compound image, we can as many shapes to our sketch as we like. They are drawn in the order they are given within the program.
Example: Create a sketch with 3 circles, with the centre point at the centre of display window (use variables) with widths of 40, 60, & 80 respectively. The display window should be 200 x 200.
To create a compound image, we can as many shapes to our sketch as we like. They are drawn in the order they are given within the program.
Example: Create a sketch with 3 circles, with the centre point at the centre of display window (use variables) with widths of 40, 60, & 80 respectively. The display window should be 200 x 200.
Check for Understanding: Complete this before starting the exercise.
Insert Canva quiz here
Insert Canva quiz here
Basic Shapes Exercise:
Create a sketch that draws a picture of a house. Save your sketch as house.pde. Use at lease 4 shapes in your design. Complete this exercise before moving to the next lesson.
Create a sketch that draws a picture of a house. Save your sketch as house.pde. Use at lease 4 shapes in your design. Complete this exercise before moving to the next lesson.