CODEWITHSUNDEEP
javascriptalgorithmcanvasdrawinggraph-algorithm
moey
moey

Reputation: 10887

Algorithm to Move / Rotate Points

What is the algorithm to move / "rotate" a point in the (x, y) coordinate by x degrees relative to (0, 0)? For example, in the picture below, I want to move point A to B, by x degrees; the distance between A and (0, 0) should be the same between B and (0, 0).

I need to do in a front-end environment i.e. JavaScript.

enter image description here

Upvotes: 1

Views: 850

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63820

To help with a lot of Canvas (or just JavaScript) transformations I made a small Transformation class that can apply any kind of arbitrary transformation (Rotation, scale, translation) to a given point.

This is very useful when you need math to mimic the transformation matrix on the Canvas.

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

To rotate a point with it you'd do:

var t = new Transform();
t.rotate(5); // some number of radians
t.transformPoint(ax, ay); // returns [bx, by]

Upvotes: 0

Mark Ransom
Mark Ransom

Reputation: 308216

B.x = A.x * cos(x) - A.y * sin(x)
B.y = A.x * sin(x) + A.y * cos(x)

x is assumed to be in radians, you must convert otherwise.

Upvotes: 5

Related Questions