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);
}
Leave a Reply