Lesson 1.3

The Basics of Drawing

Watch: Basics of drawing - p5.js Tutorial

Video for 1.3:

To draw we need a canvas

How can we draw on the canvas?

How can we change the color of the point?

How can we add text to the canvas?

How can we make our own webpage with a canvas?

Example 1.3.1: Make a sketch that shows 3 points shown on the canvas to make sense of the coordinate system

Example 1.3.1

Example 1.3.2: Draw a red square with the upper left hand corner at (200,200) that has a width and height of 100 pixels.

Example 1.3.2

Exercise 1.3a: Use the arc() function to draw the following

Exercise 1.3a

Exercise 1.3b: Use the arc() function to draw the following

Exercise 1.3b

Exercise 1.3c: Use the arc() function to draw the following

Exercise 1.3c

Exercise 1.3d: Make a few shapes using the vertex function.

Exercise 1.3d