user2892930
user2892930

Reputation: 1

RequestAnimationFrame, Arguments vs. Variables

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);

Upvotes: 0

Views: 84

Answers (0)

Related Questions