plz show me a more elegant way to do this

Question

To me, this is the obvious way to do this. This being : given a start point and an end point, tell me if the end point is up / down / left / upleft / downright... etc of the start point. Heres the core of the logic :

function getSector() {
    var y = startY - endY;
    var x = startX - endX;
    var angle = Math.atan2(y,x) * 57.29578;//~57 deg per radian
    //atan2(y,x) returns a num between -PI and PI, represents angle in radians
    console.log("angle:" + angle);
    if( (angle > -22.5) && (angle < 22.5) ) attackDir = "left";
    if( (angle > 22.5) && (angle < 67.5) ) attackDir = "upleft";
    if( (angle > 67.5) && (angle < 112.5) ) attackDir = "up";
    if( (angle > 112.5) && (angle < 157.5) ) attackDir = "upright";
    if( (angle > 157.5) && (angle <= 180) ) attackDir = "right";
    if( (angle > -179) && (angle <= -157) ) attackDir = "right";
    if( (angle > -157) && (angle < -112.5) ) attackDir = "downright";
    if( (angle > -112.5) && (angle < -67.5) ) attackDir = "down";
    if( (angle > -67.5) && (angle < -22.5) ) attackDir = "downleft";
    console.log("attackDir:" + attackDir);
}

Im interested in seeing a better way, but more so, HOW you arrived at that way.

I guess a key of sorts would be in order : left = 0 up = 90 right = 179 OR -179 (down is like a negative mirror of up) down = -90

Answer 1

When doing bounds checking, it's much more readable if you create a function named Between(min, val, max);

function Between(min, val, max)
{
 return (val > min) && (val < max);
}

In addition, you can test for right/left, and then after that test for down/up.. while appending to a string. Then your logic is cut down to 4 if statements.

var final="";
if(/*IsUp*/) final="up"
else if(/*IsDown*/) final="down"

if(/*IsRight*/) final+= "right";
else if(/*IsLeft*/) final += "left";

Edit: As stated by Stefan, 57.29578 is a magical number. I didn't even realize you meant 180/(Math.Pi)... As he also stated, the "optimization" you're making makes your code just illegible, and the performance gain is moot.

You should always check for u/d/l/r by x/y position relative to an origin, not by angles.

Answer 2

How about using slope?

m = dy/dx

Answer 3

Don't use angles. Also, if you're using 180/PI, just write 180/PI. You get very little speed for a huge readability impact.

var dy = endY - startY;
var dx = endX - startX;
var isUp = dy < 0;
var isDown = dy > 0;//probably use some fudge here for a better neutral zone, if you're parsing input
var isLeft = dx < 0;
var isRight = dx > 0;

This assumes a coordinate system that has (0,0) in the top left, and (n,n) in the bottom right, as in many graphics applications.

Answer 4

You might have less code by indexing a suitable array of strings ("right","downright","downright", ...) with parseInt((angle+180)/22.5).

Answer 5

if      (angle <= -157)  attackDir = "right";
else if (angle < -112.5) attackDir = "downright";
else if (angle < -67.5)  attackDir = "down";
else if (angle < -22.5)  attackDir = "downleft";
else if (angle < 22.5)   attackDir = "left";
else if (angle < 67.5)   attackDir = "upleft";
else if (angle < 112.5)  attackDir = "up";
else if (angle < 157.5)  attackDir = "upright";
else if (angle <= 180)   attackDir = "right";

Answer 6

Since the function just functions by binning the angle range [-PI, PI] in 8 equal bins, there is a simple linear mapping from the angle to a bin index. This is a general pattern for adding labels over a fixed number of equally sized bins over a fixed range.

Example:

var angle = Math.atan2(y,x) * 57.29578;//~57 deg per radian

where angle lies within range [-180, 180]. So, (angle + 157.5) / 45.0 is within [-0.5, 7.5] range, and (angle+157.5)/45.0 + 0.5 within [0.0, 8.0] range. This bins are seperated at 0.5, 1.5, 2.5 ... 7.5, so rounding the value will bring everythin at the left/right of the boundry to a correct bin index:

var bin_index = parseInt(Math.round((angle + 157.5) / 45.0 + 0.5));

Since bin 8 and bin 0 are actually the same, we use the module operator to merge these bin indices next:

bin_index = bin_index % 8; // bin_index == 8 becomes bin_index == 0 too

Now you can look up your result string using the bin index :)

var bin_labels = ['right', 'downright', 'down', 'downleft', 'left', 'upleft', 'up', 'upright'];
return bin_labels[bin_index];

EDIT: putting above lines together:

function getSector() {
    var dy = startY - endY;
    var dx = startX - endX;
    var angle = Math.atan2(dy,dx) * 180.0 / Math.PI; // we can assume -180.0 <= angle <= 180.0

    // partition angle space in 8 equal bins,
    // lowest bin should have index 0, the highest 7
    var bin_index = parseInt(Math.round((angle + 157.5) / 45.0 + 0.5));
    bin_index = bin_index % 8; // ensure bin_index == 8 -> bin_index == 0

    // return the correct bin label
    var bin_labels = ['right', 'downright', 'down', 'downleft', 'left', 'upleft', 'up', 'upright'];
    return bin_labels[bin_index];
}