Question about Interpolate

wpaten

Hey guys,

I spent some time working in Corona and something that they have is different modules that allow me the ability to have playful interpolations with images. Things like Bounces and such. I wasn't sure if there was a mathematical way to incorporate these kinds of things into the Interpolate Behavior that we have now so we had more to choose from, other than just the standard 4?

Thanks,
wpaten

Braydon_SFX

Sadly, no. We don't have that option, but it would be greatly welcomed. If you want a bounce effect, you're going to have to use several timers and interpolate behaviors in order to achieve that - i.e - interpolate self.width to 50: duration 0.2. After 0.2 seconds, interpolate self.width to 40: duration 0.2. After 0.4 seconds, interpolate self.width to 45 --- and so on.

Socks

You can do it with a sine wave that has a rapidly diminishing radius and is truncated so only uses positive (0-1) values (the speed the angle is swept through would need to increase at the same rate the radius decreases).

wpaten

Sadly, no. We don't have that option, but it would be greatly welcomed. If you want a bounce effect, you're going to have to use several timers and interpolate behaviors in order to achieve that - i.e - interpolate self.width to 50: duration 0.2. After 0.2 seconds, interpolate self.width to 40: duration 0.2. After 0.4 seconds, interpolate self.width to 45 --- and so on.

Yeah that's what I have been doing. :-)

You can do it with a sine wave that has a rapidly diminishing radius and is truncated so only uses positive (0-1) values (the speed the angle is swept through would need to increase at the same rate the radius decreases).

@socks

Ahhhhh. Nothing like sweet, sweet Gopple-Dee-Gook from a Mad Scientist Genius, to make a man feel quasi-neantherthal-ish. ;-)

Socks

@wpaten

Ahhhhh. Nothing like sweet, sweet Gopple-Dee-Gook from a Mad Scientist Genius, to make a man feel quasi-neantherthal-ish. ;-)

Ha, whoops ! Yeah, I didn't explain that very clearly, reading it back it does sound a little mysterious!

Basically what I mean is if your actor is moving up and down (or left and right) via the magic of a sine wave . . . .

Constrain Y position to radius*sin(angle) (assume the angle is constantly changing)

. . . and the angle is limited so only the top half of the sine is used . . .

Constrain Y position to radius*sin((angle)%180)

. . . It will now 'bounce' rather than smoothly move up, down, up, down (etc), now reduce the radius over time . . .

Constrain Y position to ATTRIBUTE*sin((angle)%180)
Interpolate ATTRIBUTE from big to small

. . . so you have a bounce that is getting progressively smaller, like a ball bouncing on the floor loosing its kinetic energy . . . but the length of each bounce remains the same (the speed at which you are changing the angle the sin function is operating on), so you also need to increase the speed the angle is being swept through to compensate for the reducing size of the bounce, first let's use game.time to sweep through the angle . . . .

Constrain Y position to ATTRIBUTE*sin((game.time)%180)
Interpolate ATTRIBUTE from big to small

. . . now let's speed up game.time as the radius reduces . . .

Constrain Y position to ATTRIBUTE*sin((game.time*ATTRIBUTE2)%180)
Interpolate ATTRIBUTE from big to small
Interpolate ATTRIBUTE2 from small to big

. . . et voilà, you have a bounce that settles . . . actually it never really settles, so also throw in a rule to kill off the bounce below a certain threshold . . .

If ATTRIBUTE > a tiny size then do this:
Constrain Y position to ATTRIBUTE*sin((game.time*ATTRIBUTE2)%180)
Interpolate ATTRIBUTE from big to small
Interpolate ATTRIBUTE2 from small to big


Hope that makes a little more sense, when I'm at my computer later I'll stick it into GameSalad and so how it looks, it should look bouncy!

wpaten

@socks

Ok I see what you did there. Very sweet.

Your example works if the actor is already moving? What if it is stationary? So for example, if you have a button on the screen that when clicked, will have a bouncy effect (getting smaller and then larger with the bouncy effect applied to it). The x & y would be replaced with w & h, however how would you apply the bounciness from a stationary standpoint?

tatiang

Ahhhhh. Nothing like sweet, sweet Gopple-Dee-Gook from a Mad Scientist Genius, to make a man feel quasi-neantherthal-ish. ;-)

My favorite forums quote of all-time. Now to go back and read the gook...

Socks

@wpaten

Your example works if the actor is already moving?

Not at all, that's up to you.

What if it is stationary?

Write on it !

