Spinning a rectangular grid with JavaScript

Question

Spinning a rectangular grid with JavaScript

I am currently developing my own version of Tetris. My main focus at the moment is creating a function that can rotate a 2D variable array by 90 degrees (or -90).

For instance, if we have an array like:

"-T-",
"TTT"

The expected output should be:

"T-",
"TT",
"T-"

I attempted to implement this using the following function:

function rotateN90(a){
    var temp = [];
    for(var x = 0; x<a[0].length; x++){
        temp.push("");
        for(var y = 0; y<a.length; y++){
            temp[x] += a[y][x];
        }
    }
    
    return temp;
}

However, the current function is not producing the desired outcome. It does rotate the initial T-Block example by -90 degrees once, but then reverts back to its original orientation.

I would greatly appreciate any assistance with this problem!

(PS: I am working within KA's processing environment and do not have access to libraries or ES6 features.)

javascript arrays ecmascript-5

Answer 1

Answer №1

This particular snippet of code demonstrates how to rotate an array of size mxn by -90 degrees.

function rotateNegative90(array){

 var temp = new Array(array[0].length); // number of columns
 var i=0;

 for (i = 0; i < temp.length; i++) { 
     temp[i] = [];
 } 

 for(i=0;i<array.length;i++){
    
     for(let j = 0; j<array[0].length;j++){

         temp[j][i]= array[i][array[i].length-1-j];
     }
 }

 return temp;
}

For example, if your input array is: [[1, 2,3],[4, 5, 6]]

After rotating it by -90 degrees, the resulting array will be: [[3, 6],[2, 5],[1, 4]]

Answer 2

This particular snippet of code demonstrates how to rotate an array of size mxn by -90 degrees.

function rotateNegative90(array){

 var temp = new Array(array[0].length); // number of columns
 var i=0;

 for (i = 0; i < temp.length; i++) { 
     temp[i] = [];
 } 

 for(i=0;i<array.length;i++){
    
     for(let j = 0; j<array[0].length;j++){

         temp[j][i]= array[i][array[i].length-1-j];
     }
 }

 return temp;
}

For example, if your input array is: [[1, 2,3],[4, 5, 6]]

After rotating it by -90 degrees, the resulting array will be: [[3, 6],[2, 5],[1, 4]]

Answer 3

Answer №2

class Array2D extends Array {
  constructor(width, height, array) {
    super();
    this.width = width;
    this.height = height;
    for(let i = 0; i < width*height; i++) {
      this[i] = array ? array[i]:0;
    }
  }
  set(x, y, value) {
    this[x+y*this.width] = value;
  }
  get(x, y) {
    return this[x+y*this.width];
  }
  static swap(array2d) {
    const result = new Array2D(array2d.height, array2d.width);
    for(let x = 0; x < array2d.width; x++) {
      for(let y = 0; y < array2d.height; y++) {
        result.set(y, x, array2d.get(x, y));
      }
    }
    return result;
  }
  static flip(array2d) {
    const result = new Array2D(array2d.width, array2d.height);
    for(let x = 0; x < array2d.width; x++) {
      for(let y = 0; y < array2d.height; y++) {
        result.set(x, array2d.height-1-y, array2d.get(x, y));
      }
    }
    return result;
  }
  static spin(array2d) {
    const swapped = Array2D.swap(array2d);
    return Array2D.flip(swapped);
  }
}

const a2d = new Array2D(2, 2, [1, 1, 1, 0]);
console.log(Array2D.spin(Array2D.spin(a2d)));

This solution has been slightly modified for better clarity and organization.

// Code implementation with functions instead of classes (due to restrictions)
function create2D(width, height, array) {
  var arr = [];
  arr.width = width;
  arr.height = height;
  for(var i = 0; i < width*height; i++) {
    arr[i] = array ? array[i]:0;
  }
  return arr;
}

function set(array, x, y, value) {
  array[x+y*array.width] = value;
}

function get(array, x, y) {
  return array[x+y*array.width];
}

function swap(array2d) {
  var result = create2D(array2d.height, array2d.width);
  for(var x = 0; x < array2d.width; x++) {
    for(var y = 0; y < array2d.height; y++) {
      set(result, y, x, get(array2d, x, y));
    }
  }
  return result;
}

function flip(array2d) {
  var result = create2D(array2d.width, array2d.height);
  for(var x = 0; x < array2d.width; x++) {
    for(var y = 0; y < array2d.height; y++) {
      set(result, x, array2d.height-1-y, get(array2d, x, y));
    }
  }
  return result;
}

function spin(array2d) {
  return flip(swap(array2d));
}

var a1 = create2D(2, 2, [1, 1, 1, 0]);
var a2 = spin(spin(a1));

console.log(a2);

Answer 4

class Array2D extends Array {
  constructor(width, height, array) {
    super();
    this.width = width;
    this.height = height;
    for(let i = 0; i < width*height; i++) {
      this[i] = array ? array[i]:0;
    }
  }
  set(x, y, value) {
    this[x+y*this.width] = value;
  }
  get(x, y) {
    return this[x+y*this.width];
  }
  static swap(array2d) {
    const result = new Array2D(array2d.height, array2d.width);
    for(let x = 0; x < array2d.width; x++) {
      for(let y = 0; y < array2d.height; y++) {
        result.set(y, x, array2d.get(x, y));
      }
    }
    return result;
  }
  static flip(array2d) {
    const result = new Array2D(array2d.width, array2d.height);
    for(let x = 0; x < array2d.width; x++) {
      for(let y = 0; y < array2d.height; y++) {
        result.set(x, array2d.height-1-y, array2d.get(x, y));
      }
    }
    return result;
  }
  static spin(array2d) {
    const swapped = Array2D.swap(array2d);
    return Array2D.flip(swapped);
  }
}

const a2d = new Array2D(2, 2, [1, 1, 1, 0]);
console.log(Array2D.spin(Array2D.spin(a2d)));

This solution has been slightly modified for better clarity and organization.

// Code implementation with functions instead of classes (due to restrictions)
function create2D(width, height, array) {
  var arr = [];
  arr.width = width;
  arr.height = height;
  for(var i = 0; i < width*height; i++) {
    arr[i] = array ? array[i]:0;
  }
  return arr;
}

function set(array, x, y, value) {
  array[x+y*array.width] = value;
}

function get(array, x, y) {
  return array[x+y*array.width];
}

function swap(array2d) {
  var result = create2D(array2d.height, array2d.width);
  for(var x = 0; x < array2d.width; x++) {
    for(var y = 0; y < array2d.height; y++) {
      set(result, y, x, get(array2d, x, y));
    }
  }
  return result;
}

function flip(array2d) {
  var result = create2D(array2d.width, array2d.height);
  for(var x = 0; x < array2d.width; x++) {
    for(var y = 0; y < array2d.height; y++) {
      set(result, x, array2d.height-1-y, get(array2d, x, y));
    }
  }
  return result;
}

function spin(array2d) {
  return flip(swap(array2d));
}

var a1 = create2D(2, 2, [1, 1, 1, 0]);
var a2 = spin(spin(a1));

console.log(a2);

Answer 5

Answer №3

This solution is versatile and can handle rotations of both 90 degrees and -90 degrees.
A truthy value in the left parameter will rotate it by -90 degrees.
A falsey value in the left parameter will rotate it by +90 degrees.

//1 to rotate left, 0 to rotate right
function rotate(arr,left){
  var newArr=[]
  arr.forEach(function(a){newArr.push(a.toString())})
  arr=newArr //we gonna do some wild stuff so this is to not mess with the original array given to function
  arr=arr.map(function(a){return a.split``})
  var newArr=new Array(arr[0].length)
  for(var i=0;i<newArr.length;i++){newArr[i]=[]}
  arr.forEach(function(a,i){
    a.forEach(function(b,j){
      newArr[j][i]=b
    })
  })
  if(left){
    newArr=newArr.map(function(a){return a.join``})
    return(newArr)
  }
  //else(right)
  newArr.map(function(a){a.reverse()})
  newArr=newArr.map(function(a){a.join``})
  return(newArr)
}

//example 1 (-90 degrees)
console.log("example 1(-90 degrees)",rotate(["-T-","TTT"],1))
//same example but you can use truthy or falsy values not JUST 1 or 0
console.log("example 1(-90 degrees) with another truthy value",rotate(["-T-","TTT"],{a:true}))

//example 2(+90 degrees)
console.log("example 2(+90 degrees)",rotate(["-T-","TTT"],0))

Answer 6

This solution is versatile and can handle rotations of both 90 degrees and -90 degrees.
A truthy value in the left parameter will rotate it by -90 degrees.
A falsey value in the left parameter will rotate it by +90 degrees.

//1 to rotate left, 0 to rotate right
function rotate(arr,left){
  var newArr=[]
  arr.forEach(function(a){newArr.push(a.toString())})
  arr=newArr //we gonna do some wild stuff so this is to not mess with the original array given to function
  arr=arr.map(function(a){return a.split``})
  var newArr=new Array(arr[0].length)
  for(var i=0;i<newArr.length;i++){newArr[i]=[]}
  arr.forEach(function(a,i){
    a.forEach(function(b,j){
      newArr[j][i]=b
    })
  })
  if(left){
    newArr=newArr.map(function(a){return a.join``})
    return(newArr)
  }
  //else(right)
  newArr.map(function(a){a.reverse()})
  newArr=newArr.map(function(a){a.join``})
  return(newArr)
}

//example 1 (-90 degrees)
console.log("example 1(-90 degrees)",rotate(["-T-","TTT"],1))
//same example but you can use truthy or falsy values not JUST 1 or 0
console.log("example 1(-90 degrees) with another truthy value",rotate(["-T-","TTT"],{a:true}))

//example 2(+90 degrees)
console.log("example 2(+90 degrees)",rotate(["-T-","TTT"],0))

Spinning a rectangular grid with JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Transform the words in a string into an array

Resolving CORS issues: Troubleshooting communication between a React app and an Express server

Is it possible to swap out images using srcset attribute?

Vue.js - experiencing issues with conditional styling not functioning as expected

Issues with the HTML required attribute not functioning properly are encountered within the form when it is

Activate a module within a Vuex action only upon dispatching

"Within the node.js framework, the search/query section of the URL appears

Creating an Active Link in Bootstrap 5.0 (Beta 3) Navbar Using JavaScript

Exploding a key value pair and grouping matching key values into one key - here's how to do it!

I'm having trouble getting the JADE tag to render in Express script. Can anyone help me

Exploring the mechanics of an Ajax call

The behavior of Quasar's q-drawer is quite unpredictable

I can only use innerHTML once in my React application

What is the best way to implement a JavaScript pattern matching for both "aaaa" and "aaa aaa"?

Tips for hiding a soft keyboard with jQuery

Getting the checkbox count value in a treeview upon successful completion of an AJAX request

The Vue v-on:click event listener seems to be unresponsive when applied to a

Show information from an array

Ways to navigate to a new webpage in JavaScript without the need to click on a link

Bringing joy to a JS library: Embracing both Node and the Window