Workbook 2, Page 6: Where did I draw?

There is one detail we glossed over: with either Canvas or SVG, we referred to positions (such as the center of a circle, or corner of a rectangle) using two numbers. What do these mean?

Notice that they don't always mean the same thing: here are two SVG elements, each with a circle at position (30,30). Look in the HTML - you'll see the exact same line is repeated twice - yet the two circles aren't in the same place (you can see both of them on the page)

It should be obvious that we interpret position x=30, y=30 differently in each one.

For SVG and Canvas, we interpret coordinates (x,y pairs) as follows:

These three parts (where is the origin, how to interpret x, how to interpret y) are critical - if we don't know them, we cannot interpret x,y numbers as places to draw! Even the official Canvas drawing tutorial starts with this!

We call this information about how to interpret coordinates a coordinate system. The official tutorial uses the term "coordinate space". A key idea in computer graphics is that we need to understand coordinate systems and always try to work in a convenient coordinate system. For example, when drawing, having a coordinate system relative to the current element we're drawing in is very convenient. Having to talk about things relative to the position on the screen would be inconvenient (we'd have to move everything if the page was scrolled or the window was moved).

We can see an example of inconsistent coordinate systems when we handled the mouse on page 4. Mouse coordinates are given relative to the window. We need to convert those coordinates to the Canvas by figuring out where the canvas is in the window!

Next week, we will see how to work with coordinate systems mathematically. The trick will be to use matrices to represent coordinate systems, which requires us to use vector algebra. To make sure you're ready for that, please read up on some vector algebra basics (it should be a review from your math classes).



You may have noticed from this week's assignment that we will be doing non-trivial JavaScript programming. If you feel like you need to accelerate your learning, see the Javascript and 559 page, specifically the "Advice on Learning JavaScript" section.


This is the last page of the workbook, but you still must look at the file. And don't forget to edit the and to commit and push all your work!