How to use bezierByTime?

Cocos Creator
1

Hello everyone!

I am using Cocos Creator version 3.8.6.

Let’s take a curve like this:

Curve
Curve322×322 5.14 KB

In the code we will designate the points:

let p1 = new Vec2(0, 0);
let p2 = new Vec2(0.2, 0.9);
let p3 = new Vec2(-0.3, 1.1);
let p4 = new Vec2(1, 1);

I need to find the value on the Y axis along the X axis. It seemed to me that the bezierByTime function is just for this. Let’s try:

let print = (time: number): void => {
	let x = bezierByTime([p1.x, p2.x, p3.x, p4.x], time);
	let y = bezierByTime([p1.y, p2.y, p3.y, p4.y], time);

	console.log(`Info: time = ${time}, x = ${x}, y = ${y}`);
}

print(0);
print(0.5);
print(1);

Result:

Info: time = 0, x = 0.5392914419011516, y = 1.0008218952905403
Info: time = 0.5, x = 0.9466027294712621, y = 0.8171128492397636
Info: time = 1, x = 1, y = 1

At least for 1 everything matched. What am I doing wrong?

We can assume that t is returned, then write:

let print = (time: number): void => {
	let tx = bezierByTime([p1.x, p2.x, p3.x, p4.x], time);
	let ty = bezierByTime([p1.y, p2.y, p3.y, p4.y], time);

	let x = bezier(p1.x, p2.x, p3.x, p4.x, tx);
	let y = bezier(p1.y, p2.y, p3.y, p4.y, ty);

	console.log(`Info: time = ${time}, x = ${x}, y = ${y}`);
}

Result:

Info: time = 0, x = 0.10493323646379052, y = 0.9997528236742361
Info: time = 0.5, x = 0.8067668699488855, y = 1.0223163437600014
Info: time = 1, x = 1, y = 1

And here too the result is not correct.