get rotated top and left coordinates

Question

I want to calculate the rotation of a specific point (top and left). It's a bit complicated. I know the original top and left. Then a scaling is added and then the rotation is calculated.

At the moment i do this. (orginal left:-350, orginal top: -10, f1_scale: 0.544444, rotation angle:-30deg)

function sin(x) {
  return Math.sin(x / 180 * Math.PI);
}

function cos(x) {
  return Math.cos(x / 180 * Math.PI);
}

function rotate(x, y, a) {
  var x2 = cos(a) * x - sin(a) * y;
  var y2 = sin(a) * x - cos(a) * y;
  return [x2, y2];
}

var scaledLeft = -350 * f1_scale;
var scaledTop = -10 * f1_scale;

var rotateOut = rotate(scaledLeft, scaledTop,-30);

This works for the left (x) coordinate, but the y coordinate is way off.

Can someone see what i did wrong or did someone already tried this?

Thank you.

Answer 1

You need to understand math behind it. First, look at this image http://prntscr.com/amd2it where:

1. (x0, y0) are coordinates of starting point
2. (x1, y1) are coordinates after rotation
3. (p, q) are coordinates of point of rotation

In order to find (x1, y1) , you need to know value of (p, q) , as well as (x0, y0) and angle a. If we apply elementary geometry, we get this:

sin(a)( q - y0 ) = q - y1
y1 = q - sin(a)( q - y0 )

and

cos(a)( p - x0 ) = p - x1
x1 = p - cos(a)( p - x0 )

or you can use Pythagoras' theorem for second value.

When we understand this, I don't think it will be problem to translate it to code.