3

I have an application where we want to create an animated route based on recorded points. I have an example that use the google maps driving directions, however, we already have points and they are not really on mappable roads.

I have animated the points I have already, but it's kind of choppy. If I could interpolate some points between then I could create smoother animation.

I have location and time stamps for each so I could use that to determine how many points I want in between (for speed).

I am using google maps at the moment, but I don't really want to depend on too many specific google api calls because eventually I want to run this using something open source and stand alone (for demos off network).

Thanks

Improve this question
4
  • An image might help int his scenario... is your question how to come up with the points in between 2 points? Not sure of what your question is but i will post an example of good animation map like you described.
    – CaptDragon
    Commented Apr 12, 2011 at 12:58
  • I have the animation figured out. Is works like the filter-stratgy sample noted below. My problem is I only have 20 points and some of them are very far apart and I want to create some in between points to make it smoother.
    – Bill Leeper
    Commented Apr 12, 2011 at 13:40
  • In that case, i won't be of much help. I can help with the animation, but i have a math disorder :p.
    – CaptDragon
    Commented Apr 12, 2011 at 13:49
  • A program I developed could meet your need : alexisathlani.com/programs/indianajones.html 1) Upload your array of points --> [0,0],[1,1] etc... 2) Use the "densify" option (input on the right) to interpolate more points between your points. 3) Download the output (download coordinates). If your points come from google maps you might have to invert the latitude and longitude values before uploading them though.
    – Alexis_A
    Commented Jun 2, 2016 at 18:24

3 Answers 3

Reset to default
4

You have a variety of strategies -- in general, you can think of your points as a set of constraints: at time t, the displayed point must be at (x,y) on the screen. What happens between constrained times is up to you. ;)

Note: I'm assuming that you're interested in interpolating on the plane -- that is, you're not doing airplane routes (or other long distances) that must be great circles.

The simplest interpolation is linear: Between points p0 and p1 at times t0,t1 respectively, you can generate the point p for any time between t by:

dt = (t - t0) / (t1 - t0) // fraction of time elapsed between t0 & t1
p.x = p0.x + ( dt * (p1.x - p0.x) )  // the point's x is that same fraction between x0 and x1
p.y = p0.y + ( dt * (p1.y - p0.y) )  // ditto, y.

However, there's a lot of complication you can add, if you want to make things even "smoother". Some examples:

  • Constrain and interpolate travel speed as well as position.
  • Ditto, velocity vectors (that also incorporate direction of travel as well as speed -- this is how bezier curves work, by the way).
  • Easing, which is a nonlinear transformation of 'dt' -- lets animations e.g. accelerate at the beginning and decelerate at the end.
Improve this answer
3
  • +1 Good explanation. Easing would be cool, maybe someone could be convinced to provide a web service to do eased interpolation. gis.stackexchange.com/questions/8208/…
    – Kirk Kuykendall
    Commented Apr 12, 2011 at 16:55
  • @Kirk -- an library would make more sense than a web service. If smooth animation is your goal, you want to interpolate as quickly as the view can be updated. (And by no coincidence, libraries that support animation like jQuery already have interpolation & easing built in....)
    – Dan S.
    Commented Apr 13, 2011 at 18:15
  • I didn't know jQuery supported easing. I would think it would be interesting to have a method would accept a sparse GPX file and return a densified one that honors easing. Maybe not so much for autos as for flight paths.
    – Kirk Kuykendall
    Commented Apr 13, 2011 at 18:26
3

Google Maps

Mike Williams Car Trip - Animate between two locations

http://econym.org.uk/gmap/example_cartrip3.htm

can be modified to leave a traced line..

another example Harry Potter (marauder) http://www.findvej.dk/marauder?lat=37.73811&lng=-122.44846

Improve this answer
2
  • I started with the cartrip example, it's a really neat implementation for animating a route
    – Bill Leeper
    Commented Apr 13, 2011 at 14:06
  • would be good to see it working when your happy with the work. update your original post with the public url if you can make it available.
    – Mapperz ♦
    Commented Apr 13, 2011 at 17:52
2

Maybe this will help. OpenLayers

http://openlayers.org/dev/examples/filter-strategy.html

Improve this answer
2
  • That's the general look, the demo already has a smooth set of points in the KML file. I have 20 randomly spaced and somewhat far apart points. I need to fill in the gaps with some new points
    – Bill Leeper
    Commented Apr 12, 2011 at 13:39
  • In that case, i won't be of much help. I can help with the animation, but i have a math disorder :p
    – CaptDragon
    Commented Apr 12, 2011 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.