Conference Logo
Animating Web Pages
with the TI-92

David Bowers, University College Suffolk, UK

Picture of TI-92
Picture of GraphLink

Notes on document structure:
The main document is on one page. Scroll down to read the document in its entirity. Alternatively, jump to the sections in any order by clicking the index above. At the end of each section you may return to the index.
Some sections contain links to additional pages with further material.

Abstract

The TI-92 provides a dynamic environment for exploring mathematics. We show how the output of the TI-92 can be used to create animated images for use in web pages which maintain the dynamic features of the original TI-92 investigation. This demonstrates an advantage of web-based teaching material over static paper-based resources.
KEY WORDS: TI-92, world wide web, animation, GIF, teaching resources, mathematics.


Introduction

The World Wide Web offers opportunities for providing learning material in qualitatively new ways. Such material can be regularly updated, is available remotely and on demand, and can incorporate interactive and multimedia features hitherto not possible using paper-based resources. This is true in mathematics as in other subjects.

Computer algebra systems, in particular the Texas TI-92, provide a learning environment in mathematics which is interactive and dynamic. It is unfortunate that most supporting material which includes the use of the TI-92, either teaching students the functionality of the machine or demonstrating its power as a tool for representing the dynamics of key mathematical concepts, tends to be paper-based and hence static in nature. This means that if such teaching material wishes to highlight the visualisation of the underlying processes, it can do so at best using a number of printed screen dumps.

If advances in computer and calculator technology can provide insights into the dynamic features of mathematics, it is desirable to have these features available within the medium through which the mathematics is presented. Web pages allow this. We shall demonstrate how the TI-GRAPHLINK can be used with freely available shareware programs to produce animated images which can be inserted into web pages to provide a dynamic display which simulates what appears on the screen of the TI-92.

The advantages of using an advanced calculator such as the TI-92 to produce the images within web pages are two-fold. Firstly, there can be no doubt as to the "validity" of the mathematical properties demonstrated in the display. Many traditional textbooks (and not a few websites!) contain diagrams which have been produced "by hand" using some drawing package, and which are sometimes unrealistically distorted to exaggerate certain features. In such cases, the reader might be excused for wondering whether the intersection point, parallel lines, slope of the graph or whatever really do look like that, or whether they have not just been artificially constructed. A screendump from a "trusted" source can allay such misgivings, and even encourage the reader to reproduce it.

The second advantage for the purposes of this paper is of a more technical nature. We shall see in the next section that to produce an animated image, each "frame" has to be of an identical size and the elements within the frame have to appear in identical positions (except those elements which are currently "moving"). The Get Screen command with the TI-GRAPHLINK produces screenshots of consistent size and quality, and the TI-92 itself allows screen settings to be saved so that things such as axes, scale and layout can remain constant.


What is an Animated GIF?

A GIF is the generic name (short for Graphic Interchange Format) for one type of image which can be viewed directly in a web browser. These image files have the obvious file extension .gif, for example mygraph.gif. Graphics software packages such as Paint Shop Pro allow images to be converted into gif format.

It is possible to produce animated GIF images. These consist of a set of individual GIFs which are overlaid in quick succession like "frames" in a film. If the individual images are essentially identical apart from one element which changes position from frame to frame, then the animated GIF will appear to show that element moving in real time. This is the same principle as those booklets which were popular a hundred years ago, where flicking quickly through the pages seemed to show a moving film.

Here is an example of a set of GIF images which combine together to make an animated GIF:

fred01.gif fred02.gif fred03.gif fred04.gif fred05.gif fred04.gif fred03.gif fred02.gif fred01.gif fred00.gif

fred.gif

The actual animation is produced from the individual images using a special piece of software. Details and sources of some such animation programs, many of which are available as shareware or trial versions, are given in the reference section below. GIF animation programs all follow the same basic structure. They require the individual GIF images to have been created first, and then copied into the animation programme as "frames" for the final animation. In the example above, the static images were saved as fred01.gif , fred02.gif , fred03.gif etc, and the final animated image was called fred.gif. Most animation software allows the time lapse between each frame to be specified, meaning the animation can shown at different speeds, and many further features are usually supported.

