HACKER Q&A
📣 chkas

Which coordinate system is better for a beginners programming language?


This is a programming language reduced to the basics with built-in graphics commands. It includes an interactive course to learn programming.

There are now two versions. One with the coordinate system origin at the top left, one with the origin at the bottom left. I am interested in the reasons why one or the other version is "better" for a teaching and learning programming language.

Arguments for "top left": this is common in 2D computer graphics; it is easier to deal with a grid of rows and columns

Top left origin tutorial: https://easylang.online/apps/tut_learn.html

Arguments for "bottom left": the y-value corresponds to the height; that's how it's taught in math class

Bottom left origin tutorial: https://tiki.li/apps/tut_learn.html

These tutorials are also built into the Web ID. It is all open source.


  👤 stonemetal12 Accepted Answer ✓
If this is a teach all the kids programming, I would go with bottom left, or center as origin. No need to complicate it for people who will never use it again.

If this is intro to coding 1 of N. Then go top left. They will have to learn the map is not the territory at some point why not with this easy example. It will also help when they try to take what they learned beyond the course.


👤 andsoitis
Your tutorials remind me of Logo, which uses the cartesian coordinate system with (0,0) being in the center of the viewport. https://www.tutorialspoint.com/logo/logo_turtle.htm#

Natural fit with algebra.

Someone else in the thread pointed out that Scratch does the same.


👤 h2odragon
Just to complicate your life: Have you considered having the origin in the center of the screen? That'd be an even better fit for Algebra and geometry as they're taught, no? Edit: And CAD systems.

Complicate everyone else's life: Allow the origin to be set by the user, too.


👤 miga
Depends on your audience.

If your audience consists mostly of programmers, use top-left they are familiar with.

If your audience is familiar with primary school math, choose their coordinate system: bottom-left.

It is just convention that is consistently kept within the certain community. I would advise against any convention that is unused in your community.


👤 ggambetta
Top-left is natural for computers because how video memory is organized, but not the most natural for humans, IMO. I'd go with origin at center, X+ to the right, Y+ to the top, for compatibility with how graphs usually work in math. Centering things is also simpler - put them in -x and +x for example.

👤 dontcontactme
consider polar coordinates. reject cartesian dogma.

👤 victorclf
It's easier to translate math concepts with origin at bottom left. I remember having a hard time translating raycasting code to top left coordinates of pygame because it messed with the signs of sin, cos and tan.

Some libraries like to use top left coordinates because they are conceptually easier for stuff such as displaying rows of text and we are used to top to bottom ordering of things.


👤 dingleberry420
Top left always seemed more intuitive to me, but I don't have any reasoning. When using photoshop, I usually also draw squares starting at their top left corner.

👤 onion2k
In shaders it's common to use normalized coordinates with [0,0] being the centre extending to [-0.5,0.5] on each axis. There are lots of advantages. It makes a lot of the math simpler. Shader programming probably isn't the best place to start for beginners though.

👤 jstx1
Top left.

> Arguments for "bottom left": the y-value corresponds to the height; that's how it's taught in math class

Not quite, in math class (0,0) is the center and you can go positive and negative on both axes. You would be taking the coordinate system from math class and limiting everything to the first quadrant which doesn't seem natural at all (in computer graphics or in math).


👤 wruza
It was sort of a surprise that computers do -y when I first learned basic, but it really wasn’t an issue.

Maybe advanced graphics, e.g. rotation matrix, will be more confusing later, but at this point you’re not a beginner and can always incorporate a mirroring matrix into your stack.

Note also that almost all editors and guis also use top=0 (except AppKit, where it is configurable non-default).


👤 mikewarot
It really doesn't matter.... just document the choice and provide examples that remove the ambiguity of X,Y for beginners.

👤 xtiansimon
This is suddenly an I interesting question, given these responses.

I especially like the answers which relate one coordinate system to another system, either in mathematics or other computer software.

I wonder if there are any hardware solutions choosing one coordinate system over another…reminds me of photography in a darkroom. A corner is cut off of the film so you can orient the film emulsion in the dark. In that case it’s useful to choose a system, though any orientation would suffice.

This discussion gives me the idea that if your curriculum crosses over to require different coordinate systems, then a new lesson might emerge about how different models are used in different contexts. Like choosing Imperial or Metric, it’s part convention and part utility.


👤 IceMetalPunk
Another argument for bottom-left origin is that it's how 3D graphics usually work. If the basic language focuses on 2D graphics, then go with top-left for later familiarity. If it focuses on 3D graphics, go with bottom-left for the same reason.

👤 chkas
Thanks for the feedback so far. Top left and y increase down was my unquestioned choice for a long time. Then someone came and changed "easylang" to bottom left and said that her daughter would be easier with it. That convinced me and I changed all tutorials and examples to "bottom left". But surprisingly it turned out that many programs became more complicated, many work with row-column grids (game of life, minesweeper, ...) and there the conversion to the y-values is more difficult.

Very often the suggestion comes with 0/0 in the center like Scratch. I haven't thought about that yet, because the necessary negative numbers scared me off.


👤 kbelder
I'd recommend bottom-left, to keep it in line with math.

Also... if they're ever going to do any trig... like "move laser to 30 degree angle", it'll be a big boon to keep it exactly in line with what they've learned in school.


👤 1e-9
If you want to reason about the real world, then a top-left origin will typically be better as it aligns with a right-handed coordinate system of Forward-Right-Down; where the Forward dimension aligns with the range to an object in the scene, the Right dimension aligns with the pixel column, and the Down dimension aligns with the pixel row. As a result, vector operations are more intuitive and there is less mental translation required when mapping between image space and real-world space.

👤 jcelerier
I've taught programming with p5js (top left origin) to art students without a math background and the coordinate system wasn't an issue at any point

👤 OJFord
Centre: alludes to the 'infinite tape' perspective that we're dealing with/viewing just some small piece of a bigger more generic pie, even if you don't yet or ever implement infinite/at all expansion across the axes.

👤 valbaca
top-left, as it most naturally corresponds to left-to-right/top-to-bottom reading and is the most used in 2D afaik. Avoids negative numbers and corresponds directly with the number line that we learn in elementary