matrix rotation in javascript via a html button

Question

( i'm not english but i'll try my best to explain )

i have some issues to rotate a matrix after a click on a button i tried this How to rotate a matrix in an array in javascript but i failed to adapt it to my code .

so here is my html button :

<script type="text/javascript" src="genmap.js"></script>
<button onclick="rotate()">Tourner -></button>
<div style="display:auto;">
<canvas id="main" height="2000" width="5000"></canvas>
</div>

and my matrix ( square ) is randomly generated and look like this :

var map = [];
for(var i=0; i < size; i++) {
    map[i] = new Array(size);
}
for(var j = 0; j < size; j++){
    for ( var i = 0; i < size ; i++){
        map[j][i] = Math.floor ( Math.random() * 2 );
    }
}

i use a tuto for canvas , and my script begin with

(function main(isometric) {

and end with

})(this);

i don't know if i should put my function rotate in or out ...

neither how to trigger it with a click on " tourner -> "

i think i need to duplicate ( and rename ) my script but with map2 instead of map and change the random generation with the rotation from map , but i don't even know if it's possible :/

i tried this

for(var j = 0; j < size; j++){
    for ( var i = 0; i < size ; i++){
        maproteun[i][j] = map[size-i][j];
    }
}

after the map generation but for some reason , it stop the creation of the first matrix and don't even draw the map

can you please help me ?

EDIT : things are moving i'm able to clear the canvas , but i'm unable to reload the function ( or it doesn't work ) to redraw one i use clearRect to clear it , but if i write

main();

it don't redo the function

Do you have the code of the canvas tutorial? I can help but I think the error may be on the way you call the function. — Chubas
– Chubas, Commented Sep 24, 2014 at 22:37
here it is : jsiso.com/tutorials/isometric-engine-basics.html thank you for helping me — Mattheus Wigbald
– Mattheus Wigbald, Commented Sep 25, 2014 at 23:36

Iain Hamilton · Accepted Answer · 2014-10-23 03:34:27Z

0

Without access to your source it's kind of hard to guess where it could be tripping up within the code. From your description it sounds like you have the clear working when you click rotate button however there is no further drawing.

Did you check for syntax errors in the console? Chrome Menu > More Tools > JavaScript Console.

I've written up a simple sample here using the original source of the tutorial (minus the enclosure) and added a Rotate button: http://jsfiddle.net/goet30ww/2/

Apart from the clearRect which you added, before the drawing loops, I also added a rotate function:

function allowRotate() {
    // Display the rotate button once images have loaded and map is drawn
   var rot = document.getElementById("rotate")
   rot.style.visibility = "visible"

   // On click rotate map and redraw
   rot.addEventListener("click", function(e) {
       var maproteun = [];
       var size = map[0].length;
       for (var j = 0; j < size; j++) {
           maproteun[j] = [];
           for ( var i = 0; i < size ; i++) {
               maproteun[j][i] = map[size - i - 1][j];
            }
        }
       map = maproteun;
       drawMap();
   });
}

Thanks.

answered Oct 23, 2014 at 3:34

Iain Hamilton

161 bronze badge

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

1 Comment

Mattheus Wigbald Over a year ago

thank you a lot my main difficulty was this damn enclosure x) i'm not used to this . geekbros.tk/~sivmatt/mapiso/?size=50

Naveen Ramakrishna · Accepted Answer · 2019-04-28 12:22:14Z

0

const matrix = [
                [1,2,3],
                [4,5,6],
                [7,8,9]
               ];

const rotateMatrix =  (arr, col) => arr.map( row => row[col]);

/* matrix[0] - is to check on the column length for any N * N rotation */

const clockWise = matrix[0].map((row,i) => {
  return rotateMatrix(matrix, i).reverse();
                      
});
console.log('CLOCK WISE');
console.log(clockWise);
console.log('**********************************');

const antiClockWise = matrix.map((row,i) => {
  return rotateMatrix(matrix, matrix.length -1 -i).reverse();
                      
});

console.log('ANTI CLOCK WISE');
console.log(antiClockWise);

answered Apr 28, 2019 at 12:22

Naveen Ramakrishna

1232 silver badges9 bronze badges

Collectives™ on Stack Overflow

matrix rotation in javascript via a html button

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related