HN Explorer

Ask HN: Which coordinate system is better for a beginners programming language?

24 points by chkas ↗ HN
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.

46 comments

[ 6.1 ms ] story [ 92.2 ms ] thread
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.

chkas
Complicating my life would be ok, but complicating the lives of beginner programmers would not. Origin in the middle would mean that you need negative values to draw on the screen.
jacknews
Scratch has the origin in the middle of the screen.

It makes some things so much easier and clearer, especially drawing static symmetric designs, where you can just specify both positive and negative of the same values to get symmetric points.

blagie
My experience -- having worked with even kindergarten-age kids -- is that negative values don't complicate much of anything.

On the other hand, you often want to stick things at, or relative to, the center of the screen. If you want an edge, it's random which one you'll want, and addressing them consistently makes sense (windowHeight/2, -windowHeight/2, etc.)

manim does the same thing. It's super-intuitive to work with relative to anything else. manim also has shorthand macros like LEFT (which is a vector of (-1,0)), RIGHT, etc. which actually make for very readable code.

webreac
scratch has the origin at the center. If your audience is young, they may already be used to it.
mikewarot
It really doesn't matter.... just document the choice and provide examples that remove the ambiguity of X,Y for beginners.
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.
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.
tompazourek
Top-left isn't as unnatural for humans in my opinion. It's how you read and write text... Also it's natural for web pages as the top left is fixed.
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.

philipov
Not just for displaying text, but monitors have traditionally updated from left-to-right, top down. If you update the frame buffer in the middle of the screen refreshing, you end up with screen tearing, which is when the frame that gets drawn has the top of the previous frame, and torn in the middle to display the next frame below.
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.

bjourne
But that implies negative numbers which is difficult for young audiences.
wenc
Young kids didn’t have trouble with Logo when it was popular. I remember Logo from my childhood. Negative numbers are not difficult. You just have to think of them as left 5 or down 2.
bmitc
I remember being introduced to negative numbers in sixth grade! Completely ridiculous. I was in fifth grade and was in one of those shadow days, where I followed a sixth grader around for the day. I was in their math class and got taught negative numbers, and I just remember thinking "wait, why is this just now being introduced?".
rightbyte
What? (Or are you not counting subtraction as negative numbers?)
bmitc
A cursory Google search shows that negative numbers are introduced in 4th-6th grade. For me, I only remember that particular instance of shadow day and just remember it seeming novel at the time (in terms of it being taught). I actually don't have much recollection when things were introduced outside of that until later in junior high or high school. If I remember right, it was specifically about negative numbers, and from what I recall it was me thinking that it was just subtraction or something along those lines.
wenc
Yes. Most children intuitive understand addition and subtraction of negative numbers. It’s just moving left or right of the number line. It’s multiplication and division of negative numbers that’s a bit confusing.
andsoitis
a) Even when you see can see the cartesian axes?

b) Can this actually help younglings understand negative numbers more readily?

bjourne
I'm not an expert, but humankind developed math for thousands of years before negative numbers were discovered. Even irrational numbers were discovered before negative numbers. Furthermore, in all curricula that I know of, addition and sometimes even multiplication is introduced at least a year before negative numbers are introduced. These facts strongly suggest that negative numbers are non-intuitive to young children. Personal anecdotes about peoples' experiences with Logo notwithstanding.

Do note that subtraction and negative numbers are not the same.

dontcontactme
consider polar coordinates. reject cartesian dogma.
yjftsjthsd-h
I don't think that's actually easier for students, and it's definitely harder for the programmer to implement, so what's the benefit?
thayne
I'm guessing that's a joke?
Sharlin
Consider linear coordinates, that's how the memory is laid out after all ;) It should be easy to see, for example, that coordinate delta 96020 corresponds to 50 pixels down, 20 right on 1920pix horizontal resolution.
wruza
Real men add stride up to 2048 and think in hex:

  0x0001 (1,0)
  0x0802 (2,1)
  0x2803 (3,5)
dekhn
clearly, hilbert spaces are the right approach
taylodl
Why stop there? Use the Argand plane and then get all your trigonometric functions for free! Gotta get those young whippersnappers into shape!

Obviously I jest, but boy would it have made things a lot easier if we did them that way! To your point, I feel like we do a lot of the things we do because that's the way we've always done it. Every now and then we need to step back and ask whether that still makes the most sense.

chipuni
You might have written that as a joke, but Logo's turtle graphics are polar coordinates and made sense to young students.
Jtsummers
The way of interacting with the turtle was via procedures and commanding it with things like "rotate 90" or "forward 100". Students didn't have to think about the coordinate system explicitly, only the result on the turtle from the turtle's POV.
stonemetal12
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.

chkas
Good points - I see it as coding 1 from N, otherwise it doesn't really make sense.
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.

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).

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
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).

[deleted]
(comment deleted)
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.
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
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.
[deleted]
(comment deleted)
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.
[deleted]
(comment deleted)
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.