# calculating curves

10 replies to this topic

### #1 Pandaboy

Pandaboy

GMC Member

• GMC Member
• 588 posts

Posted 27 April 2012 - 09:35 PM

I'm a bit rusty at math as I haven't practiced my brain muscles with it in a very long time ...

I have a value (let's call it x) that linearly increases from 0 to 1 over a certain amount of frames. it is never smaller than 0, and never larger than 1.
Is there a way I can use x to create curves as shown in this image? :

as stated, x is currently Linear.
How can I create new values from x to "ease in", "ease out" and "ease in & out"?

Edited by Pandaboy, 04 August 2012 - 12:49 PM.

• 0

### #2 Davve

Davve

Procrastinator

• GMC Member
• 3780 posts
• Version:GM8.1

Posted 27 April 2012 - 10:04 PM

Linear: y=x
Ease out: y=power(x,2)
Ease in: y=1-power(1-x,2)
Ease in and out: 1-power(sin(x*pi/2-pi/2),2)

Edited by Davve, 27 April 2012 - 10:26 PM.

• 0

### #3 GameGeisha

GameGeisha

GameGeisha

• GMC Member
• 3185 posts
• Version:GM:Studio

Posted 27 April 2012 - 10:18 PM

How can I create new values from x to "ease in", "ease out" and "ease in & out"?

Each of these can be accomplished by taking slices of the sinusoid and scaling it into a [0,1]x[0,1] frame.
- Ease in: sin(lerp(0, pi/2, x))
- Ease out: 1-cos(lerp(0, pi/2, x))
- Ease in and out: (cos(lerp(-pi, 0, x))+1)/2

In fact, if you look at lines 8765-8767 of jQuery 1.7.2's full source, this kind of technique is exactly what it uses for the default swing effect.

GameGeisha

PS: You can see additional easing techniques in Robert Penner's guide to easing (pp. 11-28). A popular JavaScript implementation of Penner's equations is available here, which you can easily adapt into GML.

Edit: Corrected formula for ease-out. See #6.

Edited by GameGeisha, 28 April 2012 - 02:37 AM.

• 0

### #4 icuurd12b42

icuurd12b42

Self Formed Sentient

• Retired Staff
• 15052 posts
• Version:GM:Studio

Posted 27 April 2012 - 11:02 PM

http://www.gmlscript...etric_functions
• 1

### #5 Pandaboy

Pandaboy

GMC Member

• GMC Member
• 588 posts

Posted 27 April 2012 - 11:51 PM

Thank you everyone for the help :>! I have never really understood cos/sin (my loss for not taking an advanced math class xD).

@GameGeisha @Davve
that's exactly what I was looking for, the amount of smoothing on the curves are perfect ^^!
I couldn't get Geisha's "Ease out" to work though.. the value seems to be out of the 0-1 range, and I couldn't seem to fix it myself :c

Edit: Dave's ease out worked ^^.

are there any difference in how Davve's and Geisha's methods work? drawing them on a graph makes them seem identical. would any of them have better game performance than the other ? (to me Davve's look faster as it calls less math functions )

Edit2:
here's a .gm81 that shows them in action if anyone's interested

Edit3:
managed to get geisha's ease out working:
y = 1-sin(lerp(pi/2, 0, x))

Edited by Pandaboy, 28 April 2012 - 12:42 AM.

• 0

### #6 GameGeisha

GameGeisha

GameGeisha

• GMC Member
• 3185 posts
• Version:GM:Studio

Posted 28 April 2012 - 02:36 AM

I couldn't get Geisha's "Ease out" to work though.. the value seems to be out of the 0-1 range, and I couldn't seem to fix it myself

My original equation for ease-out had the wrong sign for cosine, and its range is [1,2] rather than [0,1] as it should. The correct equation should have been 1-cos(lerp(0, pi/2, x)) (which is mathematically identical to your corrected equation). I'll edit it right now.

GameGeisha
• 0

### #7 Yourself

Yourself

The Ultimate Pronoun

• Retired Staff
• 7352 posts
• Version:Unknown

Posted 28 April 2012 - 04:47 AM

Ease in and out can also be accomplished with a polynomial:

y = x * x * (3 - 2 * x);

This is actually extremely close to the trigonometric versions you've been given:

http://www.wolframal.../2} from 0 to 1

It may also be computationally cheaper.
• 1

### #8 Pandaboy

Pandaboy

GMC Member

• GMC Member
• 588 posts

Posted 28 April 2012 - 03:01 PM

Thank you again everyone for helping me with this :>!
what you have provided to me saves me a lot of time as I would have had to study quite a bit to fully understand these calculations ^^.

@Yourself
I saw only a very, very small difference when drawing your ease calculation as a curve ^^!
I think I'll use this for ease in & out, as lots of objects will use these calculations every frame (I'm creating a 3D animation system), so cheaper calculations are the better solutions :>!

Edited by Pandaboy, 28 April 2012 - 03:02 PM.

• 0

### #9 deluksic

deluksic

GMC Member

• GMC Member
• 54 posts
• Version:GM8

Posted 30 July 2012 - 06:31 AM

Here, try using my program that i made a day ago in GM8 Just write down the function and it will plot it for you!

Edited by deluksic, 30 July 2012 - 07:19 AM.

• 0

### #10 Zesterer

Zesterer

Professor of Articul

• GMC Member
• 1042 posts
• Version:GM8

Posted 02 August 2012 - 09:21 AM

Ease in and out? Isnt that just a cosine wave? Like:

```/*
--Arguments--
argument0=value 1
argument1=value 2
argument2=the value (from 0 to 1) to interpolate the numbers with
*/
return min(argument0,argument1)+cos((1-argument2)*pi)*(max(argument0,argument1)-min(argument0,argument1))
```

This would return a smooth wave curve I think...

Let me know if it works!

EDIT: I discovered this function when using perlin noise - it is great for smoothly interpolating 2 values witha wave - much better than bilinear interpolation!

Zesterer

Edited by Zesterer, 02 August 2012 - 09:22 AM.

• 0

### #11 Pandaboy

Pandaboy

GMC Member

• GMC Member
• 588 posts

Posted 04 August 2012 - 12:48 PM

this was solved in april, deluksic just necro'd it to get downloads for his function tester XD
• 0

#### 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users