GameSalad

Make Your Own Interpolations

RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
edited March 2013 in Working with GS (Mac)
Hey this is my 1000th posting in the GameSalad Forums!

To celebrate, I thought I'd share how interpolations work and how you can 'roll your own' so you don't need to be dependent on the GS implementation.

Why would you want to create your own custom interpolation behavior? Among other things it means you could create interpolations that:
1) don't have 'the glitch'.
2) don't override/interfere with collisions.
3) can stop any time you want.

So what is an interpolation? Its simply a mathematical way of filling in the blanks between two numbers. For example, to fill in the missing numbers in this sequence, you need to interpolate:
1,_,_,_,_,_,_,_,_,10

(As an aside, to extrapolate means to continue the number sequence beyond whats given. So extrapolation is continuing the sequence: 2,4,6,8,10,_,_,_,_,_,_)

The general formula for interpolation looks like this:

c*(t/d)+b

c = the total change (from beginning to end) of some value (like position, or rotation, or alpha, or volume).
t = the current time
d = the duration of the interpolation
b = the beginning value of something (like position, or rotation, or alpha, or volume)

So, lets say you have an actor that is at self.position.X = 50 and you want it move 75 pixels to the right. And you want to move those 75 pixels in 5 seconds.

self.b = 50
self.c = 50+75 = 125
self.t = self.Time - self.BeginTime
self.d = 5


Here would be a quick example of an interpolation loop:

for d seconds
--Constrain Attribute: self.t To: self.Time - self.BeginTime
--Constrain Attribute: self.Position.X To: self.c*(self.t/self.d)+ self.b

The above example would be for a linear interpolation.

GameSalad also has an "ease in" interpolation. It does this with a power function. The raw equation looks something like:
c*((t/d)*(t/d))+b

That is, the t/d part is squared (or raised to the power of 2).

The GameSalad implementation would look something like this:
--Constrain Attribute: self.Position.X To: self.c*pow((self.t/self.d),2)+ self.b
or
--Constrain Attribute: self.Position.X To: self.c*((self.t/self.d)^2)+ self.b



