Rotate  MxN Matrix
Published: 2019-10-21 02:08:35

Rotate Matrix is a simple program that rotates a MxN grid by 90 degrees clockwise or counter-clockwise. For example, the grid of `[[1, 2], [3, 4], [5, 6]]` should return `[[2, 4, 6], [1, 3, 5]]` when rotating counter-clockwise or `[[5, 3, 1], [6, 4, 2]]`when rotating clockwise. 
```
  [1, 2]     [2, 4, 6]    [5, 3, 1]
  [3, 4]     [1, 3, 5]    [6, 4, 2]
  [5, 6]
  origin     counter      clockwise
```

To do this we'll first make a function that takes in a matrix, or an array of array, and a direction to tell us which way to rotate. Before we begin, lets make an empty array that will hold the values of rotated values. 
```
var rotateMatrix = function(matrix, direction ) {
  let rotated = [];
  return rotated;
  };
```
The idea is that we're going to loop over the matrix by the length of a row and pick out the values we need in that column to simulate a rotation. So using the example above, if we wanted to rotate clockwise we'll loop over the matrix twice since we know that the length of a row is 2 and the expected outcome should have 2 rows. Then we will loop over the matrix again by 3 since there are 3 items in a column. In other words the current number of rows and columns should be switched in the result. The algorithm used to rotate the matrix both clockwise and counter-clockwise are very similar, but let's start with clockwise rotation.

We know that if we turn the matrix clockwise, we should expect 2 rows and 3 columns. If we take a closer look at the example above, we will also know that the expected values starts on the bottom left at 5 and goes upward and continues to the next bottom value 6 and goes upward each time. That means that our clockwise should look something like this: 
```
// set col to be the length of a row in the matrix
// this will be the number of rows in the rotated result
for (let col = 0; col < matrix[1].length; col++) {
  // this will hold the values for the current column in the rotated result
  let colArr = [];
  // set row to be the length of the original matrix (the number of columns there are)
  // this will be the number of columns in the rotated result
  for (let row = matrix.length - 1; row >= 0; row--) {
  // add the current value into the current column
    colArr.push(matrix[row][col]);
  }
  // added the whole column into the rotated result
  rotated.push(colArr);
}
```
For counter-clockwise, the same algorithm applies but decrements by columns and increments by rows instead. So rather than starting from the bottom left and moving upwards, it starts from the top right and moves downward.
```
for (let col = matrix[1].length - 1; col >= 0; col--) {
  let colArr = [];
  for (let row = 0; row < matrix.length; row++) {
    colArr.push(matrix[row][col]);
  }
  rotated.push(colArr);
}
```

And that's all! The whole program should look something like this:
```
var rotateMatrix = function(matrix, direction ) {
  // [1, 2]     [2, 4, 6]  [5, 3, 1]
  // [3, 4]     [1, 3, 5]  [6, 4, 2]
  // [5, 6]
  // origin     counter    clockwise
  
  let rotated = [];
  // counter clockwise
  if (direction === -1) {
    for (let col = matrix[1].length - 1; col >= 0; col--) {
      let colArr = [];
      for (let row = 0; row < matrix.length; row++) {
        colArr.push(matrix[row][col]);
      }
			rotated.push(colArr);
    }
  } 
  // default clockwise rotation
  else {
  	for (let col = 0; col < matrix[1].length; col++) {
      let colArr = [];
      for (let row = matrix.length - 1; row >= 0; row--) {
        colArr.push(matrix[row][col]);
      }
			rotated.push(colArr);
    }
  }

  return rotated;
};

```