How to rotate shape?

Question

What I've got so far:

I'm able to draw shapes into a canvas using some simple syntax:

let shape = "10n10" // example shapeSyntax (*)



shapeSyntax:  "1" == "colored area"
              "0" == "blank area"
              "n" == "new line"


* So creating a simple line (width = 4, height = 1) is possible using the syntax "1111"
* Creating a square (width = 2, height = 2) is possible using the syntax "11n11" (n stands for new line)
* Creating a stair -shape would be possible using the syntax "001n011n111"

---

This is working really good so far. So I've added the code so you can have a look at your own:

What I'd like to get:

I'd like to develop a function rotate(degree) that is able to rotate the syntax ( not just the canvas element or something else!!! ) of any shape around [90, 180, 270] degrees.

So rotating a line with syntax "1111" about 90deg should get "1n1n1n1":

rotate("1111", 90) // == "1n1n1n1"

Please have a look at this image, I'm pretty sure it will help to understand:

---

What I've noticed is that rotating any shape around 180deg the syntax could just be changed by reading it backwards: "1011" gets "1101" . But how can I get the syntax from 0->90deg ? I got no idea how so any help how to solve this would be really appreciated. Thanks in advance.

 // This is what I've got // The 4 shapes where // "1" == "colored area" // "0" == "blank area" // "n" == "new line" let shapeA = "1111" let shapeB = "10n11" let shapeC = "111n011" let shapeD = "00111n11100" // This is the function to draw the shapes using *canvas* let drawShape = function(shape, offset) { shape = shape.split("n"); let shapeHeight = shape.length, shapeWidth = shape[0].length; let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); canvas.width = canvas.height = 300; ctx.fillStyle=["red", "green", "blue", "gray", "magenta", "orange", "yellow"][Math.round(Math.random()*6)]; for (let y=0; y<shapeHeight; y++) { for (let x=0; x<shapeWidth; x++) { if (shape[y][x] === "1") ctx.fillRect(x*20, y*20, 20, 20); } } canvas.style.position = "absolute"; canvas.style.left = offset + "%"; document.getElementById("element").append(canvas) } // This is how I'm able to call the function (the second parameter is for the offset of the position) drawShape(shapeA, 0); drawShape(shapeB, 20); drawShape(shapeC, 40); drawShape(shapeD, 60); 

 input { position: absolute; top: 50%; z-index: 4 } 

 <input type="text" oninput="document.getElementById('element').innerHTML = ''; drawShape(this.value, 10)" placeholder="input shape syntax"/> <div id="element"></div> 

Answer 1

Convert into a 2D array, rotate (transpose) that and convert back.

Edit: Thanks meowgoesthedog, transpose doesn't mean what I thought it meant.

var rotate = array => array[0].map( (col, i) => array.map(row => row[i]).reverse() );
var decode = str => str.split('n').map( s => s.split('') )
var encode = arr => arr.map( a => a.join('') ).join('n')

encode( rotate( decode( '01n00' ) ) )