Drawing Shapes with p5

p5 Editor

You can write p5 anywhere your can write HTML/CSS/JS. You can use Codepen, if you want.

I recommend using the p5 Web Editor.

Fun With Shapes

Today, we’re going to learn how to draw three shapes: lines, rectangles, and ellipses.

(Also, point, but that one’s kind boring.

Go ahead and try it. Turn on a single pixel:

point(42,42)

| line()

A line is defined by two points: A and B In p5: line(x1, y1, x2, y2);

✱ lower case ‘line’
✱ four parameters in parenthesis, separated by commas
✱ lines end with semicolon ;, just like JavaScript.

Try to draw a line at an angle that isn’t 90° or 180° (not vertical or horizontal).

▭ rect()

In p5, rectangles are defined by the top left corner, followed by a width and a height.

rect(x, y, width, height);

✱ lower case ‘rect’
✱ four ‘parameters’ in parenthesis
✱ lines end with semicolon ;, just like JavaScript.

You can also define them using corners: the top left and bottom right point.

rectMode(CORNERS);
// What happens if you put rectMode(CORNERS) on line 2?
rect(x1, y1, x2, y2);
Two lines of code

⬭ ellipse()

An ellipse is an oval. For the purposes of this class (before you’ve studied conic sections), all we need to know is that a circle is actually a special kind of ellipse, and ellipse() is the command that will let us draw round shapes.

In p5, ellipses are defined by a center coordinate, a width, a height.

ellipse(x, y, width, height)

Use this to make a circle. In a comment (//), what do you notice about the width and height that make a circle?

Drawing time!

What if I combine lines, rectangles, and ellipses? What can I make?

OK, I’m not a great artist. But we’re getting somewhere.

Use the graph paper on page 3 of your packet to plot a drawing, and begin making it in p5✱.

Good luck!

Exit Slip

If my canvas is 300px wide and 200px tall, write p5 code to draw a square at the CENTER of the canvas.