find an edge point of ellipse

Jazzua · #1 $Old$ July 1st, 2009, 10:39 AM

Hi there,

I'm a software developer who started in business software and has been working in flash games for a while. I have recently started learning more about dynamic animation and the drawing api in action script. Unfortunately i'm still pretty new to a lot of the math concepts involved in things like inverse kinematics, and even more simply, the problem of this post which is how to draw ears on a cats head.

explanation: I'm creating a model of a cat for a game, using inverse kinematics, with a seperate class (or inheritedclass for some) each segment. i.e. Head/Torso/Upper leg/ forleg etc. so then i can pin these together and give them properties etc. and create a dynamically animated cat.

Working on the head I want to draw ears (triangular shape) onto a simple oval head shape.

so I have an oval. I know its width, height and the x,y of its center point (relative to the stage)

the image will be rotated to be at an angle which i know the degrees of:

what i want to be able to do is check wether a given x,y co-ordinate intersects the circumference of the circle. or figure out all points (x,y) that make up the circumference. pretty much i want the base of the ears to touch perfectly without overlap the cat "skull" (oval). So in the picture below i would have needed to know that point A and B were both on the circumference of the circle to be able to draw the ear there with code:

does anyone know a formula/s that could help me with this. Thanks very much for any help anyone can give in advance. This is my first post on this site so if I've inadvertantly made a complete fool of myself with a stupid question i apologise for that in advance as well

~ Jazz

shawsend · #2 $Old$ July 1st, 2009, 03:32 PM

Hey Jazz. That's an interesting problem in analytic geometry. Here's how I'd write it from that perspective although this may not be what you want:

Given an ellipse and a point on the ellipse (red dot below), place a triangle of height one and base one which is normal to the point with the additional stipulation that the legs of the triangle then be extended down to the arc of the ellipse. Then rotate such figure through an angle $\alpha$ .

Tell you what, just for historical records, I'll post my really messy Mathematica code for doing this and rotating it $\pi/4$ . I don't think it's what you want though and Mathematica has built-in functions for doing the transformations but I coded them manually just for fun.

Code:

max = 4; 
min = 3/2; 
myX = 3; 
myY = Sqrt[min^2*(1 - x^2/max^2)] /. x -> myX; 
point1 = Graphics[{Red, Point[{myX, myY}]}]; 
dev = D[Sqrt[min^2*(1 - x^2/max^2)], x] /. x -> myX; 
ndev = -dev^(-1); 
a = Sqrt[1/(1 + ndev^2)]; 
b = a*ndev; 
x1 = Sqrt[1/(4*(1 + dev^2))]; 
y1 = x1*dev; 
f1[x_] := (((myY + y1) - (myY + b))/((myX + x1) - (myX + a)))*
     (x - (myX + a)) + myY + b; 
f2[x_] := (((myY + b) - (myY - y1))/((myX + a) - (myX - x1)))*
    (x - (myX - x1)) + myY - y1
e1[x_] := Sqrt[min^2*(1 - x^2/max^2)]; 
xpt = N[x /. First[Solve[f1[x] == e1[x], x]]]
ypt = e1[xpt]; 
rline = Graphics[Line[{{myX + a, f1[myX + a]}, 
      {xpt, f1[xpt]}}]]; 
frotate[x_, y_, a_] := {x*Cos[a] - y*Sin[a], 
    x*Sin[a] + y*Cos[a]}; 
newrline = Graphics[Line[{frotate[myX + a, f1[myX + a], 
       alpha], frotate[xpt, f1[xpt], alpha]}]]; 
xpt2 = N[x /. First[Solve[f2[x] == e1[x], x]]]; 
ypt = e1[xpt2]; 
lline = Graphics[Line[{{myX - x1, f2[myX - x1]}, 
      {myX + a, f2[myX + a]}}]]; 
newlline = Graphics[Line[{frotate[myX - x1, f2[myX - x1], 
       alpha], frotate[myX + a, f2[myX + a], alpha]}]]; 
