Girar matrices es una operación común en programación, especialmente en juegos y aplicaciones gráficas. En este tutorial, aprenderás a rotar una matriz en 90 grados usando JavaScript. También veremos casos de uso reales, como girar una pieza del juego Tetris.

Caso de Uso: Girar una Pieza de Tetris

Uno de los usos más comunes de girar matrices es en el juego Tetris. Cada pieza del juego puede representarse como una matriz, y al girarlas podemos cambiar su orientación en el tablero. A continuación, se muestra un ejemplo de cómo girar una matriz 90 grados en JavaScript.

Código para Rotar una Matriz en 90 Grados

function rotateMatrix(matrix) {
  const n = matrix.length;
  const rotated = Array.from({ length: n }, () => Array(n).fill(0));
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      rotated[j][n - 1 - i] = matrix[i][j];
    }
  }
  return rotated;
}

// Ejemplo de uso
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const rotatedMatrix = rotateMatrix(matrix);
console.log(rotatedMatrix);

En este código, primero creamos una matriz vacía llamada 'rotated' que tendrá las mismas dimensiones que la matriz original. Luego, usamos dos bucles 'for' para asignar los valores de la matriz original a la matriz rotada. Finalmente, devolvemos la matriz rotada.

Explicación del Código

  • La función 'rotateMatrix' toma una matriz como argumento.
  • Creamos una matriz vacía 'rotated' con las mismas dimensiones que la matriz original.
  • Usamos dos bucles 'for' para recorrer la matriz original.
  • Asignamos el valor de la posición [i][j] a la nueva posición [j][n-1-i] en la matriz rotada.
  • Devolvemos la matriz 'rotated'.

Cuándo Usar Rotación de Matrices

La rotación de matrices es útil en varias situaciones, como:

  • Juegos: para rotar piezas en juegos como Tetris.
  • Gráficos: para manipular imágenes o figuras geométricas.
  • Algoritmos de búsqueda y computación: ciertas transformaciones geométricas o algoritmos requieren rotaciones de matrices.

Y sin bucles? .... 

Además de utilizar bucles para rotar una matriz, también es posible hacerlo usando operaciones matemáticas. Esto puede simplificar el código y mejorar la eficiencia en ciertos casos.

Código para Rotar una Matriz en 90 Grados Sin Usar Bucles

function rotateMatrixMath(matrix) {
  const n = matrix.length;
  return matrix.map((row, i) => row.map((val, j) => matrix[n - 1 - j][i]));
}

// Ejemplo de uso
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const rotatedMatrix = rotateMatrixMath(matrix);
console.log(rotatedMatrix);

En este código, usamos el método 'map' de JavaScript para realizar las transformaciones matemáticas necesarias para rotar la matriz sin necesidad de bucles explícitos.

Explicación del Código

  • La función 'rotateMatrixMath' toma una matriz como argumento.
  • Usamos 'map' para recorrer cada fila y cada columna de la matriz original.
  • Para cada elemento, calculamos su nueva posición usando operaciones matemáticas: la posición [i][j] se convierte en [n-1-j][i].
  • Devolvemos la nueva matriz rotada.

Ventajas de Usar MAP

  • Código más conciso y legible.
  • Potencial para mejorar la eficiencia en matrices grandes.
  • Uso de funciones de orden superior como 'map', que son más avanzadas en JavaScript moderno

Método Genérico para Rotar una Matriz

A continuación, se muestra un método genérico en JavaScript que recibe una matriz y un ángulo (0, 90, 180, 270) y devuelve la matriz rotada.

function rotateMatrix(matrix, angle) {
  const n = matrix.length;
  switch (angle) {
    case 0:
      return matrix;
    case 90:
      return matrix[0].map((_, i) => matrix.map(row => row[n - 1 - i]));
    case 180:
      return matrix.map(row => row.slice()).reverse().map(row => row.reverse());
    case 270:
      return matrix[0].map((_, i) => matrix.map(row => row[i]).reverse());
    default:
      throw new Error('Angle must be 0, 90, 180, or 270 degrees');
  }
}

// Ejemplo de uso
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(rotateMatrix(matrix, 0));  // No rota
console.log(rotateMatrix(matrix, 90)); // Rota 90 grados
console.log(rotateMatrix(matrix, 180)); // Rota 180 grados
console.log(rotateMatrix(matrix, 270)); // Rota 270 grados

En este código, la función 'rotateMatrix' acepta una matriz y un ángulo, utilizando un `switch` para manejar las diferentes rotaciones posibles (0, 90, 180, 270 grados). Cada caso implementa la rotación correspondiente utilizando métodos de array como 'map' y 'reverse', puedes usarlo en tus proyectos y no preocuparte mas de como hacerlo ¿Esto no debería cambiar con el tiempo cierto? ... o ¿Sí? ...