OxfordCroquet Logo

Dr Ian Plummer

Donation Button

How to Play
3D Lawn - Help

Oxford Croquet is pleased to introduce a 3D lawn which allows you to view a virtual lawn in your browser in any orientation.  Its intention is to permit high quality illustrations to be produced and also to load scripts to demonstrate manoeuvres and replay significant games.

Limitations in Running the Program

The calculation of the scene and its rendering requires a fast computer.  Modern desktops and laptops should have no problems, but smartphones and tablets are going to be dismal.  Even a 64GB iPad Air gives a very poor performance.

Given a fast up-to-date computer there are further hurdles. Firstly you need JavaScript enabled. Secondly the graphics library relies on compatible hardware in your computer. You may see:

Your graphics card does not seem to support WebGL.
Find out how to get it here.

or the program remains on the loading screen. It is not worth clicking on the links!  There are a couple of get-outs however. Firstly check the list of browsers below: You may find using a different browser on the same machine may work! You need the most up-to-date versions of these browsers to operate.

Chrome 54

Best response on a Windows desktopE.  The individual tab can very occasionally hang with a white screen but reloading web page and then answering 'Reload WebGL' to the prompt will start it up again.

Opera 41

Pretty smooth - needs up to date version

Firefox 50

Ok but Firefox can crash occasionally, hence do not have important work open in other FF browser windows.

Safari (IOS8)

Needs to be IOS8. OK on a desktop or laptop, dismal on an iPad or iPhone.  (Better under IOS 10).

Internet Explorer 11.67

Needs to be Windows 7 or above. Uses up any spare CPU cycles! Sometimes loses ability to zoom

Edge 25

Ok but not the best performance

Using the 3D lawn

There are two 3D lawns, the simple and the coaching lawns. On the top right of the lawn is a link to this Help file. When you have finished using the either program shut down the tab in the browser to maximise your machine's performance.

Moving the scene

When the mouse pointer Mouse pointer - arrow headis over the lawn you can:

  • left-click and drag to rotate the lawn,
  • right-click and drag to pan. This moves the lawn relative to the centre of rotation, and,
  • scroll-wheel zooms. New - keys 'z' and 'x' also zoom. You need to click within the window first.

Things to try: zoom in on a ball to see the texture, look at the crown of a hoop, or rotate the lawn to look towards the setting sun to see the gleam from the grass.

Finger cursor to move ball

Moving Balls

When the mouse pointer is over a ball it changes to a hand Mouse pointer - hand, indicating you can now drag the ball when left-clicking the mouse. Whilst you are moving the ball its coordinates "x,y" are shown on the bottom status line. The lawn is dimensioned in inches.

When you drop the ball the last coordinates are held. These can be 'copy and pasted' by script designers.

There currently is no collison detection so one object can pass through another.

The On Screen Buttons

The features below are on the '3D coaching lawn' in addition to those above.

On-screen buttons

First there are the usual tape recorder buttons for controlling the scripts of ball movements:

Restart button

Return to the first step (start) of a script

Play button

Play the currently loaded script automatically; it keeps playing subsequent steps of the script. It is grey when a script is playing. Note to speed up a demonstration, reduce the lawn speed (see below).

Stop button

Stop running the current script when the step has finished.  The script can be resumed by pressing Play or Step (see below)

Pause button

Pauses the currently playing script.  Changes to pink when the script is paused. 

Step button

Step through the script. Each click advances one step. Only operates when the balls have come to rest. Allows the user to set their pace of running a script. 

Sound on/off

Turns on and off an annoying sound when a ball hits a mallet or another ball.


Turns on and off a spoken commentary, where available. You will need a slowish lawn speed of say 9 Plummers or higher (see below) to allow the phrase to complete within the stroke time.

Reset Camera to Default View

Reset the camera to the default view

Note the buttons above work when the balls have come to rest for the current step. There is no 'step back' back button.

Status and Control Bar

The white strip on the bottom of the screen is the status and control bar.

Lawn Speed.

"Plummers" There is an information field showing the current speed of the lawn in Plummers. The control for changing the Plummers lies to its right. The lawns speed changes when all balls have come to rest. A low number results in a quick ball movement and vice versa.  A 3-Plummer lawn would be like a meadow and a 19-Plummer lawn is approaching a sheet of glass. You can use this as a speed control for how quickly a script plays.

Script Load

"Load:" allows selection of the available scripts. Selecting one will stop the current script and load the selected one.

"x,y =" shows a dragged ball's position whilst it is being dragged and locks when the ball is released. These coordinates can be copy & pasted.

"Script:" shows the filename of the currently loaded script.

About the Virtual Lawn

The lawn is programmed in JavaScript using probably the most popular 3D JavaScript library: THREE.js. Unfortunately there are few good tutorials on its use. 

