fork 自 sduonline/sc-resources
增加淘宝群内容，修改部分文件组织
此提交包含在：
@@ -0,0 +1,119 @@
|
||||
<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>
|
||||
新增問題並參考
封鎖使用者