Watch: Basics of drawing - p5.js Tutorial
To draw we need a canvas
- We create a canvas by calling a function named createCanvas().
- Calling a function is like giving a command.
- The function createCanvas() has two parameters, a width and a height.
- Function parameters are the names listed in the function's definition.
- When you call the function you need to include a value for each of those names.
- For example, createCanvas(400,400), calls the function and passes two values to the function.
- Function arguments are the real values passed to the function.
- Look up the function in the p5*js reference to understand it better.
- Find createCanvas under Reference->Rendering.
- Note that createCanvas() is a function that creates a particular html element – a canvas. Later we will create other html elements in a similar way.
How can we draw on the canvas?
- To draw on the canvas we need to call other functions.
- Find shapes on the p5*js website under Reference > Shape
- We will start by making a point.
- It has two parameters, so when you call it you need to pass 2 arguments to it, a number for the x coordinate, and a second number for the y coordinate.
- In the example shown, change the location of the first point to (0,0).
How can we change the color of the point?
- Note in the description it states that the color is determined by the current stroke.
- Stroke is another function. You can find the reference to it under Reference > Color
- The are various arguments that you can pass to the function to determine the color. We will start by simply passing a name like red.
- Return to the point reference and color the points red.
How can we add text to the canvas?
- We add text by calling the function text().
- You can find the reference to it under Reference > Typography
- Look at the reference to the text() function.
- Note that the outline of the text is colored with the stroke() function, and the inside with the fill() function.
- Return to the point reference and add text to indicate the location of the points shown in the example.
- Make the outline of the text red and the inside white.
How can we make our own webpage with a canvas?
- Create a folder with your initials - for example, AB.
- The teacher will provide you with a file named p5.js. Place that in the folder.
- Inside that folder, create another folder named chapter1.
- Inside chapter1, create two plain text files, example_1.3.1.html, and example_1.3.1.js.
- Your folders and files should be organized as shown below.
- In class we will go over how to make those files render a 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.2: Draw a red square with the upper left hand corner at (200,200) that has a width and height of 100 pixels.
Exercise 1.3a: Use the arc() function to draw the following
Exercise 1.3b: Use the arc() function to draw the following
Exercise 1.3c: Use the arc() function to draw the following
Exercise 1.3d: Make a few shapes using the vertex function.