Triangle

By now you have gotten the hang of drawing simple shapes to the screen, and the triangle() is like what we have seen before. A triangle consists of three lines if you think about it. The function takes 6 values. You can think of the first four as the first line, like the line() function. The last two values are a new line from the end of the first line. The last line is between the end of the second line and start of the first line. Lets create a some triangles:

triangle(200, 100, 100, 300, 300, 300);
triangle(200, 120, 120, 290, 280, 290);
triangle(200, 160, 160, 240, 240, 240);
triangle(200, 180, 160, 240, 240, 240);
triangle(200, 200, 160, 240, 240, 240);
triangle(200, 220, 160, 240, 240, 240);
triangle(200, 240, 160, 240, 240, 240);
triangle(200, 280, 160, 240, 240, 240);

This is the result:

P5js has some other ways of drawing simple shapes. The rect() and the quad() function work in the same way as the functions we have seen so far. You should explore these two on your own, and learn how to draw them on screen.

Exercise 4

Try to recreate the image below. Don't worry if you don't get the exact same result. We are just starting out, and some of the exercise might be a bit har at first. Just try your best, and then look at the solutions I've provided.

(Hint: the frame is a rect() function that almost covers the entire canvas, leaving a little bit of the background on each side.)