Reputation: 1
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:
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.
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