Update (14-Jul-21)

This is the latest VivioJS release. Although this release contains many bug fixes and improvements, the most noticeable changes are (i) DLX/MIPS configurations are saved per user instead of in a public namespace and (ii) DLX/MIPS instructions are set using menus rather than clicking through lists. Users must register (or login) to save and load previously saved configurations.


VivioJS is portable implementation of Vivio 5.1. Animations can be played and single stepped forwards and backwards. VivioJS animations are implemented using HTML5 and JavaScript making them portable across browsers, operating systems and machine architectures. The VivioJS implementation comprises two parts (1) a vivio.js runtime and (2) a compiler which converts Vivio code into JavaScript. The latter is needed to convert the concurrent actions expressed in Vivio into JavaScript because this mapping is far from straightforward. The VivioJS animations have been tested using Firefox, Chrome, Opera, Safari, IE and Edge on Windows, Linux, Android, OS X, macOS and iOS.

Controlling Animation Playback

Animation playback is controlled using the mouse buttons, mouse wheel and keys on the keyboard. Start or pause playback by clicking the left mouse button on the animation background. Increase or decrease the animation speed by pressing the CTRL key and rotating the mouse wheel. Single step the animation forwards and backwards by pausing the animation and then rotating the mouse wheel. If the left mouse button is now clicked, playback will resume in the direction of the last step. Snap to the next or previous checkpoint by pausing the animation and then pressing the SHIFT key and rotating the mouse wheel.

The arrow keys, normally on the right hand side of the keyboard, can be used in lieu of a mouse. The left and right arrows are equivalent to rotating the mouse wheel forwards and backwards and the down arrow is equivalent to pressing the left mouse button. Press the up arrow to reset the animation.

Holding down SHIFT and pressing the up arrow will show/hide playback statistics. Holding down CTRL and pressing the up arrow will show/hide the minimum bounding boxes (mbbs) indicating the areas of the screen that are redrawn on each animation step. Finally, remember that F11 makes the browser go full screen.


DLX/MIPS (multiplication program + help)
DLX/MIPS (no program)
DLX/MIPS tutorial by Edsko De Vries
DLX/MIPS select tutorial configuration (see above)
Cache animation (description)
Write-through cache coherency animation (description)
Write-once cache coherency animation (description)
Firefly cache coherency animation (description)
MESI cache coherency animation (description)
All cache coherency protocols
Intel TSX MESI cache animation (description)


I would like to thank Edsko De Vries for developing the DLX/MIPS animation during a summer internship and the many students who have helped develop these animations over many years.

Please report bugs, missing links or send comments to jones@scss.tcd.ie.
Copyright © Jeremy Jones, School of Computer Science and Statistics, Trinity College, Dublin 2, Ireland.