O'Reilly logo

HTML5 and JavaScript Projects by Jeanine Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required