9 - Movement (Bounce Effect)

One of the classic "old school" effects is using a bounce effect of a logo or sprite etc..

This can be asily acheived in CODEF using Javascript commands Math.sin calculating a co-ordinate. 

For example, in order to do this simple effect on the logo used below...

...we simply need to define a variable in our code. 

var sinY=0;

Then when we draw the object, we use the following commands to calculate its position.

sinY+=0.03;

logo.draw(mycanvas,320,400-Math.abs(Math.sin(sinY)*300));

We can choose to either move the object left to right, or up and down. (In this example, I will use a vertical bounce effect, which is explained below.

Firstly we increase the value of the variable, in this case by 0.03 every loop. The higher this number, the faster the bounce, however bear in mind that the larger the area of the bounce, the speed will decrease in relation to the amount of movement requested.

Then we use our normal "draw" command, to our canvas of choice, and then the X position required (in this case, we will NOT move on the X plane (Horizontal), but we WILL move on the Y plane (Vertical), so the movement calculations are applied to the Y position.
In this case we have defined 400 as the bottom position, which is where the "bounce" will occur, i.e. when the sprite hits the bottom of the bounce, before bouncing back up again.
Then we use a minus calculation to reduce the Y position (i.e. move it upwards) by a rounded number (Math.abs) of the Sin of the movement vector 'sinY' * the total number of movement required (in this case 300 pixels less than the 400 defined earlier).
This means we will bounce from the 400 pixels Y position, upwards by a maximum of 300 pixels (100 pixels Y position) by a varying amount.

You can see this at work HERE.

Have a play around with the code and see what you can do with it!