Web programming 12 Physics and Animations Subscribe Pub Share

Now, in real-world physics, things are more interesting and we want our bouncing ball simulation to be more complete: we have to take care about changing the shape of the ball at the bottom: let's say it's a super-foam ball that will deform into an ellipse and then rebound back.

Here is just the deformation... we start with a squeeze which will continue with relax which continues back with squeeze and they'll keep going at it:

Our initial two phases of the movement were down and up, so we will then have four phases of movement, to insert squeeze and relax.

So, there will four chained animations: down -> squeeze -> relax -> up -> down and so on...

You gotta admit that we got pretty far. Not only did you learn to create web pages, but you learned some programming, graphics and now we're getting into physics and simulating the real-world.

Seriously, that's pretty cool! We're well on our way to creating the first game...

Now prove you're a master of programming - go to play mode and make the ball bounce diagonally!

I'll help you with some thoughts: it has the same 4 animations, except the coordinates will be differnt. Also, the final ellipse radiuses will be different, no? Suppose it bounces at the corner of a room...

About homework... let's try to make the ball bigger:

You have to play with it until you make it look more realistic... hint: the mistake is about the center of the elipse...

Have fun!


Was this useful?    

By: Razie | 2014-06-19 .. 2016-11-07 | Tags: post , html , lesson , hacker.factory , javascript , animation , raphael


See more in: Cool Scala Subscribe

Viewed 1179 times ( | History | Print ) this page.

You need to log in to post a comment!