In this article we will introduce very important concepts widely used in our JavaScript lessons as well as in computing in general:
• Pixels
• Resolution
• Coordinates
Don’t be intimidated by these funny words. The concepts behind are very simple.
Print the article. This step is optional but highly recommended. By following the exercises from the printed copy, you’ll be forced to use your keyboard to type the programs yourself. This will greatly improve your coding skills!
Start Code Editor
Let’s start by opening the code editor as explained in the previous article. If you forgot the link it is: codeguppy.com
Once you log in, click the “CODE NOW” button in the big area at the top of the main page.
Alternatively, you can open the editor directly by going to https://codeguppy.com/code.html
Pixels
With the editor in front of you, look on the right side of the screen. That’s your output area also called the “canvas”.
Although it looks at this moment like a big white surface, the canvas is made up of many small dots that you can turn black or white or even color them through the code. These dots are called pixels.
In a sense the canvas is like a graph paper (grid paper), with each grid paper square being a tiny pixel on the canvas.
Resolution
In CodeGuppy the canvas is 800 pixels wide and 600 pixels high.
This means we have 800 x 600 = 480,000 total pixels on the canvas. That’s way more than the number of squares on a typical grid paper.
We refer to these numbers as the resolution of the canvas.
Note: You probably heard the term resolution before in similar contexts. For instance, a typical HD TV screen has a resolution of 1920x1080, while a 4K TV has 3840x210 (4 times as much pixels as regular HD TV). Similarly, a laptops and tablets have various resolutions such as 1024x768, 1920x1080, etc.
Coordinates
When we draw a shape or character in CodeGuppy we need to specify where we want to draw it. Do we want to appear in the middle of the screen or a little bit to the left or right?
We specify this position by “coordinates”.
Since the canvas is a flat surface we need to use just 2 numbers as coordinates: one for horizontal and one for the vertical:
As in many other computer bases systems, CodeGuppy considers the first pixel as being the one in the upper-left corner. This pixel has coordinates (0, 0).
Note: The first pixel on each direction is pixel “0” not “1”. The second pixel is “1”, the third one “2” and so on. That means that the last pixel that you can address on a given direction is 1 less than the dimension of the canvas on that direction.
- Horizontal: 0 – 799 (800 pixels in total on horizontal)
- Vertical: 0 – 599 (600 pixels in total on vertical)
Note: Even complex shapes such as circles are drawn on the canvas by setting the appropriate pixels (the circle instruction in this case is doing this automatically):
Playing with coordinates
Enough theory! Let’s use some code to turn on some pixels.
Carefully type the following program in the code editor. Do not change or forget anything!
point(0, 0)
point(799, 0)
point(0, 599)
point(799, 599)
Can you tell without hitting “Play” what this code is supposed to do?
Will give you a hint: The point instruction is putting a single point on the canvas at the specified coordinates. The first number is the coordinate on horizontal (also called x) and the second number the coordinate on vertical (y).
Enough guessing! Now run the code (click “Play” button) and look closely in the corners of the canvas to see the pixels. They are small!
Let’s extend the program to set one more pixel. Go with the cursor at the end of the code and type in addition the following instruction:
point(400, 300)
Since the canvas resolution is 800x600, the middle of the canvas is approximately at coordinates (400, 300). Therefore, the previous instruction should add one more point in the center of the canvas.
Run the program and observe the effect.
If you got an error, you probably have a mistake. We’re including below the entire program that you should have in the code editor. Check carefully each line to spot the error.
Reminder: we’ve also took the opportunity to comment out the code so we can better remember what it does in the future. If you want you can comment your code too.
// Corner points
point(0, 0)
point(799, 0)
point(0, 599)
point(799, 599)
// Center point
point( 400, 300 )
Revisiting circle
Is time now to revisit the circle instruction that we used in the first article:
circle(400, 300, 100)
Let’s better understand the parameters of this instruction:
- The first 2 parameters are the coordinates of the center of the circle. 400 = the coordinate on horizontal, 300 the coordinate on vertical. As we saw (400, 300) is also the middle of the canvas, that’s why our circle appeared in the middle of the canvas.
- The third parameter is the radius of the circle. The radius is also expressed in pixels
Extending the toolbox
You have now in your toolbox two instructions that you can use to draw shapes on the canvas: point and circle.
Let’s extend this toolbox with two more instructions that you can use to draw a straight lines and rectangles.
Drawing lines
The instruction to draw a line is simply called “line” and takes 4 parameters: the x and y coordinates for each end of the line. By specifying the coordinates of each end you can draw a line between any two pixels on the canvas:
Example:
line(250, 100, 550, 100)
line(250, 500, 550, 500)
Drawing rectangles
The instruction for drawing rectangles is called “rect”. The first two parameters specify the coordinates of the top-left corner, while the other two parameters, specify the width and height of the rectangle.
Example:
rect(250, 200, 300, 200)
Let’s quickly combine these instructions in a simple program to see their effect. Start first a new program and then type these lines:
line(250, 100, 550, 100);
line(250, 500, 550, 500);
rect(250, 200, 300, 200);
Run the code to see the effect. Can you now change the coordinates of the lines so are displayed on vertical rather than horizontal?
Fun drawing
Let’s draw with code!
We'll use the instructions in our toolbox: line, rect and circle to draw a house on the canvas!
Planning the drawing
On a blank piece of paper draw a big rectangle. That’s your canvas. Inside the rectangle, try to reproduce the following house using only straight lines and circles.
Next identify what will be the coordinates for each line, rectangle and circle… (approximations are fine)
Take your time! Take notes and even draft the program on the paper. By doing this exercise you’ll improve your understanding about coordinates.
Coding the house
When you're done with paper design you can start typing the code in the code editor.
As soon as you typed your first instruction, hit 'Play' to check the effect. Adjust coordinates if necessary. Continue in this way until you finished your entire drawing.
Remember: If you realized a master-piece and you want to keep it, hit the 'Save' button in the upper-right corner.
Our version
We strongly recommend you practice coding and try building the program that draws the house. Practicing is essential in coding!
However, if after 1 hour of hard work you still don’t have a house, is time to check our code below:
// House
// Draw walls
rect(250, 250, 300, 300);
// Draw roof
line(250, 250, 400, 100);
line(400, 100, 550, 250);
circle(400, 195, 30);
// Draw chimney
line(480, 180, 480, 120);
line(480, 120, 500, 120);
line(500, 120, 500, 200);
// Draw left window
rect(275, 275, 100, 100);
line(275, 325, 375, 325);
line(325, 275, 325, 375);
// Draw right window
rect(425, 275, 100, 100);
line(425, 325, 525, 325);
line(475, 275, 475, 375);
// Draw door
rect(350, 425, 100, 125);
// Draw smoke
circle(520, 110, 10);
circle(550, 90, 15);
circle(600, 60, 25);
This is our code to draw the house. Compare it with your code and then with the original sketch.
We did also a lot of approximations when we came up with the coordinates.
If you are not tired already, try to type the code in a new CodeGuppy program.
Note: Although this long program may tempt you to copy and paste it from this article, we strongly recommend you type the program using your keyboard. It will better help you remember the commands and also practice coding.
Conclusion
We hope you liked this article about pixels, resolution and coordinates.
With this knowledge, you can now master the art of drawing with code. Can you take as a challenge to:
• draw a car?
• draw a stick person?
• draw your name with lines?
Have fun and please share your masterpieces in the comments of this article. Yes – that’s right: you can share your programs with anyone by providing the link to that program. Please use the “Share” button in CodeGuppy to obtain the link.
Note: This article is also available as an interactive tutorial at https://codeguppy.com/code.html?t=_coordinates
Until next time: Happy Coding!
Top comments (1)
Cover image is wrong, but still, nice post!