Calculate nearest point on circle

Question

I'm trying to calculate the point marked in red (to create a line between the circle and the corner of the box)

It's a similar problem to this A JavaScript function that returns the x,y points of intersection between two circles?

However this is for 2 circles.

I know the position of both, circle radius etc, how do I calculate the nearest point to that corner on the circle?

const shapeTop =  this.shape.getAttribute('position').clone()
//I want to apply the position here


const geo = this.button.children[0].getAttribute('geometry')

if(!geo)
  return

const halfWidth = geo.width * 0.5
const halfHeight = geo.height * 0.5

const buttonEdge = {
  x: buttonPos.x + (buttonPos.x > 0 ? - halfWidth :  halfWidth),
  y: buttonPos.y + (buttonPos.y > 0 ? - halfHeight :  halfHeight),
  z: buttonPos.z,
}

Are you looking for a pure math solution? If so, then this question probably belongs on the [Math Stack Exchange site](https://math.stackexchange.com). If you are looking for a programmatic solution, then include any code you have already tried. — Tim Biegeleisen, Jun 11 '18 at 01:46
@TimBiegeleisen both. I havn't tried any code because I have no clue on how to calculate this. I'll post something on Math Stack Exchange thanks. — beek, Jun 11 '18 at 01:53
For a brute force programming solution, you may use something like binary search, where you randomly pick two points on the circle, compute the distance, and then divide again with two points based on which point is closer. — Tim Biegeleisen, Jun 11 '18 at 01:54
That doesn't sound very elegant. I'm sure there is a better approach with trig but I'm not sure how to calculate it. — beek, Jun 11 '18 at 01:56
Yes, there probably is a better way with trigonometry, but then this is really more of a math question than a programming one :-) — Tim Biegeleisen, Jun 11 '18 at 01:56
`vector.copy( corner ).sub( center ).setLength( radius ).add( center );` — WestLangley, Jun 11 '18 at 02:10
@WestLangley you are my hero. Please add this as an answer and I'll mark it correct. Tim Biegeleisen the people on Math Stack Exchange are even more eggy than some of the people on here. They're just mean! — beek, Jun 11 '18 at 02:22
@WestLangley. What about when the nearest point is to a side, not a corner? — Mad Physicist, Jun 11 '18 at 02:28
@MadPhysicist According to the problem statement, the corner is known in advance. I think this was more of a three.js question. — WestLangley, Jun 11 '18 at 04:51
@WestLangley. In that context, your answer is great. I went ahead and flipped my vote. — Mad Physicist, Jun 11 '18 at 19:21

score 3 · Accepted Answer · edited Jun 11 '18 at 19:20

3

In three.js, you can calculate the desired point like so:

var vector = new THREE.Vector3(); // or Vector2

vector.copy( corner ).sub( center ).setLength( radius ).add( center );

three.js r.93

edited Jun 11 '18 at 19:20

Mad Physicist

107,652
25
181
264

answered Jun 11 '18 at 02:51

WestLangley

102,557
10
276
276

For a counter example, imagine a circle centered directly under the rectangle. – Mad Physicist Jun 11 '18 at 03:07
huh? Works perfectly – beek Jun 11 '18 at 03:21
@user5839 What is corner in that case? – Mad Physicist Jun 11 '18 at 03:22
@user5839. I will post an answer. I think you are missing my point. No pun intended. – Mad Physicist Jun 11 '18 at 03:39

score 1 · Answer 2 · answered Jun 11 '18 at 04:49

The core question is, how to find a point on the circle which has the shortest distance to a given rectangle.

After my thought, we can split the whole 2D-plane into two areas, one is where the rectangle can be moved to by translating with the direction of its' borders, the other is where the rectangle can't be moved in that way. The first area paints like a crossing road (the colored area), and the second area is the rest of the 2D-plane (the white area).

If the center of this circle is inside the first area, then the requested point is the intersecting point of ((the circle) and (the perpendicular line from (the center of circle) to (the nearest border of the rectangle))). Else if the center is inside the second area, then the requested point is the nearest corner of the rectangle.

Update: Another thought is to consider just these 6 points: 4 is the intersection of ((the circle) and (the line between circle center and the 4 corner of rectangle)), another 2 is the intersection of ((the circle) and (the perpendicular line from (the center of circle) to (the borders of rectangle))).

I like this better than my solution of looking at all the points at once. — Mad Physicist, Jun 11 '18 at 19:18

score 0 · Answer 3 · answered Jun 11 '18 at 03:47

0

As @WestLangley's answer correctly points out, it is easy to find the nearest point of the circle, once the nearest point on the rectangle is known.

However, there are two different types of "nearest point" possibile on the rectangle: a corner or a side. The figure below illustrates both possibilities:

To determine which case you have, project the center of the circle onto each of the four lines (for example, as in this Q&A). If you do a normalized projection, a value <0 or >1 indicates that your nearest point for that segment is a corner. You are then left with the four corners and any projections that resulted in a value between 0 and 1 as candidates.

Once you have found which candidate is nearest the center of the circle, apply the accepted answer.

answered Jun 11 '18 at 03:47

Mad Physicist

107,652
25
181
264

ahh I can see your confusion. We don't need to know 'nearest' as such, it's more a point on a line between the center of the circle and the specified point on the box, i.e. the corner. I know the center of the circle, I don't need to calculate it. – beek Jun 11 '18 at 04:46
@user5839. I'm not saying you do. I'm saying you need to project it onto the box in some cases. – Mad Physicist Jun 11 '18 at 19:19
@GenoChen has a more intuitive explanation of what I am talking about. – Mad Physicist Jun 11 '18 at 19:19

Calculate nearest point on circle

3 Answers3