tags:

views:

40

answers:

1

Hey, this just derived from Microsoft, suprise, suprise. I was just making a little util to quickly do drop shadows with CSS, and realized that it can only be duplicated in IE with filters. The Shadow filter however uses direction instead of x, y coordinates.

filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');"

any idea how to calculate the direction from x,y coordinates?

EDIT##################################33 Using the responses given and more details from this link: http://www.teacherschoice.com.au/Maths_Library/Angles/Angles.htm, I modified my code as follows:

function(x, y){
    var d = Math.atan2(x, y) * (180 / Math.PI);
    if(d < 0){ d = 180 - d; }
    return d;
}

If you pass in Horizontal Offset and Vertical Offset that you would use as X, Y respectively, you will get a degree from 0 to 359

+3  A: 

Direction is in degrees.

So

x = cos(direction)
y = sin(direction)

If you're calculator works in radians (as any sane calulator should), you can convert degrees to radians with

radians = degrees / 180 * pi

where pi = 3.14159... or Math.PI

To go the other way, use 'atan'

radians = Math.atan(y / x)

In Javascript you have a Math.atan2 function which takes y and x as parameters.

radians = Math.atan2(y, x)

radians to degrees is:

degrees = radians / pi * 180

so the result is:

direction = Math.atan2(y,  x) / Math.PI * 180
sje397
+1: Good that you mentioned atan2; that's the right thing because it is hazard-free as long as at least one of the arguments is non-zero (unlike straight atan).
Donal Fellows
Thanks. Great explanation.
Senica Gonzalez