1 Attachment(s)

Modify function from linear to an increasing curve

Hi, I have a little problem with functions and curves. When it comes to statistics, functions and curves I'm a really noob, so I hope this is the right forum.

Some background information: I'm developing a game where objects move across the y-axis according to the passed time. These objects are stored in a 2d matrix. If I move them by one position in the matrix, the objects would "jump" from y(5) to y(6) but I want fluent animation between y(5) and y(6).

So I have created this function: *y = (S / D **⋅ **x) - S*

S and D are two constants: The size of the moving object and the duration of one gamestep in ms.

x describes the passed time.

I've decreased by S because I needed the result to be negative to zero.

The object moves fluently but this is not exactly what I wanted. I want the movement between two matrix positions start rather slowly (nearly stop at the begin) and get very fast to the end. This way the user can better distinguish if the block is actually at y(5) or y(6) and also get the illusion of fluent animation.

This image should make it clearer: (S = 25; D = 100)

Attachment 25311

The black line is what I have now. The red line is what I would like to have (or similar).

As I already said I'm really bad at such things, so I hope someone can help me with that problem.

Thanks in advance!

Re: Modify function from linear to an increasing curve

Nevermind got the solution myself.

While looking at mathematical functions and graphs I found the power function, which seemed perfectly for my problem. Now I needed to get it to cross my two points P(0|-25) and Q(100|0).

I started with the normal formula y = a * x^{n}. Using 4 as n would make the curve start very late and make that nice stop effect at the beginning of every movement.

Now inserting the two known constants, I get: 25 = a * 100^{4}. Reforming that sentence gives me a = 0.00000025.

With that I was able to recreate my formula and use it in my game:

y = S / D^{4} * x^{4} - S

Re: Modify function from linear to an increasing curve

if you make the speed get very fast towards the end then it is going to stop rather abruptly at that point, perhaps you should consider nan animation which is slow at both ends.

In any case, for something that starts slow and ends fast, you can do this:

define:

t = the current time (0 at start of animation)

T = the total desired time for the animation

x_start = the starting x coord

x_finish = the finishing x coord

y_start = the starting x coord

y_finish = the finishing y coord

x(t),y(t) the coordinates at time t.

let $\displaystyle w(t) = \frac{e^t - e^T }{1-e^T}$

and finally:

$\displaystyle x(t) = w(t)x_{start} + \left(1-w(t) \right)x_{finish}$

$\displaystyle y(t) = w(t)y_{start} + \left(1-w(t) \right)y_{finish}$

**edit: this was written while you were doing post#2 so you can ignore it.**

Re: Modify function from linear to an increasing curve

Thank you very much! Your solution works also very good.

I'm interested in "nan" animation? Could you explain that?

Re: Modify function from linear to an increasing curve

"nan" is a typo. my post should have said "**an** animation that is slow at both ends".

To implement this you could change the definition of w(t) to:

$\displaystyle w(t) = \frac{1-\sin(\frac{\pi t}{T} -0.5 \pi)}{2}$

Make sure that whatever programming language you use expects the argument of the sin() function to be measured in **radians** not degrees, otherwise the above wont work.

Re: Modify function from linear to an increasing curve

Hadn't thought of a typo :rolleyes:

That new formula also makes a very nice effect but I think I will stick to the simpler formula.

Sinus operations are way too heavy for such a trivial feature (especially on mobile devices).

Thanks for all SpringFan!

Re: Modify function from linear to an increasing curve

something slow at both ends but not computationally intensive would be:

$\displaystyle w(t) = 3\frac{t^2}{T^2} - 2\frac{t^3}{T^3}$