Mathematical curves.

[trollwarrior1]

I'm pretty sure there hasn't been a topic like this lately, so might as well post it for discussion, because some people might find this helpful.

What I want to achieve is menus popping in from the center of the screen. I can do it just find, but the problem is, it is very linear.

Would be awesome if people who have some experience could share some equations to make the popping out very fast at start, and slow down once the menu gets bigger.

Here is gif animation (Hope it works properly on first time)

[LiquidNitrogen]

try something like this perhaps. or multiply the speed by some value each loop.

1   2   3   4   5   6   7

size = 0; speed = 20; while (size < maxSize){     size += speed;     speed -= 1;     updateScreen(); }

[matheus23]

You could try a universal system like bezier curves, or something like a cubic spline (I think thats how it's called, but I'm not sure...):

1   2   3   4   5   6   7   8   9

// For t between 0 and 1 you get an interpolation between 0 and 1 public float cubicSpline (float t) {     // original function: 3t² - 2t³    return (t * t) * (3f - 2f*t); } // Interpolating arbitrary values: (t between 0 and 1, again) public float cubicSpline (float begin, float end, float t) {     return begin + (cubicSpline(t) * (end-begin)); }

Edit: Be careful with LiquidNitrogen's example.

maxSize

can maximally be 100 for the speed 20. Else speed will start to get negative and everything'll fail.

Games published by our own members! Check 'em out!

[trollwarrior1]

try something like this perhaps. or multiply the speed by some value each loop.

1   2   3   4   5   6   7

size = 0; speed = 20; while (size < maxSize){     size += speed;     speed -= 1;     updateScreen(); }

I think I would much rather prefer mathematical equation if I find one, because right now all I have is time that the menu has been popping out. I don't have any speed values of anything and I would like it to keep it that way

[pjt33]

The key word is "easing". Armed with that I easily found these links:

• Pictures: http://easings.net/
• BSD-licensed Java code: https://github.com/jesusgollonet/processing-penner-easing/tree/master/src

[trollwarrior1]

The key word is "easing". Armed with that I easily found these links:

• Pictures: http://easings.net/
• BSD-licensed Java code: https://github.com/jesusgollonet/processing-penner-easing/tree/master/src

Thanks so much! I have already implemented some of this

[CodeHead]

Robert Penner seems to be the big cheese when it comes to easing equations. His page has links to both of the pages posted by pjt33 as well as a few others. This one is a rather good presentation (space bar advances the slides). I think it was the biggest help when implementing my easing library in Java. One tip: Easing functions become a lot simpler when you realize that they only need one passed parameter (as illustrated here) to make the easings work, namely percentage complete. Something along the lines of:

1   2   3   4   5   6   7   8   9

... public float myEaseOut(float percentcomplete) {     return (1.0f - (percentcomplete * percentcomplete)); } public float myEaseIn(float percentcomplete) {     return percentcomplete * percentcomplete; } ...

It takes a bit of deduction at times, but pretty much any easing formula can be made to fit the same basic method signature. From there it's fairly straightforward to construct a modular easing library.

[Drenius]

Used sine curves for this lately since they are so easy to use...

[lcass]

You could use the cubic root of an increasing value, the value given by the cubic root plateus fairly quickly. you could have a simple for loop  for(int i= 0; i < 50;i++) {pos = Math.cbrt(i); update();}

[DrZoidberg]

If you want to play around with lots of different easing functions it makes things easier if you define yourself a function class that you can then scale, shift and combine with other functions.
Here is an example.
Func.java
http://pastebin.com/mFexrzMH
Graph.java
http://pastebin.com/2bPFcahz

btw. if you use Java 8 you can make your function definitions a lot shorter then in that example.

Of course this will make the calculation slower, but that shouldn't matter for easing animations.

Games published by our own members! Check 'em out!

[matheus23]

the value given by the cubic root plateus fairly quickly

No it doesn't. It tends to infinity, as does its first and second derivative.

