title: RequestAnimationFrame, Arguments vs. Variables
body: <p>So I am trying to create a function that will make an object move in a curving motion.  This function is supposed to be reused and should be able to take different numbers as arguments. The numbers will serve as control points that guide the curve direction. I am facing two problems:</p>
  
  <ol>
  <li><p>When trying to use the arguments <code>point0x</code> and <code>point0y</code> instead of variables in the equations, the outputted <code>xt</code> values vary greatly from when I use variables. Meanwhile, the output for <code>yt</code> is coming up as <code>NaN</code>. Whenever I plug <code>p0.x</code> and <code>p0.y</code> in their place, however, everything processes as expected. </p></li>
  <li><p>I want to use <code>cancelRequestAnimationFrame();</code> to stop the animation recursion. I keep getting the error message:</p>
  
  <blockquote>
    <p>cancelRequestAnimationFrame is not defined.</p>
  </blockquote>
  
  <p>Do I need to cancel in a completely different function? Should I avoid using it in the <code>if</code> statement? </p></li>
  </ol>
  
  <pre class="lang-js prettyprint-override"><code>function parameter_test(point0x, point0y) {
  
          var p0 = {x:0, y:700};
          var p1 = {x:20, y:100};
          var p2 = {x:200, y:100};
          var p3 = {x:200, y:0};
  
          var cx = 3 * (p1.x - point0x);
          var bx = 3 * (p2.x - p1.x) - cx;
          var ax = p3.x - point0x - cx - bx;
          var cy = 3 * (p1.y - point0y);
          var by = 3 * (p2.y - p1.y) - cy;
          var ay = p3.y - point0y - cy - by;
          var xt = ax * Math.pow(t, 3) + bx * Math.pow(t, 2) + cx * t + point0x;
          var yt = ay * Math.pow(t, 3) + by * Math.pow(t, 2) + cy * t + point0y;
  
          t += speed;
          if (t &gt; 1) {
              t = 1;
              cancelRequestAnimationFrame(parameter_test);
          }
          requestAnimationFrame(parameter_test);
  
          console.log(xt, yt);    
  
  }
  
  parameter_test(0, 700);
  </code></pre>