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, Sep 24 '14 at 22:37
here it is : http://jsiso.com/tutorials/isometric-engine-basics.html thank you for helping me — Mattheus Wigbald, Sep 25 '14 at 23:36

score 0 · Accepted Answer · answered Oct 23 '14 at 03:34

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.

thank you a lot my main difficulty was this damn enclosure x) i'm not used to this . http://www.geekbros.tk/~sivmatt/mapiso/?size=50 — Mattheus Wigbald, Nov 15 '14 at 17:19

score 0 · Answer 2 · answered Apr 28 '19 at 12:22

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

matrix rotation in javascript via a html button

2 Answers2