Javascript On-Line Learning Interactive Environment for Simulation
See the 'Simulation Playground', Butterflies and the Billiards game below!
Also examples for a Dynamics
course and a game with sliding
Penguins.
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 form or
another.
In the early days of this site, an applet was introduced that
can act as a 'whiteboard', on which any graph can be plotted in
real time as the simulation proceeds. Now HTML5 has provided the
"canvas" object and the examples here will be progressively
updated to use it, now that IE9 can recognise it. A simulation
of diffusion in a two-dimensional field is here
and a very simple example of a first-order system is here.
Given time, many of the 'whiteboard' examples will be
replaced by their Canvas equivalents. But Canvas has
shortcomings, particularly in the area of transformations.
It also waits for a break before updating the display, meaning
that some ingenious software structure has to be used for 'show
it as you go' simulations.
But it extends the ability to
move images by making it possible to rotate them. Here
is an example of controlling the roll channel of an aircraft.
After clicking "run the model", click in the image to one side,
then the other, to control the roll rate.
There are also problems with updated browser versions. IE9
'invented' errors in code that had earlier worked
perfectly. It objected to calls to a routine that could
take integers or floating-point numbers, claiming that the call
was ambiguous. The cure was simple yet fiddly - and you
might come across uncorrected versions.
As an alternative, 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.
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 an educational programme 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 education 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.
More recently, the Jollies techniques have been used to
illustrate examples
for a dynamics course.