Ladislav Végh edited this page Aug 17, 2015 · 41 revisions

Interactive Algorithm Animations (inalan) javascript library

This javascript library was designed to create simple, interactive algorithm animations.

Examples of algorithm animations created with inalan javascript library can be found here:

The source codes of some examples can be found in the examples folder of the project.

The main benefits of these animations are:

  • They are automatically controlled by Reset, Start/Stop, Previous step, Next step buttons. The creator of animation only needs to define the steps as javascript functions. During this definition, do-while type of loops can be used to repeat some steps.
  • 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).
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.