HTML5 and JavaScript Projects

Building the Application and Making It Your Own

The two applications for simulating the bouncing of a video clip ball in a two-dimensional box contain similar code, as does the program that produced the picture of the trajectory. A quick summary of the applications follows. The video applications are summarized by the following:

1. init: initialization, including adapting to fit the window and setting up the timed event for invoking drawscene
2. drawscene:
   1. Erase the canvas.
   2. Determine new location of video (virtual ball) using moveandcheck.
   3. Either draw the image from video at a specified location on the canvas or reposition the video element to a specified position.
   4. Draw paths on canvas to act as a mask to the video.
   5. Draw the box.
3. moveandcheck