CODEWITHSUNDEEP
javascriptmathactionscripttrigonometry
kreek
kreek

Reputation: 8834

Get angle from matrix

I know a matrix [x scale, y skew, x skew, y scale, trans x, trans y], and would like to get the angle in degrees.

thanks!

Upvotes: 5

Views: 5074

Answers (3)

Behnam
Behnam

Reputation: 6459

very simple

1: get matrix and save in variable

matrix='matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)';

2: split value

var values = matrix.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');

var sin = values[1]; // 0.5

3: calc angle

var angle = Math.round(Math.asin(sin) * (180/Math.PI));

result:

function convertToAngle(matrix) {
     var values = matrix.split('(')[1],
        values = values.split(')')[0],
        values = values.split(',');

    var sin = values[1]; // 0.5

    return Math.round(Math.asin(sin) * (180/Math.PI));
}

Upvotes: 8

Wilhelm Murdoch
Wilhelm Murdoch

Reputation: 1816

I'm just gonna place this here for future reference. I went ahead and created a quick jQuery method that attempts to calculate the angle of rotation of a given HTML element. Hopefully, this will save someone the trouble I had.

https://gist.github.com/1492454

Upvotes: 2

Dancrumb
Dancrumb

Reputation: 27529

Consider the following matrix

| x_sc  y_sk  0  |
| x_sk  y_sc  0  |
| x_tr  y_tr  1  |

with sk indicating skew, sc indicating scale and tr indicating translation.

This only represents a pure rotation if all three are true

y_sk == -x_sk
y_sc == x_sc
x_sc * y_sc - x_sk * y_sk == 1

In this case, if theta is the angle of rotation, then

theta == arcos(x_sc)

This will give you the answer in radians (most likely), so you'll need to convert to degrees.

Assuming you have an object called M, representing the matrix, the properties that match my definitions above, you could do:

function toPureRotation(var M) {
    if( (M.y_sk != (-1 * M.x_sk)) ||
        (M.y_sc != M.x_sc) ||
        ((M.x_sc * M.y_sc - M.x_sk * M.y_sk) != 1)
    ) {
        return Number.NaN;
    }
    else {
        return Math.acos(M.x_sc); // For radians
        return Math.acos(M.x_sc) * 180 / Math.PI; // For degrees
    }
}

EDIT

For a pure rotation followed by (or preceded by) a scaling transform that maintains aspect ratio:

| sc   0  0 |
|  0  sc  0 |
|  0   0  1 |

Then you can us the following identity:

x_sc * y_sc - x_sk * y_sk == sc^2

This gives us

function toRotation(var M) {
    if( (M.y_sk != (-1 * M.x_sk)) ||
        (M.y_sc != M.x_sc)
      )
    ) {
        return Number.NaN;
    }
    else {
        var scale_factor = Math.sqrt((M.x_sc * M.y_sc - M.x_sk * M.y_sk));
        return Math.acos(M.x_sc/scale_factor); // For radians
        return Math.acos(M.x_sc/scale_factor) * 180 / Math.PI; // For degrees
    }
}

If you want to factor in translations, you're entering a world of hurt.

Upvotes: 4

Related Questions