title: How to animate an object along a bezier curved path in paper.js?
body: <p>I am trying to build a small slot car racing game with paper.js and I am having trouble with moving the car-object alongside the track I created.</p>
  
  <p>I have searched for other threads, but didnt find explanations for a bezier-curved track.
  I have already drawn a racingtrack and a car. The car is positioned on the track, but it's not moving, although I implemented an onFrame-function, which should change its position.</p>
  
  <p>I am guessing that there is something wrong with <code>racingtrack.getPointAt(i*length)</code> in the onFrame-function at the bottom, but I can't figure out what.
  The code makes sense to me and above <code>racingtrack.getPointAt(offset)</code> is working.</p>
  
  <p>Could somebody please help me?
  Thanks a lot!</p>
  
  <p>Here is my code:</p>
  
  <pre><code>//DRAW A RACING TRACK
  var racingtrack = new Path();
  
  racingtrack.strokeColor='#DA0734';
  racingtrack.strokeWidth=4;
  
  var handleInTop = new Point(-90, 0);
  var handleOutTop = new Point(90, 0);
  var handleInSide = new Point(0, -90);
  var handleOutSide = new Point(0, 90);
  
  Segment1 = new Segment(new Point(230, 100), handleOutTop, handleInTop);
  Segment2 = new Segment(new Point(100, 275), handleInSide, handleOutSide);
  Segment3 = new Segment(new Point(230, 450), handleInTop, handleOutTop);
  Segment4 = new Segment(new Point(435, 450), handleInTop, handleOutTop);
  Segment5 = new Segment(new Point(765, 100), handleInTop, handleOutTop);
  Segment6 = new Segment(new Point(970, 100), handleInTop, handleOutTop);
  Segment7 = new Segment(new Point(1100, 275), handleInSide, handleOutSide);
  Segment8 = new Segment(new Point(970, 450), handleOutTop, handleInTop);
  Segment9 = new Segment(new Point(765, 450), handleOutTop, handleInTop);
  Segment10 = new Segment(new Point(435, 100), handleOutTop, handleInTop);
  
  racingtrack.add(Segment1, Segment2, Segment3, Segment4, Segment5, Segment6, Segment7, Segment8, Segment9, Segment10);
  racingtrack.closed=true;
  
  racingtrack.fullySelected=false;
  racingtrack.position = view.center;
  
  //DRAW A RACING CAR
  var racingcar = new Path();
  
  racingcar.fillColor = '#DA0734';
  
  var handleInRightCar = new Point(0, 13)
  var handleOutRightCar = new Point(0, -13)
  
  FirstCorner = new Point(100, 470);
  SecondCorner = new Point(100, 496);
  ThirdCorner = new Point(140, 496);
  FourthCorner = new Segment(new Point(145, 483), handleInRightCar, handleOutRightCar);
  FifthCorner = new Point(140, 470);
  
  racingcar.add(FirstCorner, SecondCorner, ThirdCorner, FourthCorner, FifthCorner);
  racingcar.closed = true;
  
  
  //PUT RACINGCAR ON STARTING POINT
  var offset = 0;
  var startposition = racingtrack.getPointAt(offset);
  
  racingcar.position = startposition;
  
  
  //MOVE CAR ALONGSIDE RACINGTRACK
  //set the number of parts the track is divided into
  var amount = 100;
  //calculate the length of one part
  var length = racingtrack.length / amount;
  
  //animate the car, moving from position to position alongside the racingtrack
  var carposition = new Point();
  
  function onFrame(event){
      for(var i=0; i &lt; amount+1; i++){
          carposition = racingtrack.getPointAt(i * length);
          racingcar.position = carposition;
      }
  }
  </code></pre>