# How can I add a curve to my otherwise linear values?

I have built an interactive map for the Web that transitions smoothly from lon/lat point to lon/lat point. The duration of the transition is calculated dynamically and depends on the distance between the two points.

I have commented my code, shown below, to better illustrate the current set-up.

// Multiply the distance between points (given in radians)
// by the mean radius of the earth (given in kilometers) to
// give us the distance between points (in kilometers).

var distanceInKm = d3.geo.distance(fromPoint, toPoint) * 6371;

// The base speed - currently 5 kilometers per millisecond

var flySpeed = 5 / 1000;

// The duration of the transition (in milliseconds)

var flyTime = distanceInKm / flySpeed;


My problem is flyTime increases and decreases linearly. I want bring down the top end to form a curve (something that looks like the top-left quarter of a circle, maybe), so I can reduce the transition time for particularly long (~10,000km+) journeys. I am not trying to model a real flight, but create a good user experience.

Please could someone help me write an equation to do that, keeping it as simple as possible and also enlighten me as to which area of math my question covers?

Edit:
I have been exploring using the use of JavaScript's Math.log(x) function, with better results. I have been passing distanceInKm in to it to reduce the long journeys and better my transition time. Unfortunately, the curve that this function produces seems to be too harsh. For those feeling inclined, I have pasted a copy of my code, heavily commented, here: http://pastebin.com/kFkUTNC2.

Many thanks.

-

What you are looking to do requires interpolation of a higher degree (than linear). The curve you are looking for here is probably best suited to be a quadratic curve on the speed of your flight not the position. An equation of the form $speed = \alpha t^2 + 2\beta t(1-t) + \gamma (1-t)^2$ is called a Bézier curve. You could perhaps calculate the time required for the flight and then use interpolation to actually move and the time will stay the same (as the linear flight) but will be smoothed at the start and the end.
Hi Danny, thanks for taking the time to answer my question. I am not sure if Bézier is the right solution for me; I just want to produce a single duration (in ms) for my transition, which handles the movement (and interpolation) of the map already. I have heavily commented my code, which can be found at this link: pastebin.com/kFkUTNC2 P.S. I have been experimenting with JavaScript's Math.log() function, which has been giving a better result, but the upper values drop too harshly. – Check12 Jun 24 '13 at 19:22