November first Post

This week, I worked on learning the materials surrounding how to create different forms of shapes from the p5.js guide book.

First, I learnt that the createCanvas() function contains two parameters: one for setting the width of the drawing canvas, and the second for the height. Then, I created a single pixel using the point() function with the same coordinate position.

Next, I learned how to code a line and basic shapes - In order to draw a single line, four parameters are needed: two for the starting location and two for the ending position. Multiple lines can be formed together to create a larger form of shape. Below are some functions to draw basic shapes:

line(x1, y2, x2, y2)

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

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

rect(x, y, width, height) - x, y is at upper left corner

ellipse(x, y, width, height) - x, y is in the center

arc(x, y, width, height, start, stop) - angles to start and stop the arc are set in radians rather than degrees. Common radian values:

PI - 180°

QUARTER_PI - 45°

HALF_PI - 90°

TWO_PI - 360°

For shapes that have more than one coordinate, the order of them is clockwise on the circumference of the shape.

p5.js don't have functions dedicated to create circles and squares, instead, we could use the same values for functions ellipse() and rect() to create them.

I learnt that objects can be drawn partially or entirely out of the canvas without an error.

Here, the x, y coordinates of the larger ellipse is outside of the canvas, but the code is still valid.