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.
A crude COVID-19 simulator has been added.

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.

A simulation of diffusion in a two-dimensional field is here and a very simple example of a first-order system is here.

Canvas seems to have shortcomings 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. Try to keep the aircraft in the centre and you will see the difficulties of a fourth-order problem.

Problems also arise from 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 to plotting graphs, 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.

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 third example employs an applet to allow the JavaScript code to draw on a 'whiteboard'.  (You might find that safety settings prevent you from using it - but Canvas is taking over.) 
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 (applet) illustrates some simple image processing in which the edges of a binary (black-white) object are smoothed.  In the Canvas version, the shape is first smoothed and then the edges found..

The 'whiteboard' applet allows grey-scale or full colour drawings to be made - depending on the screen driver selection.
This example (applet) shows a 'noisy' grey-scale image being smoothed by two applications of an IIR filter.  The same method is illustrated by this Canvas version..

Another example of real-time moving graphics is a rotating cube

A new version of the Bilby simulation has been written using the 'canvas' facility in HTML5, but the older version is described below.

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 tutorials, 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.