Background

VivioJS is a reworking of Vivio 5.1. The original Vivio 5.1 implementation was based on a Netscape plugin (or ActiveX control). The Vivio source code was first pre-compiled into VCODE. The VCODE was then downloaded by the Netscape plugin, JIT (just-in-time) compiled into IA32 machine code and executed. The imminent demise of browser plugins together with a certain lack of portability has led to the development of VivioJS. VivioJS animations are now 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. A touch interface is currently under development.

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.

Animations

DLX/MIPS (initial multiplication program + not locked + help)
DLX/MIPS (no program + not locked + no help)
DLX/MIPS tutorial by Edsko De Vries
DLX/MIPS with initial configuration selected from database
 
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

Acknowledgements

I would like to thank Edsko De Vries for developing the MIPS/DLX animation during a summer internship.

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