Tree Animation Tool Help Installation Help | Usage Help

The Tree Animation Tool is a Java applet that demonstrates various tree algorithms for educational purposes. This interactive software runs inside of your web browser for your convenience.

Please use the links above to navigate through the help system.


Installation Help

System Requirements:
  • Sun's Java Runtime Environment (JRE) 1.3.1 - Get it here

  • Microsoft Windows 9x/ME, NT/2K/XP, Linux, Solaris

  • 64MB of RAM or more, depending on the OS

  • 800x600x16 or higher screen resolution for optimal viewing


  • Browser Requirements: (any one of the following)
  • Internet Explorer 4.0 or above - Get it here

  • Netscape 6.2 or above - Get it here

  • Mozilla 1.0 or above - Get it here

    Stuck?
    The main requirement that you should be concerned about is the JRE version 1.3.1 or above.
    If you cannot see the applet, then you need to download and install this using the link above.
    Then you may need to associate your browser with the JRE using the JRE's control panel.
    Also, make sure that your browser's security settings will allow the applet to load.
    Please note, the applet may not work properly with Microsoft's JVM or Apple's Java versions.
    You may click here to try to load the applet again.

    Still Stuck?
    Clear the cache of the JRE through its control panel, and your web browser through its settings.
    If all else fails, reboot the machine to clear out any old data in it's cache or memory, and try loading the applet again.

  • Top of Page | Close this window

    Usage Help
    Here you will find out the major functions of the software, including all buttons, windows, etc.
    Also found here are special features that make using the software much easier. Screenshots are included.

    General Functionality:

    • Modify Tree (Add/Remove Nodes)
    User Input required: NodeValue and AddNode/RemoveNode buttons.
    The input needed in order to modify a tree is an instance of a tree data structure and a value for a node that is to be either added to or removed from the current tree. Depending on the tree modification operation chosen and the type of tree that is currently being modified, the appropriate processing will take place. The output from a tree modification will be the modified tree, the visual animations of the tree, and the code displayed while the operation is taking place.
    When the current tree type is a Binary Tree, the user will be asked where they want to insert the node. A screenshot of this is shown further below.

    • Traverse Tree
    User Input required: Type of Tree Traversal Drop Down menu and Tree Traversal button.
    Tree traversals include pre-order, in-order, and post-order traversals on each type of tree except for the b-tree. The inputs of a tree traversal are the tree instance itself along with the type of traversal. The processing of the tree traversal as with the modification of a tree depends on the type of traversal operation chosen and the type of tree that is currently being traversed. The output of a tree traversal is a listing of the nodes in the order that they were traversed as well as the visual animations, and the code displayed while the operation is taking place.

    • Animate Tree
    No User Input is required.
    During an operation that is taking place on the current tree any changes to the structure of the tree is shown visually by displaying animated transitions between tree states. The inputs involved tell the animation module what kind of animation to do. The processing for the tree animation is dependent on the current state of the tree, the type of tree currently being processed, and the operation chosen. The output of a tree animation is the visual representation that is displayed to the user during and after the animation. The animations occur during a normal tree operation such as with adding a node.

    • Display Related Code
    No User Input is required.
    The C++ code that is related to the tree operation chosen by the user is displayed and highlighted as the operation executes. The input expected is the text that constitutes the C++ code for the current function being executed and the line of code that should be highlighted. The processing is simple and does not depend on the type of tree or the type of operation. The resulting output is the code for the current function which has the currently executing line of code highlighted.

    • Display Help Documentation
    User Input required: Help button is clicked.
    The help documentation is accessible from the software in a way that allows the user to continue their work on the Tree Animation Tool, while still be able to find help with specific functionality. The input includes the user’s selection of a help button or hyperlink and a web address of where the help documentation is located. The processing is likely to spawn a new browsing window to view the help which will contain the help documentation as an output.

    Special Features

    • Display the Results
    User Input required: Mouse click (Right and Left).
    The results of an addition, deletion, or a traversal are displayed inside of a textbox on the bottom of the applet. Also, left-clicking the mouse inside of this box will go back in the history of the results since the tree was first created, viewing them one by one. In the same manner, right-clicking the mouse inside of this box will go forward.

    • Pause and Step Code
    User Input required: Pause(||) and StepInto(>>) buttons.
    Any tree operation maybe be paused before or throughout the operation or animation by clicking on the Pause(||) button. Upon doing so, the user may step through the visible C++ code for the current tree operation, line by line, in the code viewing window by simply clicking on the StepInto(>>) button. To unpause an operation, simply depress the Pause (||) button.

    • Animation Speed Slider and Code Speed Slider
    User Input required: Move the sliders left or right.
    There are 2 sliders on the tool. When a tree operation has been initiated, the animations and rate of operation of the code run at a speed equivalent of that of the sliders. When set all the way to the right (default), the animations and operation speed are nearly instantaneous.

    • Adding a Random Node
    User Input required: Empty NodeValue and AddNode/RemoveNode buttons.
    When the Value field is blank, and then the Add Node button is clicked, a random node with value between 0 and 99 that is not in the current tree, will be inserted into the current tree. This is an extremely convenient feature for quickly viewing animations and tree architectures.

    Below is a screenshot of the Tree Animation Tool's main applet window:



    Below is a screenshot of the Tree Animation Tool's Binary Tree Add Node window:



    Still need more help?
    Below is a walk-through of an example using Binary Search Tree.

    Step 1:
    Once you have the Tree Animation Applet loaded on your screen, click on the Binary Search Tree Tab.

    Step 2:
    The next step is to add a node, which will be the root. Click the mouse into the Node Value text box and type in 50.

    Step 3:
    Click on the Add Node button. You will now see the node added graphically in the applet window.

    Step 4:
    Now let us slow down the animations and code execution speeds. Simply click and drag the Slider bars to the left.

    Step 5:
    Repeat steps 2 and 3 for the following Node Values: 23, 43, 59, and 87. You will notice that the code executes much more slowly so that you may trace the execution with greater ease.

    Step 6:
    Now let us try the Pause and Step features that will make life a lot easier when learning trees.

    Step 7:
    Press the Pause Mode ( | | ) button located below the Animation Speed Slider.

    Step 8:
    Click in the Node Value textbox, type 15, and click Add Node. Notice how the node is not added.
    Note: This happens because the applet’s operations are paused when the Pause button is pressed.

    Step 9:
    Depressing the Pause Mode button will cause the program to continue its operation and the node of value 15 will be added to the tree.

    Step 10:
    Removing a node is extremely simple. Either type in the number 15 in the value box, or simply move the mouse and click on the node that has the number 15 inside of it, and click on the Remove Node button.

    Step 11:
    Now Press the Pause Mode button and add the node 15 again to the tree.

    Step 12:
    Again, the code should not execute because the program is paused. Click on the Step Into ( >> ) button. This will step through the code one line at a time.

    Step 13:
    Repeat this until either the function has executed completely, or until you depress the Pause Mode button.

    Step 14:
    After you are done, the applet window should look like the screenshot above.

    Step 15:
    Now you are ready to traverse. Simply click on the Traversal drop-down menu and select In-Order from the list.

    Step 16:
    Click on the Traverse button. This operation may be paused and stepped through as well. The end results should be:

    “In-Order Traversal: 15, 23, 43, 50, 59, 87”

    Top of Page | Close this window


    ©2002 Initech and The University of Michigan - Dearborn.