In this paper, we show examples of animated GIFs which have been produced using screenshots taken from the TI-92. It should be noted that the TI-GRAPHLINK software will not save the screenshots in .gif format. They should be saved as a .tif file, and then copied into a graphics package such as Paint Shop Pro and re-saved as a .gif file type before being imported into the animation program.

In the following sections, we give a variety of ways in which these animations can be used to provide a dynamic image which, when included within a web page, can illustrate mathematics in a qualitatively superior way to the static images used in traditional paper-based teaching materials.


Application 1: Illustrating Dynamic Processes

When studying the graphs of functions, it is important to understand the effect on the graph of varying certain function parameters. This introduces the idea of a "family" of curves, each of which can be deduced by applying a sequence of transformations.

The most well-known graphical transformations of the "basic" graph y = f(x) include the cases

  • y = f(x) + a
  • y = f(x - a)
  • y = a.f(x)
  • y = f(a.x)
for some constant a.

The case y = f(a.x) , for example, represents a "squeeze" towards the y-axis, whereby the horizontal distance of each point on the curve from the y-axis is multiplied by a scale factor of 1/a. This can be demonstrated graphically by choosing different values of a and comparing the graphs.

An animation which cycles through such a family of curves is shown below:

The original graph y = f(x) is shown as a dotted line, and the graph y = f(a.x) is superimposed in succession for various values of a. It can be seen that as a increases, the graph becomes "squeezed" in towards the y-axis. As a decreases, the graph becomes more "stretched out" away from the y-axis. The effect of the numerical value of a can be identified by firstly watching the animation for a few cycles, and then concentrating on the varying equation of the second graph shown on the right.
Note the points where each graphs cuts the x-axis compared with the original graph, and relate these to the corresponding value of a.

As a further example, here is an animation which shows the transformation represented by y = f(x - a) which corresponds to a horizontal translation of a units along the x-axis. As in the example above, the position of the roots of the transformed graph should be compared with the roots of the original graph and related to the corresponding value of a.

Animations which demonstrate the other graphical transformations can be produced in a similar manner.

Click here to see a sample page from the Maths Help website which incorporates an animated GIF to illustrate an application of graphical transformations.

Another area in mathematics which is essentially dynamic in nature, but which is rarely presented as such, is the "limiting case" in calculus. An example which every student of elementary calculus meets is the definition of the gradient of a curve at a given point (P) on the curve being the limit of the gradient of the chord joining P and a neighbouring point (Q) on the curve as Q approaches P. The presentation of this on the chalkboard of a traditional classroom involves much use of the teacher's board ruler and the students' imagination. How much simpler would be the presentation of an animation such as that below:


Application 2: Demonstrating Visual "Proofs"

Dynamic geometry computer software such as Cabri Geometre, and its version included with the TI-92, allow students to produce geometric constructions and explore their properties. Selecting and "dragging" a point is a particularly effective way to verify that certain properties of the construction continue to hold even when the original shape is deformed.

Unfortunately, the excitement of seeing the results on the computer or TI-92 screen cannot be reproduced through printed book pages or worksheets. At best, a sequence of printed images can be shown, and the reader has to use her imagination.

Within a web document, however, animated GIFs can be created using screendumps from the TI-92 which show much more realistically the result of dynamic geometry investigations. For example, the fact that the medians of a triangle are concurrent can be demonstrated in the image below:

Of course, looking at this animated image does not impart the full excitement of using the TI-92 itself, since the interactivity of actually choosing a vertex yourself and deciding where to drag it is not permitted. (We are working on using more sophisticated programming such as JavaScript.) However, the reader of the web page can appreciate this visual "proof" without ever having had access to dynamic geometry software. The author of the web page can always make the animation more impressive by taking the time to increase the number of screendumps which make up the "slide show", and perhaps choosing to vary the position of more than one vertex at a time.

Another example of an animated visual "proof" is given below, which demonstrates that the angle in a semicircle is always equal to 90 degrees. Note that the angle measuring facility has been used. The speed of the animation has been varied, so that on the slower run through the reader can verify that the base angles are indeed complementary.

Another geometrical result which can be verified using dynamic geometry is the fact that the angle subtended by a chord at the centre of a circle is double the angle subtended at the far circumference. We choose to present a static screendump of one particular case, since this result is perhaps more easily explained by example rather than in words. Note that importing the screendump firstly into a graphics package allows us to annotate it in colour before saving it in GIF format. Alongside we show the animated version, where the angle measurements have been dragged to the text:

