0

I two concentric circles on the screen and I want the circle on the inside to move around while the user drags their finger around the outside of the larger circle. This means that I have two point, center of the larger circle and the point at which the user touched. How do I calculate where the center of the smaller circle should be?

Mike
  • 42
  • 6
  • 1
    Uhm, I think we're going to need more clarification on how the circles behave. So you have circles, which is nice, but we don't know how they move or how they're supposed to react to touch and drag. – Malaxeur Nov 08 '09 at 00:44
  • 4
    Are you sure you mean "concentric circles"? Cause, that means that the two circles have the same center; there's no moving of the inner circle.. – saleemshafi Nov 08 '09 at 00:54
  • This question sounds *really* familiar, but I can't find the duplicate. :-/ – Sixten Otto Nov 08 '09 at 02:01

2 Answers2

3

Ok, if you're drawing a persons eyes it is a completely different matter.

If we start with the following values

  • re: the radius of the eye
  • rp: the radius of the pupil
  • p1 = (x1, y1): the coordinates of the center of the eye
  • p2 = (x2, y2): the coordinates of the users touch
  • v1 = [x3; y3]: the direction vector between p1 and p2.
    • x3 = (x1 - x2)
    • y3 = (y1 - y2)
  • l = sqrt((x3)^2 + (y3)^2): the length of v1

Then do the following steps

  1. Check if the user is touching within re - rp of the middle of the eye (i.e. l < (re - rp)), it he/she is draw the pupil at p2 and do no more.
  2. Otherwise draw the pupil at x coordinate (re - rp) * x3 / l + x1 and y coordinate (re - rp) * y3 / l + y1

If you have more than one eye, just repeat the steps for the other ones.

I certainly hope you understand what I mean by this, if you don't just ask away.

ase
  • 13,231
  • 4
  • 34
  • 46
  • Almost there. For some reason the pupil is on the opposite side of the eye. Meaning, if i'm touching on the outside of the eye in the top right, the pupil is being drawn in the bottom left. – Mike Nov 08 '09 at 05:12
  • Now that my brain started to function again I'm wondering if this is because of the strange coordinate system that the iPhone has. 0,0 in top left with positive numbers below. Thanks for the help, I'll start back at it tomorrow. – Mike Nov 08 '09 at 05:24
  • Fixed it by swapping the calc in the direction vector. Is there a name for the formula you defined in #2? Thanks for all the help. – Mike Nov 08 '09 at 05:56
  • Yes flipping the calculations in the vector will fix it. I was thinking in terms of a "normal" coordinate system but computers start with (0, 0) in the top left corner right. I think it will work , atleast. The formula in (2) has no specific name. When i divide ``x3 by `l` i find the unit length. – ase Nov 08 '09 at 08:42
1

I don't really get what you're asking for, try being more specific. Where is the center of the inner circle supposed to be?

Is it supposed to be at the midpoint between the outer circle's center and the point where the user touched?

In that case it is pretty simple. Finding the middle of the line is pretty simple. If you have the coordinates (x1, y1) and (x2, y2). The x coordinate of the midpoint is x1 + (x2 - x1) / 2 and the y coordinate is y1 + (y2 - y1) / 2.

(I'm ignoring your mention of concentric circles since it didn't seem like that was what you were looking for.)

ase
  • 13,231
  • 4
  • 34
  • 46
  • Sorry, I'm drawing a persons eyes. I want the pupil of the eye (inner circle) to move as the user drags his finger. (Like the eye is looking at the touch point) So i'm trying to find the location of where I should draw eye in relation to where the user touched. – Mike Nov 08 '09 at 01:18
  • Its useful, But if i want to show point between two points but near by second no. of point. – Solid Soft Jun 08 '12 at 09:18