CODEWITHSUNDEEP
graphicsthree.js
Nick
Nick

Reputation: 64

Move object along curve with custom velocity

I have a catmull-rom curve defined with a couple of control points as shown here:

img

I would like to animate an object moving along the curve, but be able to define the velocity of the object.

When iterating over the curve's points using the getPoint method, the object moves chordaly (in the image, at u=0, we are at p1, at u=0.25, we are at p2 etc). Using the getPointAt method, the object moves with uniform speed along the curve.

However what I would like to so is to have greater control over the animation, so that I can specify that the movement from p1 to p2 should take 0.5, from p2 to p3, 0.3, and from p3 to p4 0.2. Is this possible?

Upvotes: 2

Views: 818

Answers (3)

Nick
Nick

Reputation: 64

Thanks for the suggestions. The way I finally implemented this was to create a custom mapping between my time variable, an the u variable for three.js getPoint function.

I created a piecewise linear functionn using a javascript library called everpolate. This way I could map t to u such that:

  • At t = 0, u = 0, resulting in p1
  • At t = 0.5, u = 1/3, resulting in p2
  • At t = 0.8, u = 2/3, resulting in p3
  • At t = 1, u = 1, resulting in p4

T to U map picture

Upvotes: 1

Makogan
Makogan

Reputation: 9570

You have multiple options I will describe the theory and then one possible implementation.

Theory

You want to arclength parametrize your curve. Which means that an increment of 1 in the parameter results in a distance of movement along the curve of 1.

This parametrization will allow you to fully control the movement of your object at any speed you want, be it constan't linear, non-linear, piecewise...

Possible application

There are many numerical integration techniques that will allow you to arclength parametrize the curve.

A possible on is to precompute the values and put them on a table. Pick a small epsilon and starting at the first parameter value x_0, evaluate the function at x_0, x_0+ epsilon, x_0 + 2*epsilon...

As you do this take the linear distance between each sample and add it to an accumulator. i.e travelled_distance += length(sample[x], sample[x+1]).

Store the pair in a table.

Now when you are at x and want to move y units you can round x to the nearest x_n and linearly look for the first x_n value whose distance is greater than y and then return that x_n.

This algorithm is not the most efficient, but it is easy to understand and to code, so at least it can get you started.

If you need a more optimized version, look for arc length parametrization algorithms.

Upvotes: 0

Mugen87
Mugen87

Reputation: 31036

However what I would like to so is to have greater control over the animation, so that I can specify that the movement from p1 to p2 should take 0.5, from p2 to p3, 0.3, and from p3 to p4 0.2. Is this possible?

You can achieve this by using an animation library like tween.js. In this way, you can specify the start and end position of your object and the desired duration. It's also possible to customize the type of transition by using easing functions.

Upvotes: 0

Related Questions