The "visual proofs" above are taken from the topic of geometry. However, results from other areas of mathematics can also be demonstrated visually by making use of animations. In the topic of analysis, it is not expected that students on an introductory course should prove formally that the Taylor series of a function converges, although a general understanding of the concept of convergence is required. The animation below shows the graph of sin(x) successively overlaid by the graphs of higher order Taylor series approximations, up to the approximation of order 25. This single image within a web page is both convincing and economical in demonstrating the increasing "goodness" of the approximation:


Application 3: Aiding Conceptual Understanding

A well-known saying claims that "a picture speaks a thousand words". The emphasis that current mathematics education places on the inter-relationship between data, functions and graphs underlines the value of a graphical representation of the functional relationship between variables.

Two-dimensional graphs of a function of the form y = f(x) are the traditional fare of elementary mathematics courses. However, computer algebra systems such as DERIVE and the TI-92 also allow 3D graphs to be produced for functions of the form   z = f(x,y) which can enrich the experience of students (as well as being great fun to look at!) A 3D function plot can be best understood by viewing it from different angles, something which is fairly slow to do using the TI-92 (using "CyclePic") and which cannot really be appreciated by looking at a sequence of printed graphs on a page. Look now at the following animation, and be amazed!

Animations based on viewing a 3-D surface plot from various angles in succession can make the "hidden" features such as peaks and troughs more easy to identify.

Students tend to find functions given in parametric form less intuitive and hence more difficult to visualize and sketch than those in explicit function form . Graphics calculators can aid understanding by allowing the user to "trace" along the curve and follow the change in the parameter value. In particular the TI-92 allows a table of (t,x,y) values to be presented alongside the graph so that the user can appreciate the independent variation of x(t) and y(t) and how they define the position on the curve. The printed page of a textbook cannot allow such a graph to be traced out dynamically in real time, and authors tend to rely on the rather clumsy labelling of "t=-1", "t=0", "t=1", "t=2" etc at appropriate places along the curve. However, web pages can include animated images which can be made to simulate what appears on the TI-92 screen when investigating the shape of paramteric curves by tracing along and noting the parameter values:

x = 1 - t 2 , y = 2t - 4


x = t 2 - 1 , y = t 3 - t


x = t 2 , y = t + t -1

Similarly, curves given in polar form r = f(q) can also be reproduced as an animation, illustrating how the distance r from the origin varies with angle q.


r = 1 + cos(q)

Polar graphs often have the form of several loops. Students often find it difficult to see where the graph starts and in what order the loops are transversed. Using an animation to build up the plotting of the curve in stages can aid the understanding of the process. Again, this simulates what is seen on the screen of a graphics calculator in a way that cannot be reproduced in paper-based resource material:

r = 2.sin(2q)


Application 4: Visualising Practical Problems

Problem solving in applied maths is often little more than using standard formulae to set up a system of equations, and then solving them algebraically. Traditional textbooks do little to encourage a "feeling" or insight into the nature of the problem, since the visual representation there is restricted to static diagrams. Web pages, on the other hand, can include animation in the images, which can help to illustrate the inherent dynamical nature of many problem.

A common topic in applied maths courses concerns the motion of projectiles. For example, consider the situation where two objects are projected towards each other with different initial velocities. The problem is to establish whether they collide. In the case where the objects are projected from ground level 50 metres apart, the first with initial velocity 20 m/s at 40 degrees to the horizontal, the second with initial velocity 18 m/s at 60 degrees to the horizontal, the parametric equations of motion are given by:

and the flight paths are shown in the following animation, from which it is clear that the particles do not in fact collide:

A common mistake made by students in this type of problem is to find the equations of the two parabolic flight paths in the form y = f(x) and calculate their point of intersection as the point of collision. This error would be reinforced by the kind of static diagram which is often shown in textbooks, such as:

A popular type of mathematical activity to solve problems is simulation. While simulations can be exciting classroom activities which make use of practical apparatus or computer software, the results of the simulations can appear rather uninteresting when presented in writing, since the dynamics of the situation has been lost. Conversely, it can be difficult to enthuse students to appreciate and carry out simulations through a written description.