So for example, if you have a button on the screen that when clicked, will have a bouncy effect (getting smaller and then larger with the bouncy effect applied to it). The x & y would be replaced with w & h . . .

Yes, exactly, just swap the X and Y (or whatever you are changing) to the W & H.

however how would you apply the bounciness from a stationary standpoint?

Not 100% sure about what this question means, let me just make a couple of quick demos . . . . .

Socks

@wpaten

Ok, that was straightforward enough . . . click to bounce:
(of course all the values can be changed to suit)


Link: https://www.mediafire.com/?kn0onns9t9rpooq

Ok, now to try a button . . . . back in a second . . .

Socks

@wpaten

Here you go, same basic deal, but applied to height and width . . . .
(again, there's a ton of scope to adjust all the settings to taste)

Link: https://www.mediafire.com/?fxy8x2cqnls8hg7

wpaten

@wpaten

Here you go, same basic deal, but applied to height and width . . . .
(again, there's a ton of scope to adjust all the settings to taste)

Link: https://www.mediafire.com/?fxy8x2cqnls8hg7

Ahhhhhhhhhh!!!!!! That is absolutely awesome!!!! Thank you!!!!

That's 14 Exclamation Marks worth of Fantastic. :-)

wpaten

@socks

You should add this file to that thread with all the useful code as well.

Socks

@wpaten

Thank you!!!!

Actually I've just thought of a (very obvious) way you could simplify it all . . . . hold on, back in a second . . .

Socks

Yeah, you can dump both of the interpolates and extract the rising 'speed' value and decreasing 'radius' value from the actor's own time . . . which GS developer doesn't want to get rid of two interpolates !

It should look something like this . . .


(20-( self.Time *20))*sin((( self.Time *(400+( self.Time)*400))-90)%180)+50

Socks

Whoops ! No . . . it shouldn't look like that, the time multiplier is in the wrong place, It should look more like this . . .

(20-( self.Time *20))*sin((( self.Time *(400+( self.Time *400)))-90)%180)+50

Hold on, I'll try it out . . . . back soon . . . .

Socks

Here you go, the values probably need a little tidying up, but the basic idea is there, the same deal, a bouncing button using the same truncated sine wave idea with a reducing radius size, but done without the attributes or 'interpenetration' ( ) behaviours:

Link: https://www.mediafire.com/?6p7w4hx2mb94dzh

wpaten

@socks

Beautiful!! The beauty of this is that with a few minus signs put in, you also have the ability to have them shrink on touch instead of grow on touch.

Thanks a bunch man. Much appreciated.

Socks

@wpaten

@socks

Beautiful!! The beauty of this is that with a few minus signs put in, you also have the ability to have them shrink on touch instead of grow on touch.

Thanks a bunch man. Much appreciated.

Yeah, make some values negative, make some positive, even try negative in the width equation where they are positive in the height equation, basically throw stuff around to see if you come up with something nice !

If you want it to shrink on touch, play around with these values . .

(30-( self.Time *(30))*sin((( self.Time * (400+( self.Time *600)))-90)%180)+50


The basic 'core' size.
How much the size grows and shrinks by.

RThurman

Here is another way to do it. This method uses Hooke's Law. (Which is a generalized formula for springs and such.)

The basic equation looks like this:
Constrain Attribute:[ self.velocity ] To:[ ( self.velocity + ( self.targetWidth - self.Size.Width )* self.k )* self.damp ]
Constrain Attribute:[ self.Size.Width ] To:[ self.Size.Width + self.velocity ]

Basically its creating a velocity that is used to readjust the width. But the velocity is too fast and overshoots the target width. Then it goes in the opposite direction but overshoots again. (And so on.)

It would oscillate forever, but we add a dampening effect that slightly slows the velocity down (kinda like friction). That's the attribute: self.damp.

There is also an attribute called: self.k. (That's what Hooke called it. And it stuck, I guess.) Its a measure of how springy the object is.

You can mess with different values of self.damp and self.k. It will give your button different properties.

Here is a demo:
http://www.mediafire.com/download/zwlvniqtseuala9/SpringyButton_HookesLaw.zip

Socks

@RThurman

Great stuff !! >-

myReallyFancyButton

wpaten

@RThurman

Hey thanks man!!! Very nice.

RThurman

@Socks -- thanks! Ain't GameSalad grand? What an incredibly versatile tool.

@wpaten -- you are welcome! By the way, all my friends and family really love the children's apps you produce. They are just right!

wpaten

@wpaten -- you are welcome! By the way, all my friends and family really love the children's apps you produce. They are just right!

Wow! Thank You. That means a lot. :-)