M1D22: ITP1 Week 1

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);
}