8
\$\begingroup\$

I sometimes run into small issues when doing my JavaScript projects. That is because most build in functions of JavaScript run X,Y if positions are needed. (In that order).

But when I build a 2D Array I start out with Y, it seems more logical for me to to run the X axis horizontal. If I am bad at explaining it, let me show you:

enter image description here

So my loops look like this:

for(var y = 0; y < 10; y++){ for(var x = 0; x < 10; x++){ console.log("Doh!"); } }

Is this so insane? I would like to convert to the normal practise so that I have an easier time while building my game and don't have to do constant switcherroos.

So why is it X before Y ?

Edit: Here is another example, and probably the main reason for my confusion: X is Horizontal, and Y is Vertical in my books..

[ [0,1,2,3,4], [0,1,2,3,4], [0,1,2,3,4], [0,1,2,3,4], ]
\$\endgroup\$
2
  • 3
    \$\begingroup\$ My first instinct would be because we label points like (X, Y) on a Cartesian Plane. \$\endgroup\$ Commented Mar 5, 2013 at 22:45
  • \$\begingroup\$ I guess so, but look at my new example array. Looks more right to me that way \$\endgroup\$ Commented Mar 5, 2013 at 23:00

3 Answers 3

Reset to default
8
\$\begingroup\$

No, if it's working for you, you're not doing it wrong. If you'd like to switch, than do so. The order you process rows/columns is sometimes arbitrary, sometimes not. Which order you use depends entirely on the algorithm you're using.

There's multiple different combinations for processing X,Y. It's up to you to choose which one is correct for your algorithm. In the case where the each iteration is independent of any other, you can choose which ever one you want. You can switch which is in the inner loop and you can also switch if the loops go from min to max or max to min.

I imagine the default is:

for xmin to xmax for ymin to ymax

because this is often how the data is arranged in memory. (Not necessarily true for all languages as the order of the index can change).

For example, an array A[3][3] (A[X][Y]):

enter image description here

Where the y value is in the inner loop increments first and then "rolls over" to increment the x value. Other than that, (X,Y) is the standard way to write it in mathematics.

\$\endgroup\$
1
  • \$\begingroup\$ Cheers, well it just "looks right" when I am building a Grid: \$\endgroup\$ Commented Mar 5, 2013 at 22:56
4
\$\begingroup\$

You are doing it wrong...sort of. The wrong thing you are doing is correlating the order in which coordinates are written with the order in which loops are nested. Those are totally different ideas!

More specifically, the wrong thing is that your coordinate system is tied in a strong (and brittle) way to your implementation of your data storage. That means you are designing bad code from an OO standpoint. The data storage should be opaque to the thing that uses it, and the thing that uses it should not care how the data is stored. The user of the data only needs to know how to get the piece of information that it wants.

What you should do is find a way to abstract away your nested array data structure, and hide it in a method like getPoint(x,y). Then you do not have to worry about which array is nested in which order. You could leave your backwards data structure exactly as it is, as long as your getter method knows to first find array y, and then seek within it for element x. But whatever code is calling getPoint() does not know that. It only needs to know the two coordinates it is interested in.

\$\endgroup\$
3
  • \$\begingroup\$ In other words: "Programms don't care how pretty your code is!" \$\endgroup\$ Commented Mar 6, 2013 at 4:55
  • \$\begingroup\$ But is there anything wrong with my way of storing it besides being upside down? \$\endgroup\$ Commented Mar 6, 2013 at 4:56
  • \$\begingroup\$ No, I don't think so; the other answers are correct in that way. My point is only about how it causes you confusion, which I inferred from the fact that you asked. If your implementation makes your code hard to understand, then encapsulate that weirdness behind a good interface and forget about it. \$\endgroup\$ Commented Mar 6, 2013 at 5:00
1
\$\begingroup\$

It does not matter! I also always write Y first (looks more natural). When you have your matrix in array as rows, you can even do some optmization. Instead of this:

for(var y=0; y<h; y++){ for(var x=0; x<w; x++){ m[y*w+x] = a; } }

you can use this:

for(var y=0; y<h; y++){ var i = y*w; for(var x=0; x<w; x++, i++){ m[i] = a; } }

and avoid lots of multiplications! :)

\$\endgroup\$
4
  • \$\begingroup\$ Could you tell me what your second example does better? :o In JavaScript there are no "real" 2D arrays, you have to create an array of arrays. I therefore don't know if I can use the second example. \$\endgroup\$ Commented Mar 5, 2013 at 23:27
  • \$\begingroup\$ Let's say, w=h=1000. In first example, you are doint 1000000 multiplications, while in second example, you are doing only 1000 multiplications. Multiplication is super hard, many CPUs don't even have multiplication command. They are emulating it with addition and bit operations. \$\endgroup\$ Commented Mar 6, 2013 at 0:57
  • \$\begingroup\$ I see. But I just don't see myself doing such a iteration. Mine usually look like this: for(var y ...){array[y]=[] for(var x ...){ array[y][x] = a;}} \$\endgroup\$ Commented Mar 6, 2013 at 1:09
  • 1
    \$\begingroup\$ Oh sure. But you are creating 1000 new JS objects on heap ... oh never mind, you are probably not implementing Adobe Photoshop in JS, so keep using your iterations :) \$\endgroup\$ Commented Mar 6, 2013 at 9:46

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.