P5.js

pixel – tiny dots on the computer arranged in a grid

In p5.js, we need to create a canvas to draw to

```
createCanvas (500,400);
//500 is the width, and 400 is the height
```

We always start with the `x`

coordinate and then the `y`

coordinate. It’s called *Cartesian coordinate system* in Mathematics.

```
//rect(x, y, width, height);
rect(100, 100, 200, 200);
//something I need to note here, as the figure complete the rotation (or shape) the upper line or border now starts 1 px before the starting point. That extra 1 px is the end point.
rect(5, 5, 300, 300);
// this code gives me this figure:
```

The command is `rect`

for rectangle, but because my shape size is 300 by 300, it displays a square. Then the first value is the x coordinate which is the distance from the left, and the second value is the y coordinate, which is the distance from the top.

This canvas has a size of 500 x 500.

`createCanvas(500,500);`

To create a square in the middle, I should start at 125 x and y coordinates, with a size of half the canvas 250 x 250.

`rect(125, 125, 250, 250);`

Now, how would I make a rectangle in the perfect center?

The size of the canvas is 500px. I can make a 300px width rectangle, which I would start at 100 x coordinate. Then if I set the height to 200px, remaining is 300px from the size of the canvas, and the center is 150 y coordinate.

`rect(100, 150, 300, 200);`

There are two functions as the basic template:

```
function setup()
{
createCanvas(500,500);
}
function draw()
{
rect(100,100,100,100);
rect(250,100,100,100);
}
```