Question

I have the following method that calculates a quadrant in a square with an equal width and height divided by four triangles:

function getQuadtrant(x, y, width, height){
    if(y < width/2 && x < width-y && x > y) {

    alert('top triangle');

    }

    if(y > width/2 && x > width-y && x < y) {

    alert('bottom triangle');

    }

    if(x < height/2 && x < width-y && x < y) {

    alert('left triangle');

    }


    if(x > height/2 && x > width-y && x > y) {

    alert('right triangle');

    }
}

However, I have a div that is rectangular with a width of 249px and a height of 404px, how do I get the quadrant? With the above code in it’s current state gives an erroneous output, when I select a particular area of a triangle for example the top triangle it alerts ‘bottom triangle’.

Answer 1

I would do that in this way:

function getQ(x, y, w, h) {
    var quadrants = [
        ['left', 'top'],
        ['bottom', 'right']
    ];

    if (y > h / w * x) {
        quadrants = quadrants[0];
    } else {
        quadrants = quadrants[1];
    }

    return (y < -h / w * x + h) ? quadrants[0] : quadrants[1];
}


console.log(getQ(10, 20, 20, 20));​

This solution is pretty trivial and based on diagonal lines equations. If the y is above the main diagonal – then it’s either left or top (quadrants[0]). If the y is below the secondary diagonal – it’s left, otherwise it’s top. The same for bottom part.

http://jsfiddle.net/zerkms/aCAfw/