Jollies.com by
|
John
Billingsley |
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.
With an easily-remembered domain name,
Jollies.com can be a landing page for several other sites.
www.esscont.com
and qld4350.com/esscont
both lead to the same support site for two Routledge books,
Control
Basics for Mechatronics (2023) and Essentials
of Control Techniques and Theory (2009)
qld4350.com/essdyn.com
supports Essentials
of Dynamics and Vibrations (2018). I intend to
expand it with links to the simulations that are just listed
in the printed book.
qld4350.com/essmech.com/
supports Essentials
of Mechatronics (2006). This has an index of
chapters, with links to the simulations that relate to them.
This site was first developed
decades ago by Professor John Billingsley.
Over the years, JavaScript has changed and some old graphics
techniques no longer work. So it is time to clean up the
pages and link to many more examples.
JavaScript makes writing simulation code easy, with a variety of
graphics techniques that can bring your state equations to
life. Jollies are just 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. That
is the situation as I edit this page now, but I fear that
security concerns might block that quite soon.
So there are two essential parts to a simulation. The
first is code that will step the variables forward as time
advances, the second is code that will draw graphs or move
pictures to interact with the user.
Central to displaying the results is HTML5, with its "canvas"
object. This goes far beyond mere display, allowing a
video stream to be analysed for real-time vision control.
To start with, here are some examples written long ago.
A simulation of diffusion in a two-dimensional field is here
and a very simple example of a first-order system is here.
Canvas 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.
As an alternative to plotting
graphs, shapes can be moved around the screen to represent the
behaviour of the system being simulated. 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. Try to keep the
aircraft in the centre and you will see the difficulties of a
fourth-order problem.
A lot more examples will follow. Some are in structured
sets, others are oddments that have been developed along the
way.
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.
You can first see a response which does not look too bad, 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. Now change the lines of
code which determine the friction and run it again.
It is easy to make teaching
demonstrations with Jollies -
this example illustrates the unit circle and its links with the
sine and cosine functions.
With JavaScript and Canvas, you can learn a lot about your
drawing devices. 'Drawpressure'
is not meant for serious artwork, but as a diagnostic for
checking your touch-screen, pressure-sensitive pen or
mouse. You can set colours as RGB and even opacity.
Moving icons are fun, but more serious work demands a plotted
graph.
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 shape is first
smoothed and then the edges found..
Canvas 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 more elaborate coloured version can be found here.
Canvas 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.
Another Bilby
simulation has been added which works entirely
in JavaScript - no canvas. 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 tutorials, a set of pages were prepared
as a simple introduction to animated simulation - a Simulation Playground.
Five progressive versions exist at present:
- 1 A ball moves in a
circle. Modify the code to make it spiral inwards.
- 2 A ball falls under
gravity. Make it bounce.
- 3
Bouncing.
- 4
Precursor to the billiards game
- 5
Adding interaction
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. Over the years, many examples have built up.
You can find an index to some of them here.
A more visually appealing
version of Butterflies has
been written - at the cost of some realism in the
simulation.
Indeed a third version
was probably the one which was 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
some fun examples
for a dynamics course. A lot of more serious examples can be
found at www.essdyn.com
, a support website for the book 'Essentials of Dynamics and
Vibration', Published
by Springer
Another book that uses them is:
Control Basics for Mechatronics, published by Routledge,
with support site to be found at Control
Basics for Mechatronics (esscont.com)