The Drawing Coordinate System
Before we begin talking about all the commands to actually draw shapes, we need to take a moment to first understand the screen coordinates on our sketch. When we first begin programming, we will specify the width and height of our sketch in pixels. A pixel just represents a single dot of colour on the screen. So if we specify that we want a sketch that is 800 pixels width and 600 pixels high, it means we have 800 columns of dots (this is your x amount) and 600 rows of dots (this is your y amount). This gives us 480,000 pixel we can colour in! So when the computer draws a shape, it is really just filling in some of these tiny little dots with a colour but leaving other ones blank. The image on the right hand side (Sonic the Hedgehog) shows what a picture might really look like if you could zoom in to look at the pixels.
Now, to draw a shape, we will have to determine where to start drawing the shape. In this case, we have to determine an x and y value. I know what you are thinking, "Mr. Lamont, I passed my grade 8 math class! I know how to place a point if you give me the x and y coordinates.". I'm not saying that you didn't pass your grade 9 class but the issue is, computers are a little different. In math, we teach you guys that the origin (0,0) is at the bottom left hand corner of your graph paper or at the center of the axis we draw, and that the y axis points up to the sky. While this is fine for math class, computers behave a little differently. Instead, the origin for a computer is in the top left corner of the screen and the y-axis points downwards. While this is confusing at first, you will adapt to it very quickly. Its does have its little quirks later on though. We will deal with those when we get to them!