CODEWITHSUNDEEP
javascriptcanvas
Canser Yanbakan
Canser Yanbakan

Reputation: 3870

Calculate percentage of a circle from center to out on click

I want to get the percent radius of an arc (circle).

The idea is, on click event on the canvas, find the element that collide with click point. I did it, there is no problem to find the element that collide.

Bu i want to calculate if an element's type is a circle, calculate the collide percentage from center of the arc to the outside.

enter image description here

The code below is for collision detection.

if(element.type == "circle") { // circle detection
    let dx = x - element.left,
        dy = y - element.top,
        dist =  Math.abs(Math.sqrt(dx * dx + dy * dy));

    if (dist <= element.width / 2) {
        collision = {
            hitTo: // calculate percentage???,
            object: element
        };
    }
}

I don't know how to do this. Can you help?

Upvotes: 0

Views: 262

Answers (1)

Faly
Faly

Reputation: 13346

Ensure you have x and y position from the center of the circle (not from the top-left) then you can calculate the percentage by using inverse tangent trigonometric function. 

var x = 0.5;
var y = 0.5;
var angle = Math.atan(y/x);
var percentage = 100 * angle / (2 * Math.PI);
console.log("Percentage: ", percentage);

For example, with both x and y set to 0.5, you get percentage equal to 12.5

Upvotes: 1

Related Questions