Javascript
On-Line
Learning
Interactive
Environment
for
Simulation
See the 'Simulation
Playground',
Butterflies
and the Billiards game below!
Developed by Professor
John Billingsley, Jollies allow the student to download Web pages
which
contain panels of JavaScript code. These can be edited on-screen
simply by typing in the box and then the code can be executed.
A useful simulation will give a graphical output in one for or
another. An applet is introluced here that can act as a
'whiteboard', on which any graph can be plotted in real time as the
simulation proceeds.
Althernatively shapes can be moved around the screen to represent the
behaviour of the system being simulated.
In every case, you can 'view source' to see the
engine-room of the simulation. The aim has been to keep
everything as simple as possible.
Remember that for the
code to work, you have to permit scripts to run.
Most of the code of the
'moving object' examples has been updated so that it is compatible with
IE, Firefox, netscape and other Mosilla browsers.
The first example is meant to
show that a 'real' position controller requires a lot of feedback.
The student can first see a response, but on applying a disturbance in
real time it becomes obvious that the control is 'soggy'.
Values of 100 and 50 for position and velocity gains give a much better
response - but what do these values mean in terms of natural frequency
and damping factor?!
The second
example shows a simple vehicle suspension, damped only by
friction.
Run it (IE users might need to click the text 'Run' rather than the
button).
Now change the lines of code which determine the friction and run it
again.
Moving icons are fun, but more
serious work demands a plotted graph. The third
example employs an applet to allow the JavaScript code to draw on a
'whiteboard'. The Java launch time is somewhat longer but the
actual
download is still very small. Hide one or two of your navigator
toolbars
to make more room on the screen.
It is easy to make teaching
demonstrations
with Jollies -
this example
illustrates the unit circle and
its links with the sine and cosine functions.
The use of Jollies is not limited
to control theory.
The next example illustrates
some simple image processing in which the edges of a binary
(black-white)
object are smoothed.
The 'whiteboard' applet allows
grey-scale or
full colour drawings to be made - depending on the screen driver
selection.
This
example shows a 'noisy' grey-scale image being smoothed by two
applications
of an IIR filter.
Another example of real-time moving graphics is a rotating
cube
A second version of the 'graph'
applet allows events to
be captured and acted upon, so that mouse movements can be used to edit
an image.
In this case the example is
based on the 'Bilby contest' where mobile robots find their way through
a maze. Dragging left or right mouse buttons across a square will
set it to be white or black respectively, after you have clicked the
'Build
maze' button. To see the buttons, you might have to hide one or
two
toolbars - the screen is rather full.
The trails of red or blue dots
represent
signals from the optical sensors mounted on the Bilby.
A new Bilby
simulation has been added which works entirely in JavaScript - no
applet.
Instead it uses the method of the first example, but a lot more of it!
The "Edit Maze" feature has not
been finished.
In preparation for some
'in-school'
demonstrations, a set of pages have been prepared as a simple
introduction
to animated simulation - a Simulation
Playground.
Five progressive versions exist at present:
Remember to click the 'reset'
button
before running each of them - it sets up variables according to the
instructions
you place in the 'other' text box.
A Billiards
Game has been developed for use in connection with the Education
Victoria
STEPS TV programmes for primary schools. It should help to teach
some of the elementary principles of dynamics - while being fun to play.
A 'self playing' demonstration
version is also included.
A further STEPS project was
the simulation of infestation of a crop by caterpillars(!)
The first
version gives greater simulation possibilities, but is not really
'graphical
enough' for the young viewers of STEPS.
A more visually appealing version
of Butterflies has been written
- at the cost of some realism in the simulation.
Indeed a third
version is probably the one which will be shown to the TV audience,
in which the eggs hatch simultaneously and the generations are kept
separate.