51
\$\begingroup\$

From what I've seen almost all things use coordinates where (0, 0) is at the top left and the positive Y-axis goes in the downwards direction of your screen.

Why is it like this? Why not the conventional positive Y-axis going upwards like shown in graphs in simple math classes?

\$\endgroup\$
1

7 Answers 7

55
\$\begingroup\$

This is caused in the history. Early computers had Cathode Ray Tubes (CRTs) which "draw" the image with a cathode ray from the upper left corner to the lower right.

To ease the interface between the graphics card memory and the CRT the memory was read from the beginning and the image was drawn from the top left (with the lowest memory address) to the lower right (with the highest memory address).

Extension (based on the comments)

The CRTs are based on analog TV sets that were available at that time.

The TV sets create the image line by line first from left to right and then from top to bottom. The reason for this can only be assumed to be based on the writing style in western contries.

\$\endgroup\$
0
7
\$\begingroup\$

This is a great question that I've thought of many times. The simple answer to "why" is because TV formats also drew their lines from left-to-right then top-to-bottom. Original computer monitors were CRT screens (small TVs), so the format naturally stayed the same. When monitors became flat screens (and TVs became flat screens too), it was equally natural to keep the same format for easy compatibility.

Of course you can then ask: why do TVs draw this way? They were invented in the early 20th century so you can imagine how much thought or lack thereof went into the design, if it was even questioned. Note: not meant to be disrespectful as it is incredibly more challenging to get equations for magnetically deflecting rays to the proper lines on a screen, as opposed to a simple matrix of tiny "light bulbs". (This kinda brings up the question of how on Earth did they invent CRTs before the simple matrix of dots, way back in the early 20th century?)

Nevertheless, my guess is that probably it was never questioned (a bad thing) since the Western languages write words left-to-right and top-to-bottom. Probably no one conceived of the possibility of doing it differently.

Personally, I dislike this format. I gained this attitude as I programmed games and other simulations involving elliptical orbits. Whenever you look up drawing equations involving sin, cos, or tan, you have to carefully invert the signs that deal with the y-axis parameters...or you will get the wrong thing drawn. An example would be the parametric equations for an ellipse drawn at any 2D angle. It can be a real nightmare dissecting the sinsin, sincos, and similar things.

Succinctly speaking in mathematical terms, the screen is in Quadrant 4 instead of Quadrant 1. This is unnecessarily complicated.

BTW when you get to 3 dimensions, the z axis is considered to go "upwards" in the positive direction. Kinda ironic. [EDIT]: Maybe not, see my comment below.

2 more things I realized/came across:

Sundials in the northern hemisphere (that have north-facing pointers and disks parallel to the ground) always rotate clockwise. So if we put the zero hour at the top of the "clock face", then the shadow pointer starts moving to the right. This could be the origin of left-to-right direction in western languages, propagating down to Cartesian coordinates and TV/computer screens.

Old computers did not draw graphical objects so much. They drew text in a command prompt. So it is natural to put line 0 at y=0. If we had a bottom-left origin, the math of drawing textlines would be a bit more involved, and it could've been a big deal to those old slow computers (who even made a shortcut for incrementing by 1, for goodness sakes, called "++"). Plus you need to know the resolution of the screen, whereas if you just do line 0 at y=0, you don't need to know the resolution.

\$\endgroup\$
1
  • \$\begingroup\$ I suspect they invested CRT first because it was hard to make light bulbs that small back then. Have to be tiny to see them as a picture, not dots. \$\endgroup\$
    – mczarnek
    Commented Aug 29, 2020 at 16:06
5
\$\begingroup\$

Addendum: Early graphics were done on vector monitors, just one step up from the oscilloscopes seen in the lab where (0,0) would be in the exact middle of the screen, subject to some knob turning to set X/Y scale, X/Y offset, and possibly X/Y inversion.

The dedicated hardware of Atari "Asteroids" (1979) for example used a vector screen; it would be interesting to know what it thought its program coordinate system was.

Ivan Sutherland's "Sketchpad" system (1963) was based on a TX-2 vector display, and in "Sketchpad: A Man-Machine Graphical Communication System" (PhD thesis, January 1963), he writes on page 70ff:

The coordinate system of the TX-2 display system has origin at the center of the scope and requires ten bits of deflection information located at the left of 18 bit computer subwords for each axis.

