0

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:

  1. When trying to use the arguments point0x and point0y instead of variables in the equations, the outputted xt values vary greatly from when I use variables. Meanwhile, the output for yt is coming up as NaN. Whenever I plug p0.x and p0.y in their place, however, everything processes as expected.

  2. I want to use cancelRequestAnimationFrame(); to stop the animation recursion. I keep getting the error message:

    cancelRequestAnimationFrame is not defined.

    Do I need to cancel in a completely different function? Should I avoid using it in the if statement? 

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 > 1) {
            t = 1;
            cancelRequestAnimationFrame(parameter_test);
        }
        requestAnimationFrame(parameter_test);

        console.log(xt, yt);    

}

parameter_test(0, 700);
FZs
  • 16,581
  • 13
  • 41
  • 50
user2892930
  • 1
  • 1
  • 3
  • Can you create a working example? Also, you need to assign an `id` like `rafID = requestAnimationFrame`, and use it with `cancelAnimationFrame(rafID)` (not `cancelRequestAnimationFrame`) – Anurag Srivastava Apr 19 '20 at 16:02
  • Also, it might be easier to just don't call `requestAnimationFrame` when you want to stop – FZs Apr 19 '20 at 16:03
  • "Can you create a working example?" Absolutely. This is my code when I use variables jsfiddle.net/rd451/9r7Lk48x/4 I was able to rearrange my code to cancel the animation when I want successfully with no errors. I think my arguments/output issue is all I need to take care of. (Thank you both for the quick input, by the way) – user2892930 Apr 19 '20 at 16:57

0 Answers0