Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
The source codes of some examples can be found in the examples folder of the project.
The main benefits of these animations are:
- Red, yellow, and green columns represent the variables and array elements. During the animation, students can change the heights some of these columns by resizing them.
- Source code can be added to the animation, where the lines of code can be highlighted as the animation runs.
- The indexes in the arrays can be shown under the arrays in an easily understandable way.
Classes in the library for creating animations:
- Stage - Every animation must contain one stage, which is linked to an HTML canvas element. Everything that students see during the animation is drawn on the Stage. The control panel is automatically shown on the bottom of the Stage; other elements (VisuVariable, VisuArray, VisuCode, VisuLabel, etc.) should be added to the Stage by the creator of the animation.
- VisuVariable - Simple variable represented by a column.
- VisuArray - Array of VisuVariables.
- VisuCode - Source code or pseudocode shown for the students.
- VisuLabel - Simple texts, comments.
- VisuButton - Button for advanced creators (used in bottom control panel).
- VisuScrollbar - Scrollbar for advanced creators (used in bottom control panel).