NewCommand 2052 - AnimateVariable

[jetrotal]

Video Demo

The idea is to generate and execute a sequence of variables command changes that goes from
a start value to an end value. Following Motion Easing, Time Duration and a pause between frames.

@raw 2052, "linear/bounceOut", 0, 1, 0, 0, 0, 240, 0, 640, 0, 0 

@raw 2052, "easeTypeStart/easeTypeEnd", targetVariableIsVar, targetVariable, startIsVar, start, endIsVar, end, durationIsVar, duration, pauseIsVar, pause

You can also write only bounceInOut instead of bounceIn/bounceOut
easeTypeStart and easeTypeEnd can be:

"linear"
"ease", "easeIn", "easeOut", "easeInOut"

"quadIn", "quadOut", "quadInOut" //quadratic easing
"cubicIn", "cubicOut", "cubicInOut"
"quartIn", "quartOut", "quartInOut"
"quintIn", "quintOut", "quintInOut"

"sineIn", "sineOut", "sineInOut" //sinusoidal easing
"ExpoIn", "expoOut", "expoInOut"  //exponential easing
"circIn", "circOut", "circInOut"  //circular easing
"backIn", "backOut", "backInOut"

"elasticIn", "elasticOut", "elasticInOut"
"bounceIn", "bounceOut", "bounceInOut"

bezier(x1, y1, x2, y2) //cubic Bezier(curveHandle1_x, curveHandle1_y, curveHandle2_x, curveHandle2_y,)

cubic bezier works!!!!!!!!!!
References for getting bezier values:
https://matthewlein.com/tools/ceaser
https://cubic-bezier.com/

bezier(0.9, -0.3, 0.03, 1.3) - Black dots position representx x1, y1 and x2, y2.

[jetrotal]

I learned what I needed to know about setting up cubic bezier, clean interpolation and correct event event pushing.
Everything is fully functional and a little cleaner to read.

[jetrotal]

This one is properly rebased and fully working.

[Ghabry]

any idea in which file that cubicBezir function could be relocated? Is 150 lines so do not really want that much extra lines in this already far-too-complex cpp file 😅 .

Oh, and a camel walked through your code ;).

// this is a fix, again, with post-increment operators <- Can you explain why this is needed?

[jetrotal]

Cubic bezier stuff could be realocated to a new file, maybe called: animation_helper. Since this could be ported for pictures, or whatever moves between points if needed.

Those comments I wrote while fighting some annoying bugs that I can't remember anymore xD
I should delete them.

[jetrotal]

Changed the code, feel free to rename the newer files if "animation_helper" is not a good name convention.

btw, there's a minor issue that I wasn't able to fix but it's not a problem if this isn't fixed at all:

I failed to make the the InOut interpolation work exactly as the In/Out interpolation

The picture A above use linear/linear, then ElasticIn/ElasticOut
The picture B above use linear, then ElasticInOut

The issue may be related to the // use 2 interpolations: start and end. area of the code.

Here's the map with this demo: Talk to the Dog to start it:
Map0007.zip

[jetrotal]

Rebased.

[Ghabry]

about

double Animation_Helper::CubicBezier(float t, const double& p0, const double& p1, const double& p2, const double& p3) {

	float u = 1 - t;
	float tt = t * t;
	float uu = u * u;
	float uuu = uu * u;
	float ttt = tt * t;

	//Point2d p = {0,0};
	//p.x = uuu * 0 + 3 * uu * t * p0 + 3 * u * tt * p2 + ttt * 1;
	return uuu * 0 + 3 * uu * t * p1 + 3 * u * tt * p3 + ttt * 1;

	//return p.y;
}

How is this supposed to work? The first expression uuu * 0 is always 0. p0 and p2 are unused.

According to Wikipedia the formula is:

$$ B(t) = (1-t)^3P_0+3(1-t)^2tP_1+3(1-t)t^2P_2+t^3P_3,\ 0 \le t \le 1 $$

so shouldn't it be:

uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3

?

[jetrotal]

I can't quite remember what I did, it was a long time ago...
I remember having problems trying to use the entire algorithm, So i had to brute force changes to get just the motion at current time.

---

I tried your suggestion, it didn't align well in the end:

The image B (which is made by combining 2 two interpolations: EaseIn/EaseOut or linear/linear), is jumping between each half of animation

but that may be a problem with another part of the code, that is giving a weird offset.

[jetrotal]

I kinda remember now what's going on

What I wanted to get was the specific value of the animation at current time (A single point inside the blue line above).
I can't remember now if [p0,p1] was the coordinates of the bottom black square and [p2,p3] represents the upper black square.

I remember having to hard code some stuff, because the original algorithm was retrieving something else.

[jetrotal]

the bezier algorithm now considers "timming modifiers" and it's better presented overall

@Ghabry take a look, this may be cleaner for 0.8.1