Java-Gaming.org Hi !
 Featured games (91) games approved by the League of Dukes Games in Showcase (757) Games in Android Showcase (229) games submitted by our members Games in WIP (844) games currently in development
 News: Read the Java Gaming Resources, or peek at the official Java tutorials
Pages: [1]
 ignore  |  Print
 Mathematical curves.  (Read 9096 times) 0 Members and 1 Guest are viewing this topic.
trollwarrior1
 « Posted 2014-04-12 09:43:07 »

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
 « Reply #1 - Posted 2014-04-12 09:47:57 »

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

JGO Kernel

Medals: 138
Projects: 3

You think about my Avatar right now!

 « Reply #2 - Posted 2014-04-12 09:49:50 »

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

See my:
My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
trollwarrior1
 « Reply #3 - Posted 2014-04-12 10:20:23 »

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

« JGO Spiffy Duke »

Medals: 40
Projects: 4
Exp: 7 years

 « Reply #4 - Posted 2014-04-12 10:22:05 »

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

trollwarrior1
 « Reply #5 - Posted 2014-04-12 10:40:54 »

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

Thanks so much! I have already implemented some of this

JGO Knight

Medals: 52

From rags to riches...to rags.

 « Reply #6 - Posted 2014-04-12 16:16:46 »

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.

Arthur: Are all men from the future loud-mouthed braggarts?
Ash: Nope. Just me baby...Just me.
Drenius
 « Reply #7 - Posted 2014-04-12 19:01:33 »

Used sine curves for this lately since they are so easy to use...
lcass
 « Reply #8 - Posted 2014-04-12 20:56:47 »

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

JGO Coder

Medals: 21

 « Reply #9 - Posted 2014-04-12 22:13:58 »

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

JGO Kernel

Medals: 138
Projects: 3

You think about my Avatar right now!

 « Reply #10 - Posted 2014-04-13 17:40:30 »

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

See my:
My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
pjt33

« JGO Spiffy Duke »

Medals: 40
Projects: 4
Exp: 7 years

 « Reply #11 - Posted 2014-04-13 21:56:31 »

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

JGO Kernel

Medals: 138
Projects: 3

You think about my Avatar right now!

 « Reply #12 - Posted 2014-04-14 08:44:57 »

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

See my:
My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
lcass
 « Reply #13 - Posted 2014-04-20 10:12:07 »

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

JGO Coder

Medals: 21

 « Reply #14 - Posted 2014-04-20 20:47:54 »

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

« JGO Bitwise Duke »

Medals: 485
Exp: 7 years

 « Reply #15 - Posted 2014-04-21 19:17:11 »

Found this, nice visualization and JS source for some common easing functions: http://gamemechanicexplorer.com/#easing-1
Longarmx
 « Reply #16 - Posted 2014-04-22 02:29:37 »

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

« JGO Bitwise Duke »

Medals: 485
Exp: 7 years

 « Reply #17 - Posted 2014-04-22 02:32:24 »

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
 « Reply #18 - Posted 2014-04-22 05:19:20 »

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

JGO Kernel

Medals: 138
Projects: 3

You think about my Avatar right now!

 « Reply #19 - Posted 2014-04-22 09:49:16 »

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/

See my:
My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github

JGO Knight

Medals: 52

From rags to riches...to rags.

 « Reply #20 - Posted 2014-04-22 14:07:35 »

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

Arthur: Are all men from the future loud-mouthed braggarts?
Ash: Nope. Just me baby...Just me.
BurntPizza

« JGO Bitwise Duke »

Medals: 485
Exp: 7 years

 « Reply #21 - Posted 2014-04-22 14:31:18 »

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

« JGO Overlord »

Medals: 1340
Projects: 4
Exp: 16 years

 « Reply #22 - Posted 2014-04-22 14:39:51 »

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.

Hi, appreciate more people! Σ ♥ = ¾
Learn how to award medals... and work your way up the social rankings!
BurntPizza

« JGO Bitwise Duke »

Medals: 485
Exp: 7 years

 « Reply #23 - Posted 2014-04-22 14:49:47 »

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
 « Reply #24 - Posted 2014-04-22 16:17:42 »

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.
Pages: [1]
 ignore  |  Print

 EgonOlsen (76 views) 2018-06-10 19:43:48 EgonOlsen (56 views) 2018-06-10 19:43:44 EgonOlsen (76 views) 2018-06-10 19:43:20 DesertCoockie (256 views) 2018-05-13 18:23:11 nelsongames (156 views) 2018-04-24 18:15:36 nelsongames (155 views) 2018-04-24 18:14:32 ivj94 (896 views) 2018-03-24 14:47:39 ivj94 (157 views) 2018-03-24 14:46:31 ivj94 (809 views) 2018-03-24 14:43:53 Solater (173 views) 2018-03-17 05:04:08
 Java Gaming Resourcesby philfrei2017-12-05 19:38:37Java Gaming Resourcesby philfrei2017-12-05 19:37:39Java Gaming Resourcesby philfrei2017-12-05 19:36:10Java Gaming Resourcesby philfrei2017-12-05 19:33:10List of Learning Resourcesby elect2017-03-13 14:05:44List of Learning Resourcesby elect2017-03-13 14:04:45SF/X Librariesby philfrei2017-03-02 08:45:19SF/X Librariesby philfrei2017-03-02 08:44:05
 java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org