Question

I originally posted a much simpler (and less helpful) question, and have edited this to be more specific.

This animation from wikipedia shows basically what I want to accomplish, however - I'm hoping to have it flipped around, where it starts progressing more towards the destination and "up" (in this image), and then arcs more directly to the end point. However, I only have access to a starting point and ending point, what I am hoping to do is be able to determine the other points by specifying a "height" (or width, whatever you want to call it), to determine how high the arc actually goes. http://en.wikipedia.org/wiki/File:Bezier_3_big.png (can't post image due to low rep)

I would like to be able to call a function with the start and end points and a height, and have it return all the points along the way of the curve.

Help or direction would be appreciated.

Was it helpful?

Solution

Without loss of generality, suppose the ending point is on the x axis and the starting point is above and to the left of the ending point.

Imagine the starting point is at the top of a cliff, and the ending point is at the bottom of a cliff. Imagine you throw a ball horizontally from the starting point, such that gravity will pull it down so that it smacks exactly into the ending point.

That curve seems to have the properties you want. It starts shallow and then increases towards the vertical as the ball accelerates.

By changing the angle at which you throw the ball initially you can make the curve more shallow at the beginning. By changing the strength of gravity you can make it more steep at the end.

Does that curve fit your needs? Finding that curve is a pretty basic physics problem.

OTHER TIPS

I have wrapped up a blog for calculating Bezier curve Angle and to determine its various points in my blog http://johnexalt.wordpress.com/2011/05/21/bezier-curve-angle-calculation-silverlight/

the code below shows how to calculate the bezier curve points at any given value of t(where t ranges from 0 to 100 % and is represented in 0- 1.

x = ((1 - t) * (1 - t) * p0.X) + (2 * t * (1 - t) * p1.X) + (t * t * p2.X); //this statement is used to determine the x coordinate of the curve.

y = ((1 - t) * (1 - t) * p0.Y) + (2 * t * (1 - t) * p1.Y) + (t * t * p2.Y);
//this statement is used to determine the y coordinate of the curve. 

x = Math.Round(x, 3);
y = Math.Round(y, 3);
angle = Math.Round(Angle(xold, yold, x, y), 3);

There was a previous article given by Carlos Femmer which helps in calculating the angle between 2 points. http://www.carlosfemmer.com/post/2006/02/Calculate-Angle-between-2-points-using-C.aspx.

You basically want a bezier curve with three control points - the start point, the end point and another point somewhere in between.

If the start point 1 is ( x1, y1 ) and the end point 2 is ( x2, y2 ) then the vector from point 1 to point 2 is ( dx = x2-x1, dy = y2-y1 ).

A point along the line by an amount along between zero and one is ( x1 + along * dx, y1 + along * dy ).

The vector ( -dy, dx ) is at right angles to the line, so if you want to go off the line by an amount above then the middle point would be ( x1 + along * dx - above * dy, y1 + along * dy + above * dx).

Vary the values of along and above until you find the sort of skewed curve you want.

Apart for the start-point and the end-point you need to describe the ”angle” or curvature of the arc. A Bezier curve can be good but they are usually implemented with longer sequences of points (as the curvature of the arc is defined by the other points in the line). Have a look at http://en.wikipedia.org/wiki/B%C3%A9zier_curve , at the bottom you can find some information about ”Quadratic curves”. I bet a quick google search will give you some implementation examples.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top