How to tell when Canvas animation ends

Question

I am trying to be able to tell when each part of a Canvas animation comes to an end, so that I can reload it.

Each 'pod' should reach the end of its first journey, and then go to a random one of the next available stations, and then do it again in an endless loop (or a very long one).

Right now the code for finding the next station works, but I cannot get the trigger for the end of the animation of each individual pod. I know that when

 aPod.currentPoint + 1 == aPod.points.length - 1

the pod has reached its destination station, but nothing then happens.

Fiddle here: https://jsfiddle.net/f9nob149/1/

I have been banging my head against this for a week, and really need help!

Answer 1

It seems that you just have to check when your currentPoint is the last point of the pod's points .

Here is a jsfiddle where I created the doneCallback . I also had to add the done pod property so that it is not called several times.

By the way, this is horrible and does not do what I think you think it does:

new Pod(
  startX = fromX,
  startY = fromY,
  endX = toX,
  endY = toY,
  riders = randomPass(),
  color = colorArray[riders - 1],
  points = linePoints({
    startX, startY
  }, {
     endX, endY
  }),
  currentPoint = 0)

JavaScript does not support named arguments like python for example does. What this is doing, is assigning all the values at the right of the = to new variables created on the global scope (because they are declared without var ), then forward these values to your Pod constructor in order (and not by what you may think is names). Also some browsers will refuse it (ie Safari), and it is not allowed in strict mode (nor with next javascript version (ES6) I think).

What you can do however is use an objet as argument:

function Pod(args){
  this.startX = args.startX;
  this.startY = args.startY;
  // Etc.
}

var pod = new Pod({
  startY: fromY,
  startX: fromX // Order does not matter anymore.
  // Etc.
});