title: Animating Along Curved Motion Path Using Canvas
body: <p>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. </p>
  
  <p><a href="http://codepen.io/anon/pen/utgvb" rel="nofollow">http://codepen.io/anon/pen/utgvb</a></p>
  
  <p>The functionality I'm trying to create is that of the line animating in a loop <strong>until</strong> 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. </p>
  
  <p>I thought a function that works similar to this one that's already in use could be created:</p>
  
  <pre><code>function update() {
  
    target.x += (mouse.x - target.x);
    target.y += (mouse.y - target.y);
  
    chain.update( target );
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>Does any one have any pointers?</p>