Java-Gaming.org    
Featured games (81)
games approved by the League of Dukes
Games in Showcase (499)
Games in Android Showcase (118)
games submitted by our members
Games in WIP (567)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  Mathematical curves.  (Read 1777 times)
0 Members and 1 Guest are viewing this topic.
Offline 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)
Click to Play
Online 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();
}

Offline matheus23

JGO Kernel


Medals: 108
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 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.

See my:
    My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline 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 Cheesy
Offline pjt33
« Reply #4 - Posted 2014-04-12 10:22:05 »

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

Offline 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! Smiley I have already implemented some of this Cheesy
Offline CodeHead

JGO Knight


Medals: 41


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.
Offline Drenius
« Reply #7 - Posted 2014-04-12 19:01:33 »

Used sine curves for this lately since they are so easy to use...
Offline 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();}
Offline DrZoidberg

Senior Member


Medals: 15



« 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.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline matheus23

JGO Kernel


Medals: 108
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
Offline pjt33
« 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.
Offline matheus23

JGO Kernel


Medals: 108
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... Grin
But, well, the same mistake could have happened made even when I had slept Wink

See my:
    My development Blog:     | Or look at my RPG | Or simply my coding
http://matheusdev.tumblr.comRuins of Revenge  |      On Github
Offline 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.
Offline DrZoidberg

Senior Member


Medals: 15



« 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
Online BurntPizza
« 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
Offline 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  Cheesy

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.

Online BurntPizza
« 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  Cheesy

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!
Offline 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? Tongue
Offline matheus23

JGO Kernel


Medals: 108
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! Cheesy
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 Smiley
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
Offline CodeHead

JGO Knight


Medals: 41


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? Tongue

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.
Online BurntPizza
« 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? Tongue

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



Via this graph: https://www.desmos.com/calculator/n7f2j3qynj
Offline Riven
« League of Dukes »

JGO Overlord


Medals: 802
Projects: 4
Exp: 16 years


Hand over your head.


« 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
Online BurntPizza
« 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.
Offline 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  
 
 

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

Pippogeek (39 views)
2014-09-24 16:13:29

Pippogeek (30 views)
2014-09-24 16:12:22

Pippogeek (19 views)
2014-09-24 16:12:06

Grunnt (45 views)
2014-09-23 14:38:19

radar3301 (28 views)
2014-09-21 23:33:17

BurntPizza (63 views)
2014-09-21 02:42:18

BurntPizza (33 views)
2014-09-21 01:30:30

moogie (41 views)
2014-09-21 00:26:15

UprightPath (50 views)
2014-09-20 20:14:06

BurntPizza (54 views)
2014-09-19 03:14:18
List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50

List of Learning Resources
by SilverTiger
2014-07-31 16:26:06

List of Learning Resources
by SilverTiger
2014-07-31 11:54:12

HotSpot Options
by dleskov
2014-07-08 01:59:08
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
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!