Multi tool use

How to rotate shape?

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.

rotate(degree)

[90, 180, 270]

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

90deg

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.

"1011" gets "1101"

0->90deg

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

1 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' ) ) )


str.spilt

var encode = arr => arr.map( a => a.reverse().join('')).join('n')

rotate

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.