# 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: `line`s, `rect`angles, and `ellipse`s.

(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 `line`s, `rect`angles, and `ellipse`s? 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?