GameSalad also has an "ease out" interpolation. Its equation looks like this:
c*(1-((1-t/d)*(1-t/d))+b

The GameSalad implementation would look something like this:
--Constrain Attribute: self.Position.X To: self.c*(1-pow(1-(self.t/self.d),2))+ self.b
or
--Constrain Attribute: self.Position.X To: self.c*(1-(1-self.t/self.d)^2)+ self.b

You can go beyond GameSalad's standard ease in / ease out by by modifying the 't/d' part. For example, the GameSalad version uses (t/d)^2 (called the quadratic form). But you could also use (t/d)^3 (called the cubic form). Or you could use any power function -- like (t/d)^5 (which is called the quintic form).

You could also use use 'sin' and 'cos' to modify the (t/d) part and get whats called a sinusoidal interpolation. In fact, @socks famous "AAA*sin(self.Time*BBB)+CCC" is an equation for linear sinusoidal interpolation.
AAA corresponds 'd'
CCC corresponds 'b'
self.Time corresponds to (t/d)
BBB is some multiplier (sort of like the power functions above)

You could modify @socks' equation to do an ease in. It would look like this:
Constrain Attribute: Self.Position.X To: self.c*(1-cos(self.t/self.d*(3.1415/2)))+ self.b

Ease out would be:
Constrain Attribute: Self.Position.X To: self.c*(sin(self.t/self.d*(3.1415/2)))+ self.b

(Note: 3.1415/2 is the calculation for pi/2)

-----------------------
Attached is a demo project that has several of the easing functions discussed above. Take a look at it and study how it works. Then you can create your own interpolations!

http://www.mediafire.com/download.php?b9se71y0jtpp3wy
«1

Comments

  • SocksSocks London, UK.Posts: 12,820Member
    edited March 2013
    @RThurman

    Brilliant stuff !!!!
    (even though I don't understand any of it !! :)) ).

    + Happy 1000th, you don't look older than 980.
  • SocksSocks London, UK.Posts: 12,820Member
    Read through twice now, slowly getting into my brain . . . . great stuff !
  • SnapFireStudiosSnapFireStudios Posts: 1,603Member
    Really, really cool! I'll mess around with this.

    It'd be awesome if we could do a *move to location and slightly overshoot it, and then zoom back* function. Or just customize the easing on both sides.

    I think that's what you're trying to get cross that we can do. Thanks for the post!
    - Thomas

    P.S. Happy 100th ;)

    Ignore females. Acquire currency.

  • Braydon_SFXBraydon_SFX Posts: 9,008Member, Sous Chef, PRO, Bowlboy Sidekick GameSalad Employee
    Hey - nice one man! Thanks for sharing - and congrats on the 1,000th post. :D
  • JarrenHJarrenH Posts: 206Member
    edited March 2013
    This is epic! My game uses interpolate pretty heavily, and I've been trying to find a way to interrupt them. This will be totally re-vamp my game! Thanks a bunch!

    EDIT: Whoah, opening the project just about made my dizzy... may have to wait to digest this...
  • beefy_clyrobeefy_clyro Posts: 5,390Member
    My head hurts
  • ericzingelerericzingeler Posts: 334Member
    great post!
  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    Thanks all for the feedback --

    @socks -- I am anxious to see if some of this is useful for you. (You know, what with that awful glitch you seem to have caught :D )

    @SnapFireStudios -- yes you can create an overshoot and bounce back function. If interested I can send it to you in a PM. I'm afraid the equation will look unintelligible. But it does work.

    @Braydon_SFX -- thanks man. I guess this posting counts as 1001.

    @JarrenH -- yes they are totally interrupt-able. It might look a little over-the-top but most of the behaviors are just setting stuff up. Plus there are three sets of behaviors in most actors (EaseIn, EaseOut, and EaseInOut). That makes it look like there is much more there (than there really is).

    @beefy_clyro -- TMI??

    @ericzingeler -- Thanks! I hope its useful.
  • uptimistikuptimistik Trinidad and TobagoPosts: 3,593Member, Sous Chef, PRO
    Awesome awesome stuff as usual man!

    New Templates Daily At The Official GameSalad Marketplace GSHelper.com

  • SnapFireStudiosSnapFireStudios Posts: 1,603Member
    I'd love it if you could send that to me @RThurman, thanks!
    - Thomas

    Ignore females. Acquire currency.

  • tenrdrmertenrdrmer Posts: 9,934Member, Sous Chef, Senior Sous-Chef
    Simply amazing!!!!!

    It's not my fault I never learned to take responsibility for anything. ;)

  • SocksSocks London, UK.Posts: 12,820Member
    edited March 2013
    RThurman said:

    @socks -- I am anxious to see if some of this is useful for you. (You know, what with that awful glitch you seem to have caught :D )

    @RThurman

    The only thing I want to know is that if the last 10% of the last whole number in the interpolate algorithm is missing then who is taking it ? Someone is obviously siphoning off that tiny fraction from everyone else's interpolate behaviours and keeping those numbers for themselves, sure it's not a lot by itself, but repeated millions of times we are looking at a fairly substantial amount.

    image
    RThurman said:

    @SnapFireStudios -- yes you can create an overshoot and bounce back function. If interested I can send it to you in a PM. I'm afraid the equation will look unintelligible. But it does work.

    This would be really useful (could I see it too ?), especially if the overshoot went passed the target destination by a certain amount - then bounced back to overshoot in the other direction by a little less, then back the other way even less again (and so on) so you end up with a nice bouncy elastic wobble - or is that kind of thing a bit too much to ask of a single piece of maths ?

    Anyway, I love to see the overshoot + bounce back !

    Chees for sharing all this stuff !


    :)>-
  • SocksSocks London, UK.Posts: 12,820Member
    This stuff is definitely useful for gravity !
  • beefy_clyrobeefy_clyro Posts: 5,390Member
    @RThurman Oh yes .. Slowly digesting it! Awesome stuff as always!
  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    @Socks -- You are describing elastic easing -- rather than bounce-back easing. I haven't got elastic easing working very well yet. (Its got some fun math.) However, I did put together an elastic function that might work for you. It goes instantly to the target value and then overshoots and corrects in a decaying fashion. It might work for you.

    I put it into the format you are familiar with. It is a version of AAA*sin(self.Time*BBB)+CCC
  • LumpAppsLumpApps Posts: 2,853Member
    I found an awesome site about the subject: http://www.robertpenner.com/easing/
    It even has a function generator so you can make your own easing... erm, easy ;)
    Adobe Edge Animate uses this 'engine'.
  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    @LudwigHeijden -- Thanks for the reference. The page and its links are pure gold. Penner is the king of easing formulas on the internet. Most of the equations in the examples I gave are really (my attempt at) gamesalad interpretations of his examples.
  • LoadedLoaded Posts: 240Member
    This is great @RThurman just wish I could figure out how to recycle bullets using this method.

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    edited September 2013
    Interesting idea -- but I'm not sure how it could be used for recycling. (Maybe I'm thinking of the term slightly differently.) Could you give more detail on what you mean?
  • VolontaArtsVolontaArts Posts: 510Member
    nice, thanks so much for sharing
  • LoadedLoaded Posts: 240Member
    @RThurman I'm trying to recreate this (with your interp method)...



    But when the asteroids stop I cant get them to recycle, also I cant seem to define the beginning X / Y as the white actors location. I have 10 asteroids recycling.

    Maybe I need to re-read you method again and tinker with my logic.

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

  • gyroscopegyroscope I am here.Posts: 6,577Member, Sous Chef, PRO

    @RThurman

    Don't know how I missed this before... awesome it is though... Excellent stuff, RT! :-)

    ""You are in a maze of twisty passages, all alike." - Zork        temp domain http://spidergriffin.wix.com/alphaghostapps

  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    @Redeyearts -- You are welcome! Hope you find it useful.

    @gyroscope -- Thanks! GameSalad is great for exploring this kind of stuff.
  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    @Loaded -- OK, I see.

    There might be an easier way that will save a ton of processing. Could you simply have the asteroids change size as they get further away from the emitter. Something like this:

    Constrain Attribute: self.size.height To: magnitude (self.Position.X - emitter.Position.X, self.Position.Y - emitter.Position.Y)
    Constrain Attribute: self.Size.width To: self.size.height
  • LoadedLoaded Posts: 240Member
    Will give that a crack @RThurman

    There are many ways to skin a rabbit :)

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

  • LoadedLoaded Posts: 240Member
    edited September 2013
    RThurman said:

    @Loaded -- OK, I see.

    There might be an easier way that will save a ton of processing. Could you simply have the asteroids change size as they get further away from the emitter. Something like this:

    Constrain Attribute: self.size.height To: magnitude (self.Position.X - emitter.Position.X, self.Position.Y - emitter.Position.Y)
    Constrain Attribute: self.Size.width To: self.size.height

    This is great @RThurman , but how can I limit the size... say my asteroids start at size 15 at the emitter and I want them to end at size 40?

    Thanks in advance, I appreciate any help :)

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    @Loaded. -- That question really isn't about the topic of this thread. How about starting a new discussion with your topic? I will try to answer it.
  • LoadedLoaded Posts: 240Member
    My apologies @RThurman - didnt mean to digress, just get over excited sometimes ;)

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

  • RThurmanRThurman Posts: 2,785Member, Sous Chef, PRO
    No problemo! I wasn't trying to be snarky. It's just that you have a really good (but unrelated) question. If I answer it in this thread, it will just get lost and no one will ever see it.

    Think of all the millions of GameSalad users who will search on the forums for a question just like yours. But because its buried in an unrelated discussion, it will never be found.

    How about starting a new thread and title it something like, "How to make actors grow and shrink according to distance from some arbitrary point." (Hmmm.... thats too long. You better think of a shorter title!)
  • LoadedLoaded Posts: 240Member
    Coolio, I can appreciate that - it's good see a mod looking out for the community :)

    Website » Twitter » Facebook » Loaded Arts - Fun for thumbs.

    Developer Blog » 08/01/2015 - Week 72 – Apple, the great dictator…

«1
Sign In or Register to comment.