Asee peer logo

Web-Based Scripts for Animating System Simulations

Download Paper |


2011 ASEE Annual Conference & Exposition


Vancouver, BC

Publication Date

June 26, 2011

Start Date

June 26, 2011

End Date

June 29, 2011



Conference Session


Tagged Division

Computers in Education

Page Count


Page Numbers

22.1673.1 - 22.1673.10



Permanent URL

Download Count


Request a correction

Paper Authors


Ames Bielenberg Swarthmore College

visit author page

Ames Bielenberg is an engineering student at Swarthmore College.

visit author page


Erik Cheever Swarthmore College

visit author page

Erik Cheever is a Professor of Engineering at Swarthmore College. He teaches in the areas of Circuits, Electronics, Linear Systems, Control Theory, and DSP.

visit author page

Download Paper |


Web-based Scripts for Animating System SimulationsVisualizing the behavior of physical systems can be an invaluable tool for a student’sunderstanding of linear system dynamics. When presenting web-based educational materialinvolving such systems there have been two standard choices. In the first, the material ispresented with a static drawing of the system complemented by graphs of displacements,forces… along with accompanying text to try to explain what is happening, exactly as a textbookwould. The second method involves using a web technology (e.g., Java, Javascript, Flash…) tocreate an animation of the system moving dynamically. Clearly the second method is preferablebut requires a good understanding of the technologies used and a considerable investment of timeto create each animation.To lessen the difficulty of producing web-based animations, we have created an easy to usescripting system for defining the system by its constitutive mathematical relations, creating adrawing that depicts the system, and then animating it. The system is described mathematicallyby a state-space model (i.e, A, B, C and D matrices). The drawing of the system is described interms of graphics primitives commonly used to depict linear systems. For translating mechanicalsystems this consists of such commonly used objects as springs, masses, dashpots and slidingfriction, along with dynamically resized arrows to show force and displacement. For electricalsystems primitives exist that represent resistors, capacitors, and inductors as well as arrows toshow current and dials to show voltage. Other types of systems include rotating, thermal fluid,and electromechanical. Finally the system drawing is animated upon pushing of a “Go” button.There is also the capability to add a dynamically generated plot below the animation that showsimportant system variables.The scripting system is written in JavaScript and makes use of the Raphael vector-graphicslibrary. Vector graphics allow the graphics to remain sharp when scaled to any size andultimately, when printed. There is no need to know JavaScript to use the system; the user needonly add a script to any HTML document. We have a fully functional system that can describe,draw, and animate a simple mass-spring-dashpot system with about ten lines of script, while alsobeing capable of simulating much more complicated systems.

Bielenberg, A., & Cheever, E. (2011, June), Web-Based Scripts for Animating System Simulations Paper presented at 2011 ASEE Annual Conference & Exposition, Vancouver, BC. 10.18260/1-2--18412

ASEE holds the copyright on this document. It may be read by the public free of charge. Authors may archive their work on personal websites or in institutional repositories with the following citation: © 2011 American Society for Engineering Education. Other scholars may excerpt or quote from these materials with the same citation. When excerpting or quoting from Conference Proceedings, authors should, in addition to noting the ASEE copyright, list all the original authors and their institutions and name the host city of the conference. - Last updated April 1, 2015