algorithm to sort this arrray

Question

I am currently making a rubik's cube in CSS

Testarea: http://codepen.io/pixelass/pen/lkhIt

Everything works as desired. I can turn all sides (with a helper div)

now I need to store positions after a turn

the cube has a lot of divs with data-attributes which define the position in the 3d grid.
e.g. <a href="#" data-x="1" data-y="1" data-z="1" class="part red blue yellow"> </a>

I basically have an array for each dimension

Here's one level sorted when a rotation of 90deg (one turn) is made on the x axis of the outermost side (see codepen example and click "TRIGGER X 1" once)

The array needs to be modified. Of course there is some kind of pattern but I'm having difficulties figuring it out. Obviously this is the "easiest side-turn". The others will probably be a little more difficult.

When I store the cube I just switch the data-attribute valuesand turn the part in the same direction on the same axis. This part is pretty well thought though and works

So what I need is an algorithm to perform the sorting: (The other levels of that axis will just use the same pattern since only the first value changes (1,2,3))

from

[{
  "x": 1,
  "y": 1,
  "z": 1
}, {
  "x": 1,
  "y": 1,
  "z": 2
}, {
  "x": 1,
  "y": 1,
  "z": 3
}, {
  "x": 1,
  "y": 2,
  "z": 1
}, {
  "x": 1,
  "y": 2,
  "z": 2
}, {
  "x": 1,
  "y": 2,
  "z": 3
}, {
  "x": 1,
  "y": 3,
  "z": 1
}, {
  "x": 1,
  "y": 3,
  "z": 2
}, {
  "x": 1,
  "y": 3,
  "z": 3
}]

to

[{
  "x": 1,
  "y": 3,
  "z": 1
}, {
  "x": 1,
  "y": 2,
  "z": 1
}, {
  "x": 1,
  "y": 1,
  "z": 1
}, {
  "x": 1,
  "y": 3,
  "z": 2
}, {
  "x": 1,
  "y": 2,
  "z": 2
}, {
  "x": 1,
  "y": 1,
  "z": 2
}, {
  "x": 1,
  "y": 3,
  "z": 3
}, {
  "x": 1,
  "y": 2,
  "z": 3
}, {
  "x": 1,
  "y": 1,
  "z": 3
}]

Kyle Paulsen · Accepted Answer · 2014-05-08 19:48:59Z

1

Maybe this will help: you can use the sort method on arrays:

myArr.sort(function(a, b) {
    if (a.z > b.z) {
        return 1;
    } else if (a.z < b.z) {
        return -1;
    } else {
        if (a.y > b.y) {
            return -1;
        } else {
            return 1;
        }
    }
});

answered May 8, 2014 at 19:48

Kyle Paulsen

1,0061 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user950658 Over a year ago

Thanks. That really helped. Maybe you can explain that a little. My brain doesn't get it (today)... too much medicine ;(. It works as expected and the parts get arranged as desired (except for the 4th turn but that's probably something in my code).

Kyle Paulsen Over a year ago

Basically I'm passing in a compare function to sort. This function takes two elements "a" and "b" in your array. The compare function needs to return a "1" if "a" goes after "b", a "-1" if "a" goes before "b" and 0 if they are the same. So in my answer, I sort on your objects z property first, making sure the higher Zs are last (return 1). Then in the else case, (which is when the Zs are equal) I sort by the y property making sure higher Ys show up first (return -1).

user950658 Over a year ago

So the first move works perfectly (click "trigger x 1") out of the box codepen.io/pixelass/pen/mafbg. Just gotta get the rest to work. I guess Y and Z axis will get more complicated but your answer helps a lot. Thx a bunch

Collectives™ on Stack Overflow

algorithm to sort this arrray

from

to

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

from

to

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related