Code visualization

Abstract

Code visualization (CV) or algorithm visualization (AV) makes use of computer graphics to depict the executions of an algorithm as a discrete or continuous sequence of graphical images. In the past few decades, illustration about algorithms in education field has always been a difficult task without visualization tools. For a better explanation of execution status of each step, instructor has to manually prepare lots of pictures or animations by powerpoint and this brings low production efficiency and heavy work load. To address this problem, various visualization tools have been built for computer science educators. For beginners, it seems that code visualization holds the promise to help them in understanding the execution process more easily and in greater depth. However, after intensive research in this area, this promise remains unfulfilled due to following aspects. Some online tutorial websites are only designed for a specific set of algorithms such as Bubble Sort where users have to input the parameters after each step. Although some websites provide Application Program Interface (API) for users to create their own demonstration code, users still have to go through all the documents in order to create a simple animation, so the application are limited. The second type of visualization tools focuses on the visualization of specific languages like Java and Python.These tools exactly follow the syntax of their target language, so the data structures supported by the tools are limited by the language and the users are required to master the specific programming language in order to use the tool proficiently. With the above limitations, this project targets to provide an online platform for pseudo code visualization and provides user an efficient and convenient way to start learning algorithms. This project adopts the pseudo code as the input language to avoid the trouble of learning new syntaxes and designs a pseudo code compiler to do lexical analysis and compile the program. Supplemental JavaScript animation libraries are also provided to visualize complex data structures such as Graph and Tree. Furthermore, the variables that altered are highlighted by a color theme to help users track the code execution. At the end of project, this platform contains a web page interface to accept user input codes and shows the execution status of input programs using graphical data structures. The software contains a self-defined pseudo language compiler to compile the pseudo language, a powerful JavaScript animation library to visualize the data structures and a web interface to allow the interaction between server and clients. Users could simply input the code and animations are automatically generated by the tool.