120 lines
6.3 KiB
HTML
120 lines
6.3 KiB
HTML
<html lang="zh">
|
|
<head>
|
|
<link rel="stylesheet" href="visualPages.css">
|
|
<title> Data Structure Visualization </title><meta charset="UTF-8">
|
|
<meta charset="UTF-8">
|
|
<link rel="shortcut icon" href="favicon.ico" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div class="header"><h1>Data Structure Visualizations</h1> </div>
|
|
<div class="menu">
|
|
<ul>
|
|
<li> <a href="about.html">About</a> </li>
|
|
<li> <a href="Algorithms.html">Algorithms</a> </li>
|
|
<li> <a href="faq.html"> F.A.Q </a> </li>
|
|
<li> <a href="bugfeature.html"> Known Bugs /<br> Feature Requests </a> </li>
|
|
<li> <a href="java/visualization.html"> Java Version </a> </li>
|
|
<li> <a href="flash.html">Flash Version </a> </li>
|
|
<li> <a href="source.html">Create Your Own /<br> Source Code</a> </li>
|
|
<li> <a href="contact.html"> Contact </a> </li>
|
|
</ul>
|
|
|
|
<br> <br>
|
|
<div class="about">
|
|
<a href="http://www.cs.usfca.edu/galles"> David Galles </a> <br>
|
|
<a href="http://www.cs.usfca.edu"> Computer Science </a> <br>
|
|
<a href="http://www.usfca.edu"> University of San Francisco </a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<h1>Visualizing Algorithms</h1>
|
|
|
|
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)
|
|
|
|
<br> <br>
|
|
Check the <a href = "Algorithms.html">Algorithms</a> menu for all of the latest javascript implementations.
|
|
|
|
<h1> How to Use the Visualizations </h1>
|
|
|
|
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:
|
|
|
|
<br> <br>
|
|
|
|
<img src="Screenshot.png" alt="BST Screenshot">
|
|
<br>
|
|
|
|
<h2> Algorithm Specific Controls </h2>
|
|
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.
|
|
|
|
<h2> General Animation Controls </h2>
|
|
|
|
<ul>
|
|
<li> <em> Skip Back</em> 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 </li>
|
|
<li> <em> Step Back</em> 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 </li>
|
|
<li> <em> Play/Pause</em> 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) </li>
|
|
<li> <em> Step Forward </em> 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. </li>
|
|
<li> <em>Skip Forward </em> This button is only active if the current animation has not completed. Skip to the end of the current animation
|
|
</li>
|
|
<li> <em>Animation Speed (slider)</em> 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</li>
|
|
<li><em>w, h, Chnage Canvas Size</em> 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.
|
|
</li>
|
|
<li> <em>Move Controls</em> Toggle between the general controls being at the top or bottom of the webpage</li>
|
|
|
|
<br>
|
|
|
|
Note that it can be easy to confuse yourself by stepping forward an backwards through an animation -- you can confuse the <em>next</em>
|
|
step in the animation with the <em>previous</em> step, and misunderstand how the algorithm works. You may wish to only step
|
|
forward when you are first delving into a particular algorithm.
|
|
|
|
</ul>
|
|
|
|
|
|
<h1>Java/Swing Version</h1>
|
|
This work is based on visualizations that we created in Java using Swing -- that code is still available <a href = "java/visualization.html">here</a>,
|
|
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.
|
|
|
|
<h1>Flash Version</h1>
|
|
We have also developed a <a href = "flash.html">flash</a> version of the visualizations, which contains a subset of
|
|
the algoritms developed in javascript. The Flash version is not as well supported as the main javascript version,
|
|
but we will keep the flash version available for those who may get a better frameate out of flash than javascript.
|
|
However, the javascript versions are the preferred ones, and will get updates and bug fixes the quickest.
|
|
|
|
<h1>Writing your Own</h1>
|
|
<a href="source.html">The tutorial for creating your own visualizations is now online!</a>
|
|
All source code is available there as well. If you want to create your own visualizations, but are having trouble
|
|
getting things to work, please let me know. Everything is licensed under FreeBSD, and you
|
|
can use it for whatever you like. Please let me know if you using the code -- I'm curious to see what
|
|
it does in the wild.
|
|
|
|
</div>
|
|
<div class="footer">Copyright 2011 <a href = "http://www.cs.usfca.edu/galles">David Galles </a> </div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|