1

If I have some shapes defined using arrays of coordinates e.g.

[[-30, -30], [-30, 30], [30, 30], [30, -30]]

and edges defined using:

[[0,1],[0,3],[1,2],[2,3]]

to make a square.

How do I programmatically tell the shape to rotate *at the center against an angle of 0->359 in javascript?

*Or better yet, is there a function which allows me to choose the center of rotation?

** Currently, I've managed to get the shape to circle the canvas using :

var x_rotate = Math.sin(angle * Math.PI /180);
var y_rotate = Math.cos(angle * Math.PI /180);

// for each coordinate
//add x_rotate and y_rotate if coordinate > 0 or subtract if coordinate < 0
General Grievance
  • 4,555
  • 31
  • 31
  • 45
Loveen Dyall
  • 824
  • 2
  • 8
  • 20
  • Rotating to most angles won't keep precision. Do you want to approximate? – Oliver Ni Aug 12 '17 at 09:42
  • Yes approximation is fine thanks – Loveen Dyall Aug 12 '17 at 09:42
  • This answer shows you how to rotate points https://stackoverflow.com/a/45521906/3877726 – Blindman67 Aug 12 '17 at 10:16
  • Blindman it will take me a moment to verify your comment please bare with me – Loveen Dyall Aug 12 '17 at 10:29
  • I may not have the whole picture, but if all you want is to define the rotation origin, then all you need is `ctx.translate(origin_x, origin_y); ctx.rotate(angle); ctx.translate(-origin_x, -origin_y)` https://jsfiddle.net/tj3dgg0c/ and there are [a lot of duplicates](https://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point)... – Kaiido Aug 13 '17 at 02:47
  • This won't work if there is more than 1 shape in the canvas. – Loveen Dyall Aug 13 '17 at 02:58
  • 1
    There are 50 in my fiddle ... And if you need all shapes to have its own angle and angleSpeed, this technique also works https://jsfiddle.net/tj3dgg0c/1/ – Kaiido Aug 13 '17 at 03:30

3 Answers3

8

Here you go, rotates point x, y around point centerx, centery by degrees degrees. Returns floating values, round if you need to.

To rotate a shape, rotate all the points. Calculate the center if you need to, this does not do it.

Desmos link with x as a, y as b, centerx as p, centery as q, and degrees as s

function rotatePoint(x, y, centerx, centery, degrees) {
    var newx = (x - centerx) * Math.cos(degrees * Math.PI / 180) - (y - centery) * Math.sin(degrees * math.PI / 180) + centerx;
    var newy = (x - centerx) * Math.sin(degrees * Math.PI / 180) + (y - centery) * Math.cos(degrees * math.PI / 180) + centery;
    return [newx, newy];
}
Oliver Ni
  • 2,606
  • 7
  • 29
  • 44
3

You could use a formular for rotating the point around the origin.

function rotate(array, angle) {
    return array.map(function (p) {
        function d2r(a) { return a * Math.PI / 180; }
        return [
            Math.cos(d2r(angle)) * p[0] - Math.sin(d2r(angle)) * p[1],
            Math.sin(d2r(angle)) * p[0] - Math.cos(d2r(angle)) * p[1],
        ];
    });
}
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 45));
console.log(rotate([[-30, -30], [-30, 30], [30, 30], [30, -30]], 90));
.as-console-wrapper { max-height: 100% !important; top: 0; }
Nina Scholz
  • 376,160
  • 25
  • 347
  • 392
-1

use css transition and change transform by javascript

https://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Rajesh Meena
  • 56
  • 2
  • Sorry I didn't explicitly specify I was doing this using a html canvas and the shapes are entirely abstract not html dom elements. – Loveen Dyall Aug 12 '17 at 09:48
  • The OP isn't asking to rotate an HTML element. He is asking to use JavaScript to find new coordinates. – Oliver Ni Aug 12 '17 at 09:48