Today we created a program where an animated ball bounced around the screen. Students
started by choosing an image they wanted to animate, and displaying it as part of an HTML
page. Then, Jonathan showed them how to add the proper javascript to make it move. This
involved using a timer that would change the position of the ball multiple times per second.
Once the balls were properly moving in one direction, the students realized their next
problem: the balls would not stop. To solve this, we introduced code to make the balls
bounce off the floor and the walls. When the ball reached the lower limit of where the
students wanted it to be on the page, we simply reversed its speed along the y-axis. A
similar solution for the left and right walls reversed the x-axis speed.
By the end of the class, students had created an animation just as complex as many screen
savers!