This page was developed for two purposes. First to learn javascript, or at least understand some of the basic syntax of the language. Secondly, it was developed as a test bed for testing the code and design in a stand alone application before integrating it with the Torrey Pines Weather Page. This web page displays an image flying across the page. The moving image is done with the aid of a javascript. Therefore image movement is under the control of the web client (browser).
In the final application, the image moves in the same direction as the wind at Torrey Pines Gliderport in San Diego, CA. The direction of the image on that page is the same direction as the wind. In addition, the image moves faster of slower depending on the speed of the wind.
Although this javascript code is not complex, it is trickier than one might think, or least, more difficult that I originally expected. Trigonometric functions (e.g., tangent) calculations must be performed to compute the X and Y direction. The tricky part comes from understanding that the wind direction needs to be converted to computer window X and Y coordinates.
Image updates occur at a fixed duration (i.e., 200 milliseconds). The speed of the image, simulates wind speed by adjusting the number of pixels the image jumps during each update. Moving the image more pixels in the same amount of time, gives the appearance of higher wind speed. Lowering the number of pixels the image jumps during a fixed period of time, slows the movement of the image.
The image always starts at the center of the active area of a web page. The center of the web page is discovered when the user first opens the page. and when the image hits any of the web page borders. This allows the user to resize the page and the image will move correctly on the next update on the next collision with the "old" web page size. The image will start at a new center after resizing the window. When the image hits any of the four borders of the web page, the image returns to the center and movement begins again.
Different browsers have different definitions of the web page window. For example, IE6 considers does not consider the unused area of a web page. When the text on the page ends, that is considered to be the bottom of the window, which is not the bottom of the window the user sees. The Mozilla web browser considers the entire window when making window size measurements.
A GIF image was required in this application since it supports a "transparent" color; JPEG does not. By using a transparent color, there is no background to the image. As a result, as the image flys across the page, only the image covers the background page. If transparency were not supported, the image would be a square block and cover the entire web page background of the image.
The javascript is "browser aware", which means it was designed to work on most, if not all, modern web browsers.