Let's review what we learned today! #

Coordinates #

In p5, the position and scale of our drawings are determined by the numbers the numbers we provide to our drawing commands.

X and Y #

In class we learned about how to place shapes in the canvas using X/Y coordinates. In the default p5 canvas, the origin point (0,0) of our sketches is in the top left side of our canvas. As we increase the X value of our draw commands, the placement of our draw calls moves to the right. And as we increase the Y value of our draw commands, the placement of our shapes moves down the canvas

Try putting an ellipse at the center of the canvas in the example above. what would those values be?

width and height #

Shapes #

In class, we covered a few of the shapes that we can draw with p5. This is only a small sample of the many shapes we can make, but as you explore more of the available draw commands you'll notice that they follow a similar pattern of arguments. Try playing around with some of the other 2D primitives or Curves from the p5 Reference Page and see how they compare to the shapes we've already learned.

ellipse(x,y,w,h) #

rect(x,y,w,h) #

arc(x,y,w,h) #

With the arc command, we have a couple other variables to consider; the start and stop angle. The start angle is the point on the unit circle that the arc starts, and the end angle is where it terminates. Since a circle has a circumference of 2PI, then we can use the arc command to draw a circle starting at 0 and ending at 2PI.

It might be worth reviewing the unit circle you learned back in middle school for this too. Keep in mind though that because the Y axis increases as we go down in p5, the unit circle below has an inverted Y from what we're using.

line(x1,y1,x2,y2) #

Like the arc command, the line command needs to know where its starting and stopping. x1 and y1 inform the starting point, while x2 and y2 inform the end point.

Color #

By default, color is written in a Red-Green-Blue (RGB) format. This is because the pixels of your screen are comprised of red, green, and blue sub-pixels. In this way, we can directly manage

fill(r,g,b) #

Using the fill command will change what color each shape is filled in with. Because the code that we write is read from top to bottom, we need to assign our fill value before the shape that we want to draw.

Keep in mind that we're mixing our colors using the red, green, and blue color channels of light. By adding different amounts of these three colors together, we can make any color. In the example below, how might we change the fill arguments so that a shape is cyan, magenta, or yellow (the primary colors of pigment)?

stroke(r,g,b) #

The stroke command works a lot like the fill command, just for the stroke of the shapes or lines that we're going to draw. As with fill, we need to write a stroke command each time we want to change color before the shape/line. We can also set the thickness of the stroke with strokeWeight, or omit a stroke altogether with noStroke.