Creating Animated Text for Web Pages Using Difference Equations and JavaScript

Paul Bouthellier

Department of Mathematics and Computer Science
University of Pittsburgh-Titusville
Titusville, PA 16354
USA
Phone: (814) 827-4432
Fax: (814) 827-5574
pbouthe@pitt.edu

list of all papers by this author

Click to access this paper: paper.html

ABSTRACT

Text in web pages can be broken into arrays of individual letters whose location on a web page can be controlled by using a layer for each letter. Difference equations can be derived for both the x- and y-coordinates of each letter. Difference equations are created into order to produce various effects on the page. Examples of such effects are: Letters of a given sentence following the mouse in the form a wave, text strings exploding into letters and flying off the page as the result of some user action, text appearing as streams of words shot out of a cannon, and letters appearing to fly in various formations across a page.

Students first need to decide on what sort of motion(s) they wish the letters to perform, such as a double sine wave which follows the mouse. The x- and y-coordinates of the positions of the letters on the web page then need to be determined. Difference equations whose output values are these coordinates then need to be created.

Such projects require a good deal of mathematical sophistication on the part of the students, generally at the level of differential equations. Not only do the difference equations need to be derived, but their limiting behavior needs to be analyzed. Showing the students how to create the JavaScript is generally the simple part.

Creating such animations has proven very successful in two ways: First students have to model the behavior they wish to create. They then run the web page to see if their equations worked. If not, they need to find what went wrong and fix any errors. Secondly, students enjoy altering the difference equations of their existing pages and seeing what happens. They then analyze their equations in order to understand what they observe.

Keyword(s): Internet