We can referee to graph bars from our middle school to identify the way computers think when making lines draws and shapes. los of the time computers read shapes locations from left to right (x) up and down (y)
in this example we can see a canvas with a size of 400 high and 400 wide. Also we have a circular shape that has 3 variables the first is the horizontal movement (x) and the second the vertical (y) while the third child be the sizing of the shape.
We have plenty of codes that can form different shapes but not all of them have the same number of variables some has up to six like the triangles. you can also see references and samples by clicking this link. https://p5js.org/reference/
one off the interesting activities that you can do is interactive shapes that can move, rotate and change colors, this is a example of a well organize code that will bring circle shapes to live instead of just stay still. organizing your codes are very important for the functionality of the shapes, if there is a missing comma or a misplace function will damage the whole structure of your design.