Algorithm Visualization of USFCA

最新推荐文章于 2024-06-13 11:32:33 发布

fduan

最新推荐文章于 2024-06-13 11:32:33 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Algorithm 文章标签： visualization algorithm animation button javascript sorting

本文链接：https://blog.youkuaiyun.com/fduan/article/details/6403355

Algorithm 专栏收录该内容

60 篇文章

订阅专栏

提供交互式动画展示复杂数据结构和算法，包括堆、搜索树、哈希表、排序算法等，适合自学和深入理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cited from http://www.cs.usfca.edu/~galles/visualization/Algorithms.html

Visualizing Algorithms

The best way to understand complex data structures is to see them in action. We've developed interactive animations for a variety of data structures and algorithms. Our visualization tool is written in javascript using the HTML5 canvas element, and run in just about any modern browser -- including iOS devices like the iPhone and iPad, and even the web browser in the Kindle! (The frame rate is low enough in the Kindle that the visualizations aren't terribly useful, but the tree-based visualizations -- BSTs and AVL Trees -- seem to work well enough)

Check the Algorithms menu for all of the latest javascript implementations.

How to Use the Visualizations

This visualizations are meant to be fairly self- explainitory, though there are some subleties for advanced usage. Take a look at a typical visualization, for Binary Search Trees:

BST Screenshot

Algorithm Specific Controls

At the top of the screen (boxed in red in the above screenshot) are the algorithm specific controls -- these will change depending upon what algorithm you are visualizing. In this example, you could insert, delete, or find an element in the BST by entering text in the appropriate field and either pressing return or clicking the relevant button. The tree can be printed by clicking the print button. Once you give a command, the visualiztion will start, and can be controlled by the general animation controls at the bottom of the screen.

General Animation Controls

Skip Back If you are in the middle of an animation, this button will completly undo the current command. If you are not in the middle of an animation, this button will undo the previous command
Step Back This button is only active if you have paused the current animation (using the play/pause button). Step back one step in the current animation. If you are not currently animating, step back into the previous command. You could use this button (with sufficient keypresses) to back up through the entire history of everything you've done
Play/Pause Toggle between play mode (in which the algorithm runs free until it completes) and paused mode (where you need to press the Step Forward or Step Back button to advance the animation)
Step Forward This button is only active if you have paused the current animation (using the play/pause button), and the current animation has not yet completed. Step forward one step in the current animation.
Skip Forward This button is only active if the current animation has not completed. Skip to the end of the current animation
Animation Speed (slider) Change the speed of the animation. The value of this slider is saved in a cookie, so you should only need to set it once if you have a preferred speed
w, h, Chnage Canvas Size Change the width / height of the display area. While the change is immediate, the animations will not be centered in this new field until you reload the page. This will clear out the currnet animation, but the width and hight values are also saved in a cookie, so you should only need to change this field once, and then everything should work well if you are on a smart phone or a desktop with loads of screen real estate.
Note that it can be easy to confuse yourself by stepping forward an backwards through an animation -- you can confuse the next step in the animation with the previous step, and misunderstand how the algorithm works. You may wish to only step forward when you are first delving into a particular algorithm.

Java/Swing Version

This work is based on visualizations that we created in Java using Swing -- that code is still available here , though that code is no longer being maintained. There are a few algorithms that we have not yet ported to the new system, so the older version may still be of use.

Flash Version

We have also developed a flash version of the visualizations, which currently also contains some algorithms that are not in the HTML version, though we should port everything over to javascript soon. We will keep the flash version available for those who may get a better frameate out of flash than javascript (and the flash version is a bit easier to download and use offline). However, the javascript versions are the preferred ones, and will get updates and bug fixes the quickest.

Writing your Own

The code is written to be easy to extend with your own visualizations -- look for a tutorial for how to create your own, with examples, to be up by some time in Summer 2011.

Currently, we have visualizations for the following data structures and algorithms: