Sorting coordinates

Question

Im coding a Paint version for Minecraft with the CC Tweaked Mod The Problem is i give my program an array and the program follows the order of the array one after the other.

That means if i draw something in the top left and then bottom right and then i fill everything else it will follow this order (which isnt very efficient)

I have an array called output Here is how the array could look like

[
  { x: 0, y: 0, color: 12 },
  { x: 1, y: 0, color: 3 },
  { x: 2, y: 0, color: 5 },
  { x: 0, y: 1, color: 8 },
  { x: 1, y: 1, color: 10 },
  { x: 2, y: 1, color: 11 },
  { x: 0, y: 2, color: 12 },
  { x: 2, y: 2, color: 3 },
  { x: 1, y: 2, color: 14 }
]

The array comes from this "drawing"(ignore the arrows for now)

Now the question How can i get from the first array to an array that looks like this

[
  { x: 0, y: 0, color: 12 },
  { x: 1, y: 0, color: 3 },
  { x: 2, y: 0, color: 5 },
  { x: 2, y: 1, color: 11 },
  { x: 1, y: 1, color: 10 },
  { x: 0, y: 1, color: 8 },
  { x: 0, y: 2, color: 12 },
  { x: 1, y: 2, color: 14 }
  { x: 2, y: 2, color: 3 },
]

(See how it follows the arrows?)

This would be much faster.

It is possibles that some squares are not filled with any color. Idk how important that might be

If important these are the colorcodes

const LISTOFCOLORS = {
    white: 1,
    orange: 2,
    magenta: 3,
    dodgerblue: 4,
    yellow: 5,
    lime: 6,
    pink: 7,
    gray: 8,
    lightgray: 9,
    cyan: 10,
    purple: 11,
    blue: 12,
    SaddleBrown: 13,
    green: 14,
    red: 15,
    black: 16
}

Answer 1

@axtck Thank you very much. I ended up not using slice but the "slicing the array in multiple arrays and work from there" part i got from your post

i ended up with this

const arr = [
    { x: 1, y: 4, color: 12 },
    { x: 2, y: 4, color: 12 },
    { x: 2, y: 3, color: 12 },
    { x: 2, y: 2, color: 12 },
    { x: 2, y: 1, color: 12 },
    { x: 0, y: 0, color: 12 },
    { x: 1, y: 0, color: 12 },
    { x: 1, y: 1, color: 12 },
    { x: 4, y: 1, color: 12 },
    { x: 3, y: 2, color: 12 },
    { x: 1, y: 3, color: 12 },
    { x: 0, y: 3, color: 12 },
    { x: 0, y: 1, color: 12 },
    { x: 0, y: 2, color: 12 },
    { x: 1, y: 2, color: 12 },
    { x: 3, y: 4, color: 12 },
    { x: 4, y: 4, color: 12 },
    { x: 4, y: 0, color: 12 },
    { x: 3, y: 0, color: 12 },
    { x: 2, y: 0, color: 12 },
    { x: 3, y: 1, color: 12 },
    { x: 4, y: 2, color: 12 },
    { x: 4, y: 3, color: 12 },
    { x: 0, y: 4, color: 12 },
    { x: 3, y: 3, color: 12 }
]

const ArrayOfArrays = []
const dimension = 5

for (let i = 0; i < dimension; i++) {

    let array = []


    for (let j = 0; j < arr.length; j++) {
        if (i == arr[j].y) {
            array.push(arr[j])
        }
    }

    ArrayOfArrays.push(i % 2 === 0 ?
        array.sort(function (a, b) {
            return a.x - b.x;
        }) : array.sort(function (a, b) {
            return b.x - a.x;
        }))

}





console.log(ArrayOfArrays)

The output would be

[
  [
    { x: 0, y: 0, color: 12 },
    { x: 1, y: 0, color: 12 },
    { x: 2, y: 0, color: 12 },
    { x: 3, y: 0, color: 12 },
    { x: 4, y: 0, color: 12 }
  ],
  [
    { x: 4, y: 1, color: 12 },
    { x: 3, y: 1, color: 12 },
    { x: 2, y: 1, color: 12 },
    { x: 1, y: 1, color: 12 },
    { x: 0, y: 1, color: 12 }
  ],
  [
    { x: 0, y: 2, color: 12 },
    { x: 1, y: 2, color: 12 },
    { x: 2, y: 2, color: 12 },
    { x: 3, y: 2, color: 12 },
    { x: 4, y: 2, color: 12 }
  ],
  [
    { x: 4, y: 3, color: 12 },
    { x: 3, y: 3, color: 12 },
    { x: 2, y: 3, color: 12 },
    { x: 1, y: 3, color: 12 },
    { x: 0, y: 3, color: 12 }
  ],
  [
    { x: 0, y: 4, color: 12 },
    { x: 1, y: 4, color: 12 },
    { x: 2, y: 4, color: 12 },
    { x: 3, y: 4, color: 12 },
    { x: 4, y: 4, color: 12 }
  ]
]

notice how the x value goes up and down

Answer 2

If you are only reversing the 3 - 6 entries, you could create a new array from slices of the old array using slice() and reverse the specified entries using reverse().

const rowByRow = [
  { x: 0, y: 0, color: 12 },
  { x: 1, y: 0, color: 3 },
  { x: 2, y: 0, color: 5 },
  { x: 0, y: 1, color: 8 },
  { x: 1, y: 1, color: 10 },
  { x: 2, y: 1, color: 11 },
  { x: 0, y: 2, color: 12 },
  { x: 2, y: 2, color: 3 },
  { x: 1, y: 2, color: 14 }
];

const result = [
  ...rowByRow.slice(0, 3), 
  ...rowByRow.slice(3, 6).reverse(), // reverse 3 - 6 entries 
  ...rowByRow.slice(6, 9)
];

console.log(result);