Mathematical curves.

Game Mechanics
#1

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)

#2

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


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

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…):


// 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. [icode]maxSize[/icode] can maximally be 100 for the speed 20. Else speed will start to get negative and everything’ll fail.

#4

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 :smiley:

#5

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

#6

Thanks so much! :slight_smile: I have already implemented some of this :smiley:

#7

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:


...
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.

#8

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

#9

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();}

#10

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.

#11

[quote=“pjt33”]

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).

#12

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.

#13

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… ;D
But, well, the same mistake could have happened made even when I had slept :wink:

#14

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.

#15

I would use 1 - (1-x)^3

It’s perfectly horizontal at 1,1

#16

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

#17

That’s a cool tool :smiley:

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.

#18

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!

#19

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? :stuck_out_tongue:

#20

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

But! :smiley:
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 :slight_smile:
Part 1: http://acko.net/blog/animate-your-way-to-glory/
Part 2: http://acko.net/blog/animate-your-way-to-glory-pt2/