Math, Physics, and Animation - HTML5 Canvas - page 247

Notice that the amount is quite small. Friction does not have to be a large value to look
realistic—it just needs to be applied uniformly each time drawScreen() is called. In
drawScreen() , we apply friction to the x velocity like this:
ball.velocityx = ball.velocityx - ( ball.velocityx*friction);
This is the same type of proportional application of friction we used with the colliding
balls, but again, this time we applied it only to the x velocity.
Figure 5-20 shows what this final version of our application looks like when executed
in a web browser.
Figure 5-20. Ball bouncing with gravity, elasticity, and friction applied
Example 5-17 gives the full code for CH5EX17.html , the final code of our simple gravity,
simple elasticity, and simple friction example.