The dynamic features of a simulation can be captured in an image which is animated rather than static, and an animated GIF within a web page is a simple way of achieving this. We show below the running of a simulation of the well-known experiment to estimate the value of pi. A quadrant of a circle of unit radius is drawn within a unit square, and a number of points (50, say) are chosen at random within the square. Since the proportion of the area of the square covered by the quadrant is pi/4, the proportion of the points lying in the quadrant may also be taken as an estimate of pi/4, from which an estimate of pi can be deduced.

Taking sets of 50 points, we achieve estimates which are consistently not too far from the "true" value, and the concept of "not too far" can be discussed. For the purposes of this paper, we note how an animation produced using the TI-92 can highlight the dynamic nature of simulations while taking advantage of the TI-92's accuracy to produce meaningful content. The animation provides a reliable simulation of an actual simulation!


Conclusion

We have identified a variety of topics in mathematics where the provision of a "moving picture" would help to convey the mathematical properties under consideration:

  • the translations, stretches etc of the standard graphical transformations;
  • the limiting case of differential calculus;
  • the validity of geometric properties within varying constructions;
  • the convergence of series;
  • the clearer visualisation of 3D surface plots;
  • the development of 2D curves given in parametric or polar form;
  • the demonstration of dynamic models for problem solving;
  • the presentation of the runs of a simulation.
There are doubtless many more.

In all such examples, the dynamics of the situation can be created and demonstrated using modern teaching technology such as computer algebra systems and geometry software, both of which are available for computers and also as an integral part of the Texas Instruments "supercalculator" TI-92. Good classroom practice for teachers and lecturers is to incorporate the use of this technology, either for whole-class demonstration or for the students to work with individually.

Unfortunately, the "moving pictures" are dependent on the availability of an appropriate machine running the appropriate software. (They are also dependent on the user being able to create or re-create the desired results with the machine.) The other main medium of learning, namely the printed page of the textbook or worksheet, is not able to present graphics or images in moving form. It is an increasing anomaly that learning material which aspires to encourage the use of technology to assist the conceptual understanding of dynamic processes in mathematics does so by using static printed screendumps.

The internet now provides a platform for the provision of learning material in qualitatively new ways. Whereas until only a few years ago the web was restricted to simple text and pictures, it can now host animation, video and sound without compromising on the simplicity and essential universality of the browser interface for the end-user.

In this paper we have endeavoured to show how animated images can be created to enhance web-based mathematics teaching materials with little need for expertise in computer programming. An "animated GIF" can be created by putting together a series of screenshots from the TI-92, using inexpensive and simple graphics tools which are freely available as shareware.

Although the examples of animations presented in this paper are admittedly not as sophisticated as many of those seen in commercially produced multimedia CD Roms, there are two advantages in presenting them in this form.

Firstly, by taking the screenshots directly from the TI-92, we can be sure that the images are mathematically accurate and reliable. We are doing no more than replicating what we would actually be using ourselves in the classroom or lab. Students who were already familiar with the TI-92 ought to recognise and identify with the animated images on the web page, and be encouraged to investigate and reproduce the display next time they have a TI-92 to hand.

Secondly, the ease with which such animations can be produced cannot be overstressed. It is our contention that, as the internet continues to gain popularity as an educational medium, teachers will become accustomed to producing one-off web pages for student "consumption" just as they nowadays think nothing of wordprocessing a paper handout. (Do you remember that quantum leap when you first wordprocessed a worksheet for your students rather than handwriting or typing it?)

The power of the TI-92 and the efficiency of the TI-GRAPHLINK, together with the enthusiasm of the educator and the open standards of the world wide web, can contribute to new standards of mathematics learning material which incorporate the dynamic features now available in computer algebra systems and other mathematical software.


References

One of the easiest to use GIF Animators is the GIF Construction Set from Alchemy Mindworks Inc. Their website has a variety of examples and demos:
http://www.mindworkshop.com/alchemy/gifcon.html

Version 5 of the popular graphics software package Paint Shop Pro includes the application Animation Shop, which guides you through the creation of animated GIFs.
http://www.jasc.com/psp5.html

Descriptions of a variety of web graphics tools, including reviews of several GIF animators, can be found at:
http://search.zdnet.com/pcmag/features/webgraph/

An example of online learning material which includes static screendumps from the TI-92 where animated images might be more instructive, can be found at:
http://www-cabri.imag.fr/nathalie/ti92/fiche16/fich16.htm