...

For convenience in representing many component variables and for more than 18 bit precision, Sketchpad uses an internal coordinate system for drawing representation divorced from the representation required by the display system. This internal system is called the "page" coordinate system. In thinking of the drawings in Sketchpad, the page coordinates are considered as fixed. A page to scope transformation gives the ability to view on the scope any portion of the page desired, at any degree of magnification, as if through a magnifying glass (...) A scale factor for the display controls the size of the square which will appear on the scope. The actual number saved is the half-length of the side of the square, called SCSZ for SCope SiZe) as shown in Figure 5.2. Also saved are the page coordinates of the center of the scope square. By changing these numbers the portion of the page shown on the scope may be changed in size and moved, but not rotated.

Diagram 5.2 on page 73 shows that the "page coordinate system" uses the mathematical convention of the X/Y cartesian coordinate system. (One might ask why that convention is the way it is...)

\$\endgroup\$
1
  • \$\begingroup\$ but: vector screens were only used because memory was too rare to represent a whole displayable image and vector lists + presentation duration + connections needs much less memory (like polygons vs. voxels) \$\endgroup\$
    – Micka
    Commented Jul 28, 2018 at 7:28
3
\$\begingroup\$

Not everything is top-left.

OpenGL, for example, specifies that the origin is at bottom-left, and this is pervasive throughout the API: texture coordinates, viewports, texel rectangles, the standard ortho projection: it's bottom-left all the way.

There is a difference in thinking here.

On computer screens, as with books, when people read (and I'm assuming a language like English here) they read from left-to-right and top-to-bottom. You did it yourself when you wrote this question and you're doing it when you're reading answers to it.

In mathematics and design when you plot a graph, you have an X and a Y axis with positive X going left and positive Y going up.

If you're building something like a 2D GUI in a game it can be easier and more intuitive to many people to lay it out in a "top-left is the origin" manner.

If you're building something to mimic a design or layout on graph paper it can be easier and more intuitive to many people to lay it out in a "bottom-left is the origin" manner.

In fact both of these are quite informal conventions, and if you're setting up an ortho projection you can actually choose to have your origin at any arbitrary point on (or off) the screen, with positive X going either left or right and positive Y going either up or down. It's just a matter of adjusting your projection matrix accordingly.

The only important thing is therefore to choose which convention you're going to use and use it consistently.

\$\endgroup\$
1
  • \$\begingroup\$ Exactly. In the Glide API you could specify the y origin for all operations with the grSstOrigin() function. grSstOrigin(GR_ORIGIN_UPPER_LEFT) means y increases from top to bottom. And grSstOrigin(GR_ORIGIN_LOWER_LEFT) means y increases from bottom to top. \$\endgroup\$
    – Coder
    Commented Jan 4 at 2:46
0
\$\begingroup\$

None of the above answers reflect the reality of early image rendering on an teletype. The 'bottom' of a vector drawn was printed first - i.e at the (final) bottom of the page. Removing the page after printout showed the image correctly displayed. Later slavish inversion of Y (in most applications) is nothing more than an annoyance, as today we have image, rather than teletype rendering. I'm constantly annoyed at having to invert Y when using modern applications - why don't folks just wise up?

\$\endgroup\$
0
\$\begingroup\$

An argument FOR: (By Example)

var R uint32 = 0xFF0000FF; //:Red pixel
var W uint32 = 0xFFFFFFFF; //:White Pixel.
var Pixels []uint32 = { 
W,W,W,R,R,W,W,W,
W,W,R,R,R,R,W,W,
W,R,R,R,R,R,R,W,
W,W,W,R,R,W,W,W,   //:8x8 pixel image of " ↑ "
W,W,W,R,R,W,W,W,
W,W,W,R,R,W,W,W,
W,W,W,R,R,W,W,W,
W,W,W,R,R,W,W,W, }

Code matches results on screen:

Red arrow pointing up made up of squares

Red arrow would be upside-down if you did NOT use top-left origin.

I can't say if this is "why". Just that, it's a good reason for top-left origin.

\$\endgroup\$
0
-1
\$\begingroup\$

Because screens start rendering the image from top left corner. It would be easier to co-relate the rendering or drawing of co-ordinate axis when (0,0,0) is at the top left corner with + Y-axis going into the screen.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .