Background

Vivio animations are interactive browser based animations which can be played and single stepped forwards and backwards. VivioJS is portable implementation of Vivio 5.1. Since Vivio 5.1 was based on an NPAPI plugin or ActiveX control, Vivio animations could no longer be played in modern browsers. VivioJS is implemented using HTML5 and JavaScript making Vivio animation 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 map the concurrent actions expressed in Vivio into JavaScript as this is far from straightforward. VivioJS generated animations have been tested using Firefox, Chrome, Opera, Safari, 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.
Computer Architecture
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)

Sorts
Bubble sort
Bubble sort (bubble back variant)
Exchange sort
Heap sort
Insertion sort
Quicksort (Bentley)
Quicksort (Wirth)
Shaker sort
Shell sort
ALL sorts

Trees
Binary Search Tree (BST)
AVL tree
B-tree
Splay tree
ALL trees

Miscellaneous
Measurements and angles for making N-pointed wooden stars

Source Code Distribution

A distribution containing the VivioIDE Windows binary, the source code for all the animations and the VivioIDE itself and more is available at VivioJS 14-Feb-22.7z.
See the documentation subdirectory for more information on the distribution content.

Acknowledgements

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.