# Tag Info

11

Easing functions are used for interpolation, typically (but not necessarily) in animation / kinematic motion. Linear interpolation (lerp) is something you may have heard of. Let's say you lerp a smiley face from one corner of the screen to another (much as per your image). This means the smiley will move at a steady velocity from point A to point B. If you ...

10

Well, you'll have to use a little bit of physics, but you don't need to simulate any physics. There are formulas for pendulum motion you can easily use to set the rotation of your pendulum. For small swings, the motion can be approximated with simple harmonic motion. The angular displacement at a specific time can be approximated with: This is most ...

9

It’s not always the best method, and it can be more computationally expensive (though this ultimately depends on how you store your data), but I will make the argument that lerping 2D values works reasonably well in the majority of cases. Instead of lerping a desired angle, you can lerp the desired normalised direction vector. One advantage of this method ...

7

An easing function lets you interpolate values from one value to another over a given interval using something called an "easing function". These are functions that are designed to take a value and at any given point in the interval, output the value at a certain point in time. This can be best explained by taking a look at a code snippet: // simple ...

7

The trick is to remember that angles (at least in Euclidean space) are periodic by 2*pi. If the difference between the current angle and the target angle is too large (i.e. the cursor has crossed the boundary), just adjust the current angle by adding or subtracting 2*pi accordingly. In this case, you can try the following: (I've never programmed in ...

6

Well tweening in the general case is just parametric movement (specifically, defining a function f(x) where x can be 0..1 for position/rotation/scale/whatever) with a modifier on the parametric value you pass in. The modifier also has the range 0..1. If you plot the algorithm on a graph you'll get something that starts at 0, ends at 1, and the slope of the ...

6

What you're talking about here is commonly called a "lerp", short for interpolation. You can find a lot of different implementations and specifics about this sort of operation on Google by searching for "lerp", but here's a very basic one: T Interpolate(float fraction, T startingValue, T endingValue) { T delta = endingValue - startingValue; return ...

6

After playing with this function more. I realise that the bezier control points are acting similar to magnets. If I spread the control points so that they are positioned along a straight line with equal distance between, then the animation works as expected { p0: new Vector(0,0), //Start point p1: new Vector(.333,.333), //Control point 1 p2: ...

5

I usually solve this using Catmull-Rom splines. Instead of using control points, you simply specify the two points between which you'd like to interpolate, as well as a "previous" point and a "next" point. If the 4 points all lie on the same line and are evenly spaced, the interpolation will be linear. In the image above, there are four points p0, p1, p2 ...

5

You want the speed to increase smoothly from an initial value, let's call it s1 and reach a final value, let's say that's s2. That sounds like a Logisic Function to me! A simple logistic function -- a smooth transition from 0 to 1 is P(t) = 1 / (1 + e^(-t)). It looks scary! Don't be afraid! Math is your friend! Drawing it might make it clearer -- you should ...

4

Lets look at two approaches: Binary search - assuming the Bezier is set with values where there is one Y for each X, meaning that there is an injective function that receives an X and returns a Y then you can search for the correct t value that will return the x,y pair you are looking for. Precomputation: Computing 1000 values for t between in the range [0 ...

4

This are the meanings: t = TimeElapsed => Range[0, Duration] b = InitialValue; c = FinalValue - InitialValue; d = Duration; I have a similar code to this for every easing function: public static partial class Tweening { public static class Quartic { public static float EaseIn( float t, float b, float c, float ...

4

Firstly, what is the definition of the following variables passed in as arguments to each equation? The answer was in the link you provided: t = current time (starting from 0 and increasing up to the chosen duration) d = duration (i.e. total time of the animation) b = initial value c = change in value (i.e. how much the value should change, or the ...

4

Here is a no-trig calculation, derived from straight-forward Grade 11 Trig and Physics. It assumes that the origin is the lowest point of the pendulum bob's suspension, that L is the length of the pendulum, and that the normal graphics convention of y increasing down, and x increasing to the right is adopted: Update: I messed up yAcceleration initially; ...

4

I've written a primer on interpolation, which may be of some use - http://iki.fi/sol/interpolation/ Another great resource is this interactive tool: http://www.gizma.com/easing/

3

My answer is similar to Miro's, but I think the Math ought to be a lot simpler. Of course, the details of your curve make all the difference. If you don't care precisely what the curve looks like, then all you need is the basic sawtooth. var clock = function(x) { return (1-x) - floor(1-x); //I like this method, though not the simplest. } var clockVal =...

3

A common scheme is simply lerping the new and old functions Blend(oldBegin, oldEnd, oldT, newBegin, newEnd, newT, blendT) { oldPos = OldCurve(oldBegin, oldEnd, oldT); newPos = NewCurve(newBegin, newEnd, newT); return Lerp(oldPos, newPos, blendT); } There are decisions and bookkeeping to keep track of and decide when and how fast to transition from ...

2

Why are you using bezier curves to do a linear interpolation? You could just use a linear interpolation to do linear interpolation and not use curves at all. If the reason is that you want to have a more general purpose curve based interpolation system and you are trying to get it to do a linear interpolation for a specific usage case, there is a way. ...

2

Bezier curves are inherently for making smooth curves. Linear interpolation is simpler. To linearly interpolate two points, you can simply apply the following formula for time t in [0,1]: interpolatedPoint = startPoint * (1 - t) + endPoint * t When t=0, the interpolatedPoint is exactly equal to the startPoint. Similarly, when t=1, the interpolatedPoint is ...

2

Easing functions serve to change a value during a time period, from a starting number to an end number. You use that value to animate a property of an object in your game, such as position, rotation, scale, changing colors and other properties that use a value. The different easing functions determine the "feel" of the animation, or how the value changes ...

2

I love the other answers given. Very technical! If you want, I have a very simple method to accomplish this. We'll assume angles for these examples. The concept can be extrapolated to other value types, such as colors. double MAX_ANGLE = 360.0; double startAngle = 300.0; double endAngle = 15.0; double distanceForward = 0.0; // Clockwise double ...

2

This is simply a combination of a few simple steps. First, get the mouse position, Gdx.input.getX() will give you the mouse X position. You'll want to get that position at the time the mouse button was pressed. Now, that you have a target, move your hero towards it. You can do that with something like: float deltaV = deltaTime * speed; if (Math.abs(...

2

You might consider attributing an acceleration value with an enemy. So for each enemy you might associate a velocity(v) and acceleration(a) variable. This would handle the case of the enemy smoothly increasing speed from an initial velocity of zero. Of course you would then need to also associate a maximum speed for the enemy. As for slowing down, there are ...

2

I assume that you want to create periodic function so you need to periodize x: p(x) = x/T - floor(x/T) Then you'll create rational function from two linear functions. f(x) = ( a*x + b ) / ( c*x + d ) You've got 2 points [0,V], [1,0] and together you have: f(x) = (V - V * p(x)) / (1 + p(x) * shape)

2

Visualise a graph of rotation versus time that gradually drops to zero and notice there is an infinite number of ways of drawing such a graph. First, you'll have to specify how you want the angular velocity to decrease. Formulate a function ω(t) that equals the starting angular velocity (s) at t=0 and drops to zero eventually (t=T). Tune the variables to ...

1

A standard "tween" algorithm usually works by simplifying a more general hermite spline function, to eliminate the necessity of manually providing initial and terminating velocity values. But if you wish to be able to switch from one tween to another, you can no longer do that, and you'll need to use a full, non-simplified spline calculation. Here's some ...

1

If you parameterize the movement on time elapsed since the beginning (i.e. you don't compute the position incrementally, but fully every frame), and the end point also moves smoothly, you should get smooth movement without much problems. Something like this: start_x = 0 end_x = 100 total_time = 5 // 100 pixels in 5 seconds t = 0 while t < total_time: ...

1

maybe a good way of seeing the problem is to ask : - can i do another cycle ? count the number of cycle, and see if this is the begining of a cycle: var beginingNewCycle=false; numCycle = Math.floor ( (angle - endAngle ) / 6.28318531 ; if (old_numCycle != numCycle) beginingNewCycle=true; old_numCycle=numCycle; ( when the rotation starts, you ...

Only top voted, non community-wiki answers of a minimum length are eligible