Rotating a rectangular array in JavaScript

Question

I am trying to make a Tetris game. I am trying to work on a function that rotates a 2D variable array 90 degrees (or -90).

For example, given an array like:

"-T-",
"TTT"

It would output:

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

I have tried this 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;
}

But it does not give the desired result. While it does rotate the first T-Block example given -90 degrees once, afterwards it reverts to it's original state.

Please help!

(PS: I am using KA's processing environment, so I can't use libraries or ES6)

What you're doing isn't gonna be Tetris. Where is the centre of rotation? It should be in the middle of the T-block, but your function's rotation isn't even centred on a mino! — Niet the Dark Absol
– Niet the Dark Absol, Commented Jan 28, 2021 at 19:16
ik he didnt explain himself properly and that wouldn't be a game of tetris but ngl.. it's a fun problem to solve.. think of looking at the set of chars with turning your head 90 degrees to the left or right.. THAT is what he/she wants — The Bomb Squad
– The Bomb Squad, Commented Jan 28, 2021 at 19:19
I think that function is a reflection over y=x not a rotation — Other Me
– Other Me, Commented Jan 28, 2021 at 19:25
Good point, @Niet... but I can add another row on the array so the center of rotation would be the middle of the array. — Paradox
– Paradox, Commented Jan 28, 2021 at 19:25
You need to reflect over y=x like you are, then reflect over y axis. — Other Me
– Other Me, Commented Jan 28, 2021 at 19:30

manaschopra98 · Accepted Answer · 2021-01-28 20:13:20Z

2

The following code is to rotate a mxn size array to -90 degree.

function rotateN90(a){

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

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

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

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

 return temp;
}

If your array is : [[1, 2,3],[4, 5, 6]]

It will rotate -90 degree and returned array will be [[3, 6],[2, 5],[1, 4]]

edited Jan 28, 2021 at 20:13

answered Jan 28, 2021 at 20:05

manaschopra98

1013 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paradox Over a year ago

I edited it so it worked in my editor, and then edited it a bit more, and then it worked! Thanks!

The Bomb Squad Over a year ago

i just came back from badminton.. IT'S THE EXACT LOGIC of my answer.. noice(that wasnt sarcastic just in case)

The Bomb Squad Over a year ago

one thing though.. u forgot to ask left or right.. so i'll put in my late answer

Other Me · Accepted Answer · 2021-01-28 20:23:09Z

1

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 should do the job, changed format though a little. Because class notation isn't allowed in khan academy here is a modified solution

//technically this one is a little unnessecary, but I like the organization
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);

edited Jan 28, 2021 at 20:23

answered Jan 28, 2021 at 19:45

Other Me

5082 silver badges7 bronze badges

8 Comments

Paradox Over a year ago

Looks like it took a lot of work! Sadly, it doesn't work in the editor I use. I use Khan Academy's Processing environment.

Other Me Over a year ago

so is it classes thats not working? cos its pure js

Other Me Over a year ago

you can just break apart the utilities i can do it if you want, it doesn't need a class

Paradox Over a year ago

Yea... For things like classes, you do var thing = function(x, y){this.x = x; this.y = y;}; thing.prototype.draw = function(){...}; I think. I don't have much experience elsewhere. But also things like static don't work. I'm pretty sure the only keywords or whatever you can use are var and function.

Other Me Over a year ago

Ok, I'll doctor it up :)

|

The Bomb Squad · Accepted Answer · 2021-01-29 00:58:39Z

1

This answer would work for flipping 90 AND flipping -90
a truthy value in the left parameter would flip it -90
a falsey value in the left parameter would flip it +90

//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))

edited Jan 29, 2021 at 0:58

answered Jan 28, 2021 at 22:35

The Bomb Squad

4,3471 gold badge13 silver badges21 bronze badges

3 Comments

Paradox Over a year ago

Khan academy doesn't let you do => and JSON... But this looks awesome anyway. I wish I could use it!

The Bomb Squad Over a year ago

well i'll make it useable then

The Bomb Squad Over a year ago

check now, @The_Paradox

Collectives™ on Stack Overflow

Rotating a rectangular array in JavaScript

3 Answers 3

3 Comments

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related