在Javascript中找到圆与线的相交点

Question

I'm trying to animate a given element to go around a pre-defined radius and I'm having trouble getting the position of the element at a Y point given.

I'm trying to find each point with the circle equation, but I can only get one point out of the two possible ones.

In Javascript, I use Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2) to get the point. assuming the center of the of the circle is 0,0. but then I need to translate it to pixels on the screen since there are no negative pixels in positions on the browser.

All the sizing is relative to the window. so the radius, for example, is 80% of the height of the window in my tests.

Also, I'm trying to calculate what the distance of the element between each frame should be for the duration, but I'm not using it yet because I try to fix the issue above first.

This is what I have(a cleaned up version):

let height = window.innerHeight * 0.8,
    radius = height / 2,
    circumferance = (radius * 2) * Math.PI,
    container = document.getElementById('container'),
    rotating = document.querySelector('.rotating'),
    centerX = radius - (rotating.offsetWidth / 2),
    centerY = radius - (rotating.offsetHeight / 2),
    duration = 10,
        stepDistance = circumferance / 16;

// Setting the dimensions of the container element.
container.style.height = height + 'px';
container.style.width = height + 'px';

// return positive X of any given Y.
function getXOffset(y) {
    return Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2);
}

// Setting the position of the rotating element to the start.
rotating.style.top = 0 + 'px';
rotating.style.left = centerX + 'px';

setInterval(() => {
  let top = parseInt(rotating.style.top),
        y = radius - top;

    rotating.style.top = (top + 1) + 'px';
    rotating.style.left = (centerX + getXOffset(y)) + 'px';
}, 16);

Here is a fiddle with a bit more code for trying to get the right amount of distance between points for a smoother animation(currently needs fixing, but it doesn't bother me yet.) https://jsfiddle.net/shock/1qcfvr4y/

Last note: I know that there might be other ways to do this with CSS, but I chose to use javascript for learning purposes.

Answer 1

Math.sqrt would only return the positive root. You'll have to account for the negative value based on the application. In this case, you need the positive x value during the 1st half of the cycle and negative during the 2nd half. To do that, you should implement a method to track the progress and reverse the sign accordingly.

Here is a sample . I modified upon yours.

edit:

Instead of Math.sqrt( Math.pow(radius, 2) - Math.pow(y, 2) , 2) You can use the full formula to get x if you do not want to assume origin as center, which in this case is Math.sqrt( Math.pow(radius, 2) - Math.pow((actualY - centerY), 2) , 2)

explanation:

The original equation (xa)² + (y'-b)² = r² becomes x = √(r² - (y'-b)²) + a

Assuming .rotating box have 0 width and height.

The variable equivalents in your code are centerX = a , centerY = b . By assuming origin as center you're basically doing a pre-calculation so that your y value becomes the equivalent of (y'-b) . Hence x = √(r² - y²) + a is valid.

At initial state top = 0

ie (y'-b) => height - centerY . In your code y = radius => height/2 . Now (height - centerY) being equal to (height/2) is a side effect of your circle being bound by a square container whose height determines the y value.

In other words, when you use origin as center, you are taking the center offsets outside of circle equation and handling it separately. You could do the same thing by using the whole formula, that is, x = √(r² - (y'-b)²) + a