newpoint = Graphics[{Red, Point[frotate[myX, myY, alpha]]}]; 
c1 = ContourPlot[x^2/max^2 + y^2/min^2 == 1, {x, -5, 5}, 
    {y, -5, 5}, PlotRange -> {{-5, 5}, {-5, 5}}, 
    Axes -> True]; 
firstplot = Show[{c1, rline, lline, point1}]
alpha = Pi/4; 
c2 = ContourPlot[(x*Cos[alpha] + y*Sin[alpha])^2/max^2 + 
     ((-x)*Sin[alpha] + y*Cos[alpha])^2/min^2 == 1, 
   {x, -5, 5}, {y, -5, 5}, PlotRange -> {{-5, 5}, {-5, 5}}, 
   Axes -> True]
secondplot = Show[{c2, newrline, newlline, newpoint}]
Show[{firstplot, secondplot}]

Jazzua · #3 $Old$ July 1st, 2009, 10:27 PM

Hey Shaw,
Thanks heaps for your reply. I think you may have answered my next question. But I don't think I was very clear with my question in the first place which has probably led to misunderstanding ( i did post it at 4am aussie time last night

).

You said:

Quote:

Given an ellipse and a point on the ellipse (red dot below), place a triangle of height one and base one which is normal to the point with the additional stipulation that the legs of the triangle then be extended down to the arc of the ellipse. Then rotate such figure through an angle .

now that is an interesting question, and may in fact be very useful to what I want to do. But so far i haven't got as far as

Quote:

given... a point on the ellipse

. Which is what I was trying to get to in my original post.

So here's another way of asking it, actually sorry, its a bit of a different question, but it just came to me.

I have an ellipse. I draw a cross hair in this to form 4 right angled triangles. I know their dimensions because I know the width/height of the ellipse. What I want to know is if you take a line out from the right angle of the top right triangle and extend it out, forming an acute angle, when will it hit the perimeter of the ellipse? What will the x,y co-ordinates of this intersection point be assuming that the centre point of the ellipse is 0,0.

because I'm drawing a figure using code, i need a way for the code to know where to start drawing a line so that it intercepts the head (ellipse).

Jazzua · #4 $Old$ July 2nd, 2009, 01:04 AM

ok.... i found an equation that does what i want. but only for a circle.
here is the equations to find a points x,y so that it is always located on the perimeter of a circle.

x = centerX + cos(angle) * radius;
y = centerY + sin(angle) * radius;

and here's some actionscript 3 code to accomplish this, if anyone else stumbles across this looking for the same thing as me. maybe this'll help:

Code:

//this line just turns degrees into radians. it is a custom method with one line:
//return degrees * Math.PI / 180;
//i used 30 degrees, but this was just chosen at random. put in the degrees you want.
			
var angle:Number = inRadians(30);

//head in the following line is just an ellipse of which i want to find a point
//on the perimeter of. Also these lines are there because the x,y of an ellipse
//drawn in flash is by default the upper lefgt hand corner. 
//(imagining there's a box around the ellipse)
			
var centerX:Number = head.x + (head.width / 2);
var centerY:Number = head.y + (head.height / 2);
			
//this is the problematic line for calculating all this for an ellipse. 
//As the radius is different at different angles.
			
var radius:Number = head.width / 2;
			
//neck in the below lines is the point you are drawing on the perimeter of head.
			
neck.x = centerX + Math.cos(angle) * radius;
neck.y = centerY + Math.sin(angle) * radius;

anyone know where to go from here to get it working for an ellipse?

Jazzua · #5 $Old$ July 2nd, 2009, 01:51 AM

ok... i figured it out

x = centerX + xradius * cos(angle) ;
y = centerY + yradius * sin(angle) ;

in as3:

Code:

 
neck.x = centerX +  (head.width / 2) * Math.cos(angle);
neck.y = centerY +  (head.height / 2) *Math.sin(angle);