CODEWITHSUNDEEP
javascriptmath
Sir
Sir

Reputation: 8280

Detect mouse is near circle edge

I have a function which gets the mouse position in world space, then checks to see if the mouse is over or near to the circle's line.

The added complication how ever is the circle is transformed at an angle so it's more of an ellipse. I can't see to get the code to detect that the mouse is near the border of circle and am unsure where I am going wrong.

This is my code:

function check(evt){
    var x = (evt.offsetX - element.width/2)  + camera.x; // world space
    var y = (evt.offsetY - element.height/2) + camera.y; // world space

    var threshold = 20/scale; //margin to edge of circle

    for(var i = 0; i < obj.length;i++){
       // var mainAngle is related to the transform
       var x1 = Math.pow((x - obj[i].originX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);
       var y1 = Math.pow((y - obj[i].originY),2) / Math.pow((obj[i].radius + threshold) * mainAngle,2);
       var x0 = Math.pow((x - obj[i].originX),2) / Math.pow((obj[i].radius - threshold) * 1, 2);
       var y0 = Math.pow((y - obj[i].originY),2) / Math.pow((obj[i].radius - threshold) * mainAngle, 2);               

        if(x1 + y1 <= 1 && x0 + y0 >= 1){
            output.innerHTML += '<br/>Over';
            return false;
        }
    }
    output.innerHTML += '<br/>out';
}

To understand it better, I have a fiddle here: http://jsfiddle.net/nczbmbxm/ you can move the mouse over the circle, it should say "Over" when you are within the threshold of being near the circle's perimeter. Currently it does not seem to work. And I can't work out what the maths needs to be check for this.

Upvotes: 0

Views: 127

Answers (1)

Plopperzz
Plopperzz

Reputation: 334

There is a typo on line 34 with orignX

   var x1 = Math.pow((x - obj[i].orignX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);

should be 

   var x1 = Math.pow((x - obj[i].originX), 2) / Math.pow((obj[i].radius + threshold) * 1,2);

now you're good to go!

EDIT: In regards to the scaling of the image and further rotation of the circle, I would set up variables for rotation about the x-axis and y-axis, such as

var xAngle;
var yAngle;

then as an ellipse can be written in the form

x^2 / a^2 + y^2 / b^2 = 1

such as in Euclidean Geometry,

then the semi-major and semi-minor axes would be determined by the rotation angles. If radius is the circles actual radius. then 

var semiMajor = radius * cos( xAngle );
var semiMinor = radius;

or

var semiMajor = radius;
var semiMinor = radius * cos( yAngle );

you would still need to do some more transformations if you wanted an x and y angle.

so if (xMouseC, yMouseC) are the mouse coordinates relative to the circles centre, all you must do is check if that point satisfies the equation of the ellipse to within a certain tolerance, i.e. plug in

a = semiMajor;
b = semiMinor;
x = xMouseC;
y = yMouseC;

and see if it is sufficiently close to 1.

Hope that helps!

Upvotes: 1

Related Questions