使用画布沿弯曲运动路径进行动画处理

Question

I'm currently trying to do a bit of an experiment with Canvas, it's one of my first forays into using it. The linked CodePen is some brilliant code from another user that I've forked to create something in the style I needed.

http://codepen.io/anon/pen/utgvb

The functionality I'm trying to create is that of the line animating in a loop until a mousemove within the canvas element. My thoughts were to use Math.random() to generate numbers for each x and y co-ordinate but I'm having trouble figuring out the logic. I want to make it as graceful and code-light as possible which means utilising much of the existing code - however only having a 70% accurate grasp of how the code is running is hampering my progress.

I thought a function that works similar to this one that's already in use could be created:

function update() {

  target.x += (mouse.x - target.x);
  target.y += (mouse.y - target.y);

  chain.update( target );
}

I believe this function is key to making the line follow the cursor, so my thinking was to create a function that accessed the properties of an array of objects, each containing "x: foo, y: bar" in a loop, thus moving the line to those co-ordinates one after the other. I have a feeling however, there may be a far simpler solution staring me in the face.

Does any one have any pointers?

Answer 1

Just for transparency I'll post the code I added to create the animation, with thanks to nepeo for the advice:

function animLoop() {

  var speed = 5,    
      rad = (degree * Math.PI / 180);

  degree += 1;  

  mouse.x += speed * Math.sin(rad);
  mouse.y += speed * Math.cos(rad);

  //reset degrees
  if (degree == 360) {
      degree = 0;
  }
}

If anyone needs more info on animating along curves in Canvas I recommend starting here:

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#uniform_circular_motion

It's really comprehensive and helps you understand exactly what it is you're doing with the mathematics rather than just giving you the solution.