4-wall code

The animation below, from MSoft's intermediate SVG tutorial , is simplicity itself,
once one understands the original ball across the viewport code. What has been added:
a check has to be done at every turn to see if the side of the ball coincides the wall coordinate.
If it does, then the animation continues but either the x or y coordinate needs to go in
reverse while the other stays the same...

                                                                           *  *  *

Things get quite a bit  more complicated when one tries to deal with collision between balls at the same time, which is what the ne3xt example proposes.

It is useful to keep in mind that everything will get resolved with vectors. Our balls are actually circles in 2-d space, so that their areas are taken as proxies for their mass. When they collide, their radii can be seen to align, but the moment of force need not. And to redirect them, one needs to situate them with respect to the frame of reference.

The tutorial invites us to look at the code from view source code on example4.

http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/intermediate/04_circlesCollide.html