Experiment with how changing the values of the four arguments in rect() and ellipse() impacts your shapes.
(0, 0) is located at the top left corner of the canvas.
The positive x axis points to the right.
The positive y axis points down.
Within each rect() and ellipse() there are four arguments.
rect(1, 2, 3, 4);
ellipse(1, 2, 3, 4);
These numbers determine the position and size of the shape:
1 = X Position
2 = Y Position
3 = Width of the shape
4 = Height of the shape
Final Syntax:
rect(X, Y, Width, Height);
ellipse(X, Y, Width, Height)
In the command createCanvas() the first argument is the width, or x size, of the canvas and the second argument is the height, or y size, of the canvas.
Divide the width and height of the canvas by 2 to find the center of the canvas.
rect() describes the position of the upper left corner of the rectangle.
ellipse() describes the position of the center of the ellipse.
Coordinate System - is a method for identifying positions on a series of axis.
X Axis - horizontal axis of a system of coordinates. In CodePen, 0x is the left of the screen.
Y Axis - vertical axis of a system of coordinates. In CodePen, 0y is the top of the screen.
Documentation for the command in Processing that draws a rectangle.
Documentation on the command in Processing that allows the programmer to draw objects in a new color.
Documentation on the command in Processing that draws an oval.