ThreeJS animation in 2D constant speed - following a bezier curve

Question

I have this bezier curves that represent my flow of some particles. The problem is that I cannot seem to control the speed of the object unless I add more points on the bezier curve but that is inefficient..

These are my curves.

And my code is simply (in the animate() method):

function moveParticlesAlongCurve(particles,curvePoints){
  particles[0].position.x = curvePoints[i].x;
  particles[0].position.y = curvePoints[i].y;
  i++;
}

Any ideas on how to control the speed?

Answer 1

I image moveParticlesAlongCurve is called continuously and i is defined somewhere outside, you can try incrementing i inside a setTimeout to delay the next tick, see if that helps.

    function moveParticlesAlongCurve(particles,curvePoints){
      particles[0].position.x = curvePoints[i].x;
      particles[0].position.y = curvePoints[i].y;
      setTimeout(function(){ i++; }, 1000);
    }

Answer 2

To maintain a constant speed, you should use curve.getPointAt( t ) instead of curve.getPoint( t ).

There is more detail in this answer to a related question.

three.js r.91