Question

I am using some easing functions in C# which give Ease In and Ease out effects. However, what I am trying to achieve with these easing functions does not give an observable effect.

For eg:

int x=2;
while(x<200)
SetSomething(x = EaseIn(x, 1, EasingType.Quadratic));

The speed with which SetSomething executes doesn’t give enough time to notice the effect of SetSomething. For eg: The value starts from 2 -> 4 -> 16 -> 256

I was trying to achieve the following kind of graphs, but with smaller values (not greater than 200):
http://theinstructionlimit.com/wp-content/uploads/2009/07/easing.png

Easing functions implementation is here: http://theinstructionlimit.com/wp-content/uploads/2009/07/Easing.cs

Even if I get the quadratic values in a smaller range < 200, I need atleast a very small pause-like effect in each iteration of the loop to notice the effect easing. This small pause can also be follow a quadratic curve (i.e for easing: the pause duration might be more first and then lesser pause durations)

What should I do for the same? How do I get quadratic graph in range < 200 and this pause like effect in each iteration?

Answer 1

You are taking the result of Easing as new x. This is very strange!

Also, x is supposed to be the linearStep. linearStep is a double but your x is an int. Make your x a double and increment it by an appropriate ammount.

const double step = 1.5; // Choose an appropriate value here!

for (double x = 2.0; x <= 200.0; x += step) {
    double y = Ease(x, 1.0f, EasingType.Quadratic);
    SetSomething(y); 
}

---

UPDATE

Your design is very procedural. I would prefer an object-oriented approach. switch-statements can often be replaced by a polymorphic (object-oriented) approach.

public abstract class Curve 
{
    public float EaseIn(double s);
    public float EaseOut(double s);
    public static float EaseInOut(double s);
}

public class StepCurve : Curve
{
    public override float EaseIn(double s)
    {
        return s < 0.5 ? 0.0f : 1.0f;
    }

    public override float EaseOut(double s)
    {
        return s < 0.5 ? 0.0f : 1.0f;
    }

    public override float EaseInOut(double s)
    {
        return s < 0.5 ? 0.0f : 1.0f;
    }
}

public class LinearCurve : Curve
{
    public override float EaseIn(double s)
    {
        return (float)s;
    }

    public override float EaseOut(double s)
    {
        return (float)s;
    }

    public override float EaseInOut(double s)
    {
        return (float)s;
    }
}

public class SineCurve : Curve
{
    public override float EaseIn(double s)
    {
        return (float)Math.Sin(s * MathHelper.HalfPi - MathHelper.HalfPi) + 1;
    }

    public override float EaseOut(double s)
    {
        return (float)Math.Sin(s * MathHelper.HalfPi);
    }

    public override float EaseInOut(double s)
    {
        return (float)(Math.Sin(s * MathHelper.Pi - MathHelper.HalfPi) + 1) / 2;
    }
}

public class PowerCurve : Curve
{
    int _power;

    public PowerCurve(int power)
    {
        _power = power;
    }

    public override float EaseIn(double s)
    {
        return (float)Math.Pow(s, _power);
    }

    public override float EaseOut(double s)
    {
        var sign = _power % 2 == 0 ? -1 : 1;
        return (float)(sign * (Math.Pow(s - 1, _power) + sign));
    }

    public override float EaseInOut(double s)
    {
        s *= 2;
        if (s < 1) return EaseIn(s, _power) / 2;
        var sign = _power % 2 == 0 ? -1 : 1;
        return (float)(sign / 2.0 * (Math.Pow(s - 2, _power) + sign * 2));

    }
}

With these definitions you can change the Ease method to

public static float Ease(double linearStep, float acceleration, Curve curve)
{
    float easedStep = acceleration > 0 ? curve.EaseIn(linearStep) :
                      acceleration < 0 ? curve.EaseOut(linearStep) :
                      (float)linearStep;
    return MathHelper.Lerp(linearStep, easedStep, Math.Abs(acceleration));
}

You can completely drop the methods with the switch-statements. You would draw a Cubic curve with

var curve = new PowerCurve(3);
for (double x = 2.0; x <= 200.0; x += step) {
    double y = Ease(x, 1.0f, curve);
    SetSomething(y); 
}