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

[chkas]

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]

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.

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

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

[webreac]

scratch has the origin at the center. If your audience is young, they may already be used to it.

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

[dontcontactme]

consider polar coordinates. reject cartesian dogma.

[chipuni]

You might have written that as a joke, but Logo's turtle graphics are polar coordinates and made sense to young students.

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

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

[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?

[dekhn]

clearly, hilbert spaces are the right approach

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

[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