(disclosure, I'm mostly math illiterate).
I have an array in this format:
var grid = [
[0,0], [0,1], [0,2], [0,3],
[1,0], [1,1], [1,2], [1,3],
[2,0], [2,1], [2,2], [2,3],
[3,0], [3,1], [3,2], [3,3]
];
I need to "rotate" it by 90deg increments, so it's like this:
var grid = [
[3,0], [2,0], [1,0], [0,0],
[3,1], [2,1], [1,1], [0,1],
[3,2], [2,2], [1,2], [0,2],
[3,3], [2,3], [1,3], [0,3]
];
How do I accomplish this in Javascript?
Those looking for Rotating a two dimensional matrix (a more general case) here is how to do it.
example: Original Matrix:
[
[1,2,3],
[4,5,6],
[7,8,9]
]
Rotated at 90 degrees:
[
[7,4,1]
[8,5,2]
[9,6,3]
]
This is done in following way:
matrix[0].map((val, index) => matrix.map(row => row[index]).reverse())
For counter-clockwise rotation (Thanks to @karn-ratana):
matrix[0].map((val, index) => matrix.map(row => row[row.length-1-index]));
matrix[0].map((val, index) => matrix.map(row => row[row.length-1-index])); 
Credit goes to this answer for the actual rotation method.
My method was pretty straightforward. Just determine what the row length was, and then iterate through each item, converting the array index to x/y equivalents and then apply the method used in the linked answer to rotate. Finally I converted the rotated X/Y coordinates back to an array index.
var grid = [
[0,0], [0,1], [0,2], [0,3],
[1,0], [1,1], [1,2], [1,3],
[2,0], [2,1], [2,2], [2,3],
[3,0], [3,1], [3,2], [3,3]
];
var newGrid = [];
var rowLength = Math.sqrt(grid.length);
newGrid.length = grid.length
for (var i = 0; i < grid.length; i++)
{
//convert to x/y
var x = i % rowLength;
var y = Math.floor(i / rowLength);
//find new x/y
var newX = rowLength - y - 1;
var newY = x;
//convert back to index
var newPosition = newY * rowLength + newX;
newGrid[newPosition] = grid[i];
}
for (var i = 0; i < newGrid.length; i++)
{
console.log(newGrid[i])
}
The output:
[3, 0] [2, 0] [1, 0] [0, 0]
[3, 1] [2, 1] [1, 1] [0, 1]
[3, 2] [2, 2] [1, 2] [0, 2]
[3, 3] [2, 3] [1, 3] [0, 3]
Fiddle for the lazy. And a 5x5 grid fiddle to demonstrate that the algorithm works for N grid sizes as long as they are square.
These are two function for clockwise and counterclockwise 90-degree rotation:
function rotateCounterClockwise(a){
var n=a.length;
for (var i=0; i<n/2; i++) {
for (var j=i; j<n-i-1; j++) {
var tmp=a[i][j];
a[i][j]=a[j][n-i-1];
a[j][n-i-1]=a[n-i-1][n-j-1];
a[n-i-1][n-j-1]=a[n-j-1][i];
a[n-j-1][i]=tmp;
}
}
return a;
}
function rotateClockwise(a) {
var n=a.length;
for (var i=0; i<n/2; i++) {
for (var j=i; j<n-i-1; j++) {
var tmp=a[i][j];
a[i][j]=a[n-j-1][i];
a[n-j-1][i]=a[n-i-1][n-j-1];
a[n-i-1][n-j-1]=a[j][n-i-1];
a[j][n-i-1]=tmp;
}
}
return a;
}
I don't really need to deal with indices, since I can copy the values from one place to the other, this simplifies the answer a bit:
var grid = [
[0,0], [0,1], [0,2], [0,3], [0,4],
[1,0], [1,1], [1,2], [1,3], [1,4],
[2,0], [2,1], [2,2], [2,3], [2,4],
[3,0], [3,1], [3,2], [3,3], [3,4],
[4,0], [4,1], [4,2], [4,3], [4,4]
];
var side = Math.sqrt(grid.length);
var rotate = function(d,i){
return [Math.abs(i % side - side+1), Math.floor(i/side)]
}
grid = grid.map(rotate);
You can see a jsfiddle here: http://jsfiddle.net/KmtPg/
This solution will work with any kind of matrix but if it's not nn and the size is nm it will have undefined items in the array (I set it to return null in case of undefined), but it works at the end and you will have a rotated array.
//ES6 function
const rotateMatrix = (matrix) => {
let temp;
for (let i = 1; i < matrix.length; i++) {
for (let j = 0; j < matrix.length / 2; j++) {
temp = matrix[i][j];
matrix[i][j] = matrix[j][i] === undefined ? null : matrix[j][i];
matrix[j][i] = temp;
}
}
return matrix;
};
// 3,3 matrix example
console.table(rotateMatrix([[1, 2, 64], [4, 5, 55], [7, 8, 34]]));
// 5*3 matrix example
console.table(rotateMatrix([[1, 2, 64], [4, 5, 55], [7, 8, 34], [10, 15, 65], [22, 24, 56]]));
grid.map(function(d,i){return [Math.abs(d[1]-3), d[0]]})which does it for one increment but it's obviously wrong from a math standpoint.