And finally, the website of the machine which makes it all possible:
http://www.ti.com/calc/docs/92.htm


Notes on the Author

David Bowers is Senior Lecturer in Mathematics & Statistics at University College Suffolk, Ipswich, UK. (Click here for more information about the College). He is interested in all areas of technology-assisted learning in mathematics, and is currently manager of the College's newly established resource-based learning and skills support workshop.

Recent relevant publications:

Bowers, D. (1995) "Computer Algebra in the Classroom", Mathematics Support Newsletter, 3.

Bowers, D. (1995) "What was the Question?", International DERIVE Journal, 2(2).

Bowers, D. (1995) "Changing Assessment Criteria in A-level Mathematics with DERIVE", in: Barzel, B. (Ed), Tagungsband der Derive Days Düsseldorf, Landesmedienzentrum Rheinland-Pfalz.

Bowers, D. & Townsley-Kulich, L. (1996) "Total Resource Management" in: Monaghan, J. (Ed) The State of Computer Algebra in Mathematics Education, Chartwell-Bratt, UK.

Bowers, D. & Beaudin, M. (1996) "Logistics for facilitating CAS Instruction" in: Monaghan, J. (Ed) The State of Computer Algebra in Mathematics Education, Chartwell-Bratt, UK.

Bowers, D. (1997) "Computer Algebra and Secret Codes", Micromath, 13(2).

Bowers, D. (1997) "What was the Question - A Framework for Investigational Activities using DERIVE" in: Graham, E. (Ed) Mathematical Activities with DERIVE, Chartwell-Bratt, UK.

Bowers, D. (1997) "Maths Support for Students with Visual Impairment", Mathematics Support Newsletter, 6.

Bowers, D. (1997) "Opportunities for the Use of Computer Algebra Systems in Middle Secondary Mathematics in England and Wales", Zentralblatt für Didaktik der Mathematik 97/4

Recent relevant conference papers

"Enhancing the quality of student-centred mathematics": 27th International Conference of the Association for Educational and Training Technology, York, UK, 6-9 April 1992.

"The use of authoring software to enhance the quality of student-centred mathematics provision": International Conference on Technology in Mathematics Teaching, Birmingham, UK, 17-20 September 1993.

"What was the question? Structured investigational activities using DERIVE": The First International DERIVE Conference, Plymouth, UK, 11-15 July 1994.

"Customised studyware in mathematics": The Seventh International Conference on Technology in Collegiate Mathematics, Orlando, USA, 17-20 November 1994.

"Die Erweiterung des Erwartungshorizonts durch DERIVE": International Council for Computer Algebra in Mathematics Education, Düsseldorf, Germany, 19-21 April 1995.

"Attracting teachers to DERIVE": International Symposium of the Austrian Centre for the Didactics of Computer Algebra, Honolulu, USA, 30 July - 3 August 1995.

"Computer-based studyware in mathematics": International Conference on Technology in Mathematics Teaching, Edinburgh, UK, 4-7 September 1995.

"On establishing a mathematics workshop": Second National Conference on Support for Mathematics in Further & Higher Education, Luton, UK, 14 September 1995.

"On Plotting Piecewise Defined Functions": DERIVE/TI-92 Days Leeds, Leeds, UK, 13-15 April 1996.

"Exploiting DERIVE's Vector Function": The Second International DERIVE Conference, Bonn, Germany, 2-6 July 1996

"Animating Web Pages with the TI-92": The Third International DERIVE Conference, Gettysburg, USA, 14-17 July 1998

Contact details

David Bowers
Mathematics Workshop
University College Suffolk
Rope Walk
Ipswich
Suffolk IP4 1LT
United Kingdom
Tel: (+44) 1473 255885
Fax: (+44) 1473 230054
Email: david.bowers@suffolk.ac.uk
Homepage: http://website.lineone.net/~davidbowers/

The URL of this document is http://website.lineone.net/~davidbowers/Getty98/main.htm


This website was created by the Author for dissemination in good faith to the participants at the Third International Derive & TI-92 Conference held in Gettysburg, USA, July 14 - 17 1998. It may be reproduced in whole or in part for bona fide educational use, on the condition that the source is acknowledged.
David Bowers, July 1998