Hello 🌎

Try dragging the Learning Target.

This is p5. It allows you to create interactive “sketches” using HTML/CSS and JavaScript.

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound.

p5 works on a canvas.

Everything you “draw” will be drawn on this canvas, pixels on a screen.

Here’s one for you to play with:

IDE

We’re going to use an online IDE (Integrated Development Environment). We used PyCharm for Python, and we will use p5 Web Editor for, well…p5.

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.

Go draw something better!

Exit Slip!

1. What happens if you change the numbers on line 6: rect(50,50,80,50);?
2. How could you draw a square?
3. What is the algorithm that p5 uses to draw rectangles?
4. How do you write a comment in p5?