Web-Based Scripts for Animating System Simulations

Ames Bielenberg; Erik Cheever

Download Paper | Permalink

Conference: 2011 ASEE Annual Conference & Exposition
Location: Vancouver, BC
Publication Date: June 26, 2011
Start Date: June 26, 2011
End Date: June 29, 2011
ISSN: 2153-5965
Conference Session: Simulation
Tagged Division: Computers in Education
Page Count: 10
Page Numbers: 22.1673.1 - 22.1673.10
DOI: 10.18260/1-2--18412
Permanent URL: https://peer.asee.org/18412
Download Count: 429

Paper Authors

biography

Ames Bielenberg Swarthmore College

visit author page

Ames Bielenberg is an engineering student at Swarthmore College.

visit author page

biography

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 | Permalink

Abstract

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.

Citation
Format

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

TY - CPAPER
AB - 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.
AU - Ames Bielenberg
AU - Erik Cheever
CY - Vancouver, BC
DA - 2011/06/26
PB - ASEE Conferences
TI - Web-Based Scripts for Animating System Simulations
UR - https://peer.asee.org/18412
DO - 10.18260/1-2--18412
ER -