-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathabout.html
118 lines (94 loc) · 6.23 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<html>
<head>
<link rel="stylesheet" href="visualPages.css">
<title> Data Structure Visualization </title>
<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>