The first thing to say is that this is a gut-busting program for your browser and needs a nippy computer.  Low powered or portable devices (e.g. iPads, 'phones) will give very jerky movements, and the rotation of the lawn is near unusable.  This is because the 'program', as JavaScript, is downloaded by your browser and then your browser runs that program; it is no longer reliant on the web server.

All web browsers should be upgraded to their most recent versions… this is cutting edge stuff.

Nice features

Textures have been added to objects - see the surface of the balls or the crowns of the hoops.

The mottled green of the lawn makes it look better than plain green, which looks like a snooker table.  I took an aerial view of lawn 3 at Surbiton and 'watered it' to make it a bit greener. I did try photographs of grass shoots but the scales do not work out. In this version the lawn is absolutely flat.

I have scaled up the dimensions of the hoops and balls.  This is the reason that the balls 'merge' when they close together. Note currently there is no real collision detection, it is on the to-do list. At correct scale if you can see the lawn then the hoops and balls are a few pixels in the field of view.  When you are standing by the side of the lawn psychologically the lawn furniture seems bigger - see video scale paper.

The motion of the balls follows the equation derived from lawn speed measurements which led to the naming of 'Plummers' for lawn speed; the balls experience a constant deceleration due to grass. There is a variable to set the Plummers for the lawn. (Cosmetically only, there is also one for the grass height!) The motion of the balls is purely sliding; no rotation is modelled. They are treated as hard spheres.

As a nicety the hoops extend beneath the lawn - look underneath. Thank heavens these are Plummer hoops not Atkins, since I do not know at the moment how to model four sided pyramids.

The program is asynchronous and event driven.  E.g. you can swirl and zoom as the balls are moving. It does not rely on a simple loop to do the internal timing.  Consequently if your computer goes away to do an intensive task before it updates the next frame in the animation, the frame it shows when it can get back is appropriate in real time. The ball may jump a little but it is where it would be if the animation had been uninterrupted.  If the browser is minimised however the code stops running to allow your computer to use its computing power productively.

Why Do It?

Many reasons - I needed to learn JavaScript, it was fun and I had time on my hands.  More seriously I see it as a tool for producing superior diagrams for my croquet articles.  Hence I can position the balls and tilt the lawn as required and then take a snapshot for an article.

It is also a useful coaching tool for showing manoeuvres.  It can allow the viewer to step through a sequence of strokes to understand what is going on. It can replace clubs' magnetic boards for showing ball positions.

Additionally it can be used for showing important matches as in a movie/script but where you can keep selecting your view point.


The program runs JavaScript 'scripts' containing commands to move balls, roquet etc. The movements are grouped together in 'steps' each one of which is a separate function call.


If you look at the source code of the JavaScript files 4bb.js, triple.js or sextuple.js you will see lots of JavaScript functions labelled function step1()... function step10()…  Here is where the positions and movements of the balls are defined. Example:

//--------------- scripted ball move section ----------------------
//Valid function calls
// place_ball(blue, 23,-67);
// move_to(red, 252, -355); optional: move_to(red, 252, -355, true) for silent move
// move_ball(yellow, 34,53, 66, 77);
// roquet(yellow,blue, -333,-222);
// croquet(red, 340,233, black, 45,323);
// move_clip(blue,1), use numbers 1-6,1-back..,penult,rover,peg - no quotes
// commentary("text");


function step1(){ // set up balls on lawn
commentary("Reset lawn");
function step2(){

: More functions of type stepX()

// You must set the following
number_of_steps = 34; // number of function calls to cycle through
steps = 1; // initialise step counter
document.getElementById("commentary_field").innerHTML = "Four Ball Break loaded"; // Announce file is loaded

//--------------- end scripted ball move section ----------------------

There are predefined basic functions to place a ball, move ball to position, place and move ball from a to b, and two higher level routines to roquet and croquet. You can create as many 'step' functions as you like, but the value of number_of_steps must equal the number of functions, numbered sequentially, you have written. JavaScript is very unforgiving; a single code error means that the program will bomb.

The basic functions are:

place_ball(colour, x, y);

Positions a ball of colour {blue, red, yellow, black} at coordinates (x,y) on the lawn.  x and y can be negative and decimal.  1 unit = 1" on the lawn.

Example: place_ball(blue, -23.5, 380);

move_to(colour, x,y);

Move the ball of colour {blue, red, yellow, black}  from its current position to the new coordinates (x,y). The ball decelerates smoothly.

Example:  move_to(red, 252, -355);

move_to(colour, x,y, true);

As above but does so without mallet on ball sound


Place the ball of colour {blue, red, yellow, black}  at  (x1,y1) and move it to (x2,y2). The ball decelerates smoothly.

Example: move_ball(yellow, 34,53, 66, 77);

roquet(colour1,colour2, x,y); 

Move the ball of colour1 {blue, red, yellow, black}  from its current position to the ball of colour2 which is moved to the position (x,y).  The trajectory and end point of the colour1 ball is calculated and actioned.

Example:  roquet(yellow,blue, -333,-222); "Yellow roquets Blue to -333,-222"

croquet(col1, x1,y2, col2, x2,y2);

Places the ball of col1 appropriately in contact with the col2 ball.  The former is moved to (x1,y1) and the latter to (x2,y2). The balls decelerate smoothly.

Example: croquet(red, 340,233, black, 45,323); "Red takes croquet from Black at its current position; Red moves to (340,233); Black moves to (45,323).


Writes the string "Text" into the commentary area of the screen preceded by whatever the current value of the step variable is.  The step value is used to count through the user defined functions.

Example: commentary("Hello World");


Moves clip of colour col to hoop where hoop takes the unquoted values: 1, 2 ..6, 1-back, 2-back ... 4-back, penult, rover, peg

Example: move_clip(blue,1-back); move_clip(red,peg);


Sets the lawns speed in Plummers - only takes effect when all moving balls have stopped.

Example: set_plummers(11);


Lawn dimensions

The lawn coordinates are centred on the peg with the x-axis increasing to the East boundary (right) and the y-axis increasing towards the South boundary (down). The polarities of coordinates are shown in the diagram (right).

To make conversions straightforward I have used inches as the basic measurement, hence the location x=3, y=3 is 3" right and 3" down from the peg in the plan view. The Moving Balls section above shows you how to read coordinates from the screen. You can use decimals.



If you want to make your own model of croquet balls moving in a similar environment I have documented the equations I have used in the following two papers Modelling Ball Speeds, and Modelling Roquets.

All rights reserved © 2015-2018

Updated 16.vii.17
About, Feedback
on www.oxfordcroquet.com
Hits: 5195