Coordinate Systems in Computers

In this unit we will look at different coordinate systems and explain their similarities and differences.

The Cartesian Coordinate System

Hopefully you are familiar with the standard cartesian coordinate system from geometry class. Two major axes cross at right angles. Each axis is essentially a number line going from -∞ to and crossing at their respective zeros. In this way we can define any point on this infinite plane as the combination of two values, one in the x direction (horizontal) and one in the y direction (vertical)

mathinsight.org/cartesian_coordinates

In the example above the point which is 3 steps in the x direction and 5 steps in the y direction can be written as (3,5).

Additionally, the infinite cartesian plane is broke up into 4 quadrants. The first quadrant is the top left quarter where both x and y are positive. Moving counter-clockwise to the second quadrant all x values are negative and y values are positive, and so on.

http://muchobene.com/7-math-quadrants/

One more point to keep in mind is that the units in the cartesian coordinate system are unit-less by convention. That is, the numbers on the number lines don’t necessarily correspond to a particular measurement. Many times when we are plotting data as a graph we will associate each axis with a unit so that the visual representation has more meaning. e.g. time in seconds could be represented on the x-axis and speed in miles/hr could be represented on the y-axis. But, again, this is necessarily true.

Computer Graphics Coordinate System

Computers also use a coordinate system when displaying graphics. This system shares many things in common with the cartesian system but is different in certain, very important ways.

The pixel

To begin, it is hopefully easy to imagine that the computer screen can be divided into a number of smaller squares like a piece of graph paper. But how small are each grid? The fundamental unit of a computer screen is the pixel, a tiny square on the screen that can’t be subdivided1. This means, that for the purpose of computer graphics, all coordinate are of the unit pixel. e.g. a shape that is 50 x 25 is 50 px wide x 25 px tall.

[1] Technically each pixel is made up of 3 sub pixels, one red, one green and one blue. We will discuss this further elsewhere in the class.

Computer Quadrants

The other major difference when it comes to computer graphics is that the coordinate quadrants are mirrored along the x-axis. That means that the first quadrant where x and y are positive is in the bottom right. A better way to think about this is to imagine that the point (0,0) is in the top left corner of your screen.

https://learn365project.com/2015/08/01/why-do-computer-coordinates-start-from-the-upper-left-corner/

Circles

This means that if we want to draw a circle that is 100px in diameter in the middle of the screen that is 400px x 200px we would have to draw its center at (200,100) which is 200px from the left side of the screen and 100px from the top of the screen.

Lines

If we want to draw a line we need to define two points, one at either end of the line. A horizontal line with a length of 100px might have a first point (0,0) and a second point at (100, 0). A vertical line with length 50 might have two points (0,0) and (0,100). We could also define lines that are diagonal with the points (0,0) and (100,100)

Comprehension Check

Assignment

Read through these two tutorials on creating elliptical perspective on Bill Martin’s Guide to Drawing

http://guidetodrawing.com/site/assets/files/1027/gtd-190.jpg

  • To start, using ellipses and lines, try to recreate the image from Bill’s tutorial on elliptical perspective
  • Now can you change the perspective and redraw that image?
  • Next try to recreate one of the drawings from the major and minor axes tutorial.
  • Using graph paper, redraw the second and third drawing.

Using only circles and lines make a picture on graph paper. Using the computer coordinate system, for each line, mark the start and end point coordinates. For each circle, mark the center point and the diameter. (I’d suggest keeping the coordinates to integers only) You must have at least 3 circles and 3 lines. One easy shape to make would be a snowman, but I’ll leave that up to you.

Attached is a template that already is laid out with computer coordinates. You may either print out the template and draw by hand with a ruler and a compass or you may use an online markup program such as notability or xodo. If you choose to print the template, you must turn in a picture of your work. If you do it digitally, submit a pdf or image.

Link to Google Classroom Assignment