Not really useful information here, but are you sure they do? http://www.wolframalpha.com/input/?i=derivate+of+cubic+root

I think what you wanted to say is: They tend towards zero, but never approach it (and therefore the Cubic Root is never going to be flat at some point).

[pjt33]

I think what you wanted to say is: They tend towards zero, but never approach it (and therefore the Cubic Root is never going to be flat at some point).

I blame a lack of coffee for my ability to read that more than once without mentally processing the word "root". You are quite correct.

[matheus23]

I blame a lack of coffee for my ability to read that more than once without mentally processing the word "root". You are quite correct.

Fun Fact: I posted that after a LAN-Party where I didn't sleep. Haven't slept for about 35 hours at the time I posted it...
But, well, the same mistake could have happened made even when I had slept

[lcass]

http://www.wolframalpha.com/input/?i=cubic+root using that graph for the cubic root of i as it increases, it flattens out in other terms a "smooth" zoom.

[DrZoidberg]

I would use 1 - (1-x)^3
http://www.wolframalpha.com/input/?i=1+-+%281-x%29%5E3%2C+x+%3D+0+to+1

It's perfectly horizontal at 1,1

[BurntPizza]

Found this, nice visualization and JS source for some common easing functions: http://gamemechanicexplorer.com/#easing-1

[Longarmx]

Found this, nice visualization and JS source for some common easing functions: http://gamemechanicexplorer.com/#easing-1

That's a cool tool 

I would also just go onto desmos and mess around to find an equation that fits your needs. It may not be the fastest, but I think it's sort of fun to see what you can come up with.

[BurntPizza]

Found this, nice visualization and JS source for some common easing functions: http://gamemechanicexplorer.com/#easing-1

That's a cool tool  

I would also just go onto desmos and mess around to find an equation that fits your needs. It may not be the fastest, but I think it's sort of fun to see what you can come up with.

Indeed, I immediately go to Desmos whenever I have a graph I need to make. Or Wolfram Alpha if it involves regression and my TI-84 is out of reach.
And thanks for the medal!

[trollwarrior1]

I'm sorry to be asking again, but, I need some kind of equation for explosion. I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use?

[matheus23]

I'm sorry I currently haven't got the answer to that :S

But!
I've got some more links. This guys talks about interpolating more than only one value. He talks about interpolating rotations and other cool stuff
Part 1: http://acko.net/blog/animate-your-way-to-glory/
Part 2: http://acko.net/blog/animate-your-way-to-glory-pt2/

[CodeHead]

I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use?

Try looking at ease out functions. They give the deceleration over time effect that you want. The only catch is that they start out at full speed. For example:

1	1.0f - (percent_complete*percent_complete*percent_complete)

[BurntPizza]

I'm sorry to be asking again, but, I need some kind of equation for explosion. I basically want an equation that would explode at its peak in the first few moments and would gradually increase slow down speed until 0. Any ideas which one I should use?

Maybe something like this? Try changing parameters and exponents if it's not quite right.



Via this graph: https://www.desmos.com/calculator/n7f2j3qynj

[Riven]

I don't think curves are suitable for explosions.

You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.

[BurntPizza]

I don't think curves are suitable for explosions.

You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.

I agree that particle systems are generally better, but he might be using some kind of single sprite, tweening size/color or something.
I guess you could simulate the drag on the expanding edge of the sprite, but at that point...

I don't know what he's trying to accomplish exactly, so I figure I'd go along with the existing conceptual inertia.

[trollwarrior1]

I don't think curves are suitable for explosions.

You just give particles a 'random' acceleration away from an origin (or apply a force, from an origin) and then simulate drag and gravity.

It would be used for more like light pulse. So it appears really quickly and slowly fades out. Wouldn't be used for the particles themselves.

EDIT-----------
Thanks for the replies, for for now I will just stick with hard coded values, since I only have 16 frames to animate. I just coded each value by hand. That looked pretty nicely. I mean, the light goes so fast that you can't really see much. Probably even linear interpolation would be enough.