Creating Dynamic Content

Objectives

Bouncing-Ball Example

• A number of conditions must be created to make a ball appear to animate:

  • Velocity, or speed in a specific direction to make it move.

  • Gravity, which will pull it back toward the ground once it bounces

  • The ball must detect the ground and the edges of the bounding area (collision) to determine when to bounce.

A. Example: HTML5 and JavaScript

Using HTML5 and JavaScript, a bouncing-ball animation can be created for viewing on the web.

• A canvas, or rectangular space visible to the user, is created in HTML. This space is where the JavaScript animation is added.

• To create the JavaScript animation, scripting is used to identify the variables, or changing conditions, such as velocity, in which the ball bounces as previously identified.

• The ball is drawn in its initial position (x and y coordinates), using mathematical functions.

• To animate the ball, the canvas is cleared and the ball is then quickly redrawn in its next location. This means that, although the viewer thinks motion is occurring because the action happens so quickly, the eyes simply cannot process the rapid redrawing that occurs and instead sees it as movement. This process continues until the ball's coordinates reach one of the four edges.

• Whenever the ball's new coordinates reach an edge of the canvas, the direction of the next drawing of the ball is reversed to simulate bouncing against the edge.