Introduction | Your first interface | Building a model | Advanced features | Resources

4.5 Moving images

This section explains how to make images move and change within your simulation. The model and interfaces used in this section can be downloaded here:

There are two types of image that you can change at runtime by linking them to model variables. These are (interface in brackets):

  • xyimage (trainingImagesxy.jsm).
  • nxyimage (trainingImagenxy.jsm).


An xyimage will display a .gif or .jpg (or .jpeg) image file, and you can link the position of the image to model variables so that it will appear to move across the screen.

You can think of the width and height of the xyimage as the boundary in which the actual image (.gif or .jpg) can move around.

The following model shows an xyimage where the x coordinate is defined by the value of the horizontal scrollbar, and the y coordinate by the vertical scrollbar.

Set the imagePath property to define the image to be displayed. You can link the x and y coordinates of the image to the model using the modelX and modelY properties. The origin of the image is by default the centre, but it can be shifted using the XOffset and YOffset properties.

The XMaximum, XMinimum, YMaximum and YMinimum properties are used to set the bounds of movement of the object within the boundary (height and width). These can alternatively be linked to model properties using XMax, XMin, YMax and YMin. You can also change the direction of movement using the XIncreasesRight and YIncreasesUp properties.

The enclosedArea property can be set to true or false. If true, the image will always stay within its boundary, if false, then the origin can move right to the edges of the boundary, and the image itself may appear clipped.


The nxyimage works in a very similar way to the xyimage, with the addition that a number of images can be displayed with the same control.

The following example shows an nxyimage that changes depending on where it is displayed on the interface.

Instead of selecting a single image, with an nxyimage the imagePath property displays a File Browse Editor, which allows you to select and order a number of images to be used. Note that these images are all loaded into memory when the simulation is run so using a large number of images can affect performance.

You can then link the image shown to an integer model property using the selectedMP property. The integer value relates to the number image in the list in the File Browse Editor.