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
point0xandpoint0yinstead of variables in the equations, the outputtedxtvalues vary greatly from when I use variables. Meanwhile, the output forytis coming up asNaN. Whenever I plugp0.xandp0.yin 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
ifstatement?
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);