<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/visualPages.css">
<title> Data Structure Visualization </title>
</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="index.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="visualization.html"> Java Version </a> </li>
<li> <a href="flash.html">Flash Version </a> </li>
<li> <a href="">Create Your Own /<br> Source Code</a> </li>
<li> <a href="contact.html"> Contact </a> </li>
</ul>
<br> <br>
<div class="about">
<a href="galles.html"> David Galles </a> <br>
<a href="index"> Computer Science </a> <br>
<a href="index"> University of San Francisco </a>
</div>
</div>
<div class="content">
<h1>Source Code</h1>
You can download the complete source for the HTML5/Javascript version of the visualizations (both compressed and uncompressed) here:
<br>
<ul>
<li> <a href="javascript:;">visualization1.5.tar.gz</a>, <a href="javascript:;">visualization.1.5.tar</a></li>
<li> <a href="javascript:;">visualization1.4.tar.gz</a>, <a href="javascript:;">visualization.1.4.tar</a></li>
<li> <a href="javascript:;">visualization1.3.tar.gz</a>, <a href="javascript:;">visualization.1.3.tar</a></li>
<li> <a href="javascript:;">visualization1.2.tar.gz</a>, <a href="javascript:;">visualization.1.2.tar</a></li>
<li> <a href="javascript:;">visualization1.1.tar.gz</a>, <a href="javascript:;">visualization.1.1.tar</a> </li>
</ul>
<br>
A few notes / warnings:
<ol>
<li> <em>Do not</em> try to look at the code to understand the algorithms. I have done one or two tricky
things to get the visualizations to work property that rather obscure the algorithms themselves. Your
favorte textbook, or even wikipedia, is a better bet for appropriate source code.</li>
<li> Like all software projects, this one is a bit of a living thing -- it started life as a Java project,
was rewritten in ActionScript3 (that is, flash), and then ported to Javascript. It was also my opportunity to
learn flash and javascript, so by the time I figured out the best way to do things, half of the software was
already written. I've done some going back to clean stuff up, but there is still a quite a lot of ugliness.
<em>Next time</em> all my code will be pretty :).</li>
</ol>
<h1>Visualization Creation Tutorial</h1>
To creeate a new visualization, you need to create a javascript file and an HTML file. The HTML file should
just be copied from a template, changing only one or two items (like the name of the javascript file).
Examples of the HTML template and how to change it are at the end of this tutorial.
In the javascript file, you will create a function (an object, really, but functions are objects in javascript) that:
<ol>
<li> Creates any appropriate controls to control you visualization (inserting elements, deletig elements, etc)</li>
<li> Creates callbacks for these controls that implement the visualizations. The visualizations are implemented
by sending an array of strings to the animation manager -- the animation manager will then implement the animation, and
handle all of the animation controls for you </li>
<li> Listen for an undo event from the animation manager. When an undo event is detected, roll back the last operation</li>
</ol>
<h2> Using Algorithm function </h2>
Creating the javascript function is stil farily complicated, even when using the rest of the library.
Many of the ugly details can be automated if your function "subclasses" the Algorithm function (located
in <a href="javascript:;">AlgorithmLibrary/Algorithm.js</a>
(which is sort of a faux "class"). Consider the skeleton "MyAlgorithm" function included in the tarfile:
<ul>
<li> <a href="MyAlgorithm.html">AlgorithmLibrary/MyAlgorithm.js</a>
</li></ul>
Looking at various pieces of the file in turn:
<br>
<br>
Copyright: Code is released under in a FreeBSD license.
<div class="code">
<pre>
// Copyright 2011 David Galles, University of San Francisco. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without modification, are
// permitted provided that the following conditions are met:
//
// 1. Redistributions of source code must retain the above copyright notice, this list of
// conditions and the following disclaimer.
//
// 2. Redistributions in binary form must reproduce the above copyright notice, this list
// of conditions and the following disclaimer in the documentation and/or other materials
// provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY David Galles ``AS IS'' AND ANY EXPRESS OR IMPLIED
// WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
// FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL <copyright holder=""> OR
// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
// ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
// ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
// The views and conclusions contained in the software and documentation are those of the
// authors and should not be interpreted as representing official policies, either expressed
// or implied, of the University of San Francisco
</copyright></pre>
</div>
Next, the algorithm definition. We are doing a sort of "faked" inheritance within javascript.
We define our function, set the prototype of our function to the prototype of our superclass,
reset the constructor to be our own constructor, and then cache the superclass prototype,
for simulating a java-style "super" call. Notice that to make inheritance work well on
counstructors, we don't do anything in the main constructor function other than call an init
function (that way we can have our init function call the init function of the superclass.
Yes, this is a bit of a hack.)
<div class="code">
<pre>
function MyAlgorithm(am, w, h)
{
this.init(am, w, h);
}
MyAlgorithm.prototype = new Algorithm();
MyAlgorithm.prototype.constructor = MyAlgorithm;
MyAlgorithm.superclass = Algorithm.prototype;
</pre>
</div>
Next, we have our constructor. In general, we will need to do the following
in our counstructor:
<ul>
<li> Call the superclass counstructor. Note the syntax, it's a little odd,
but we are forcing javascript into an tradtional object-oriented paradigm, so it will
complain a little at us. </li>
<li> Add necessary controls<li>
<li> Initialize our "Memory Manager". For the most part, we will use a very
simple memory manager -- the old Pascal-style "Never free" memory manager. Start the
free list at 0, and then increment it every time you need a new piece of memory. </li>
<li> Initialize any data structures we will be using</li>
</ul>
<div class="code">
<pre>
MyAlgorithm.prototype.init = function(am, w, h)
{
// Call the unit function of our "superclass", which adds a couple of
// listeners, and sets up the undo stack
MyAlgorithm.superclass.init.call(this, am, w, h);
this.addControls();
// Useful for memory management
this.nextIndex = 0;
// TODO: Add any code necessary to set up your own algorithm. Initialize data
// structures, etc.
}
</pre>
</div>
Next we have the function to add controls. There are several helper functions to add
controls. See the <a href="javascript:;">Algorithm.js</a> file for more
information on these helper functions.
<div class="code">
<pre>
MyAlgorithm.prototype.addControls = function()
{
this.controls = [];
// Add any
数据结构在线演示网址地址
需积分: 0 117 浏览量
2023-04-10
16:04:26
上传
评论 1
收藏 588KB ZIP 举报
数据结构在线演示网址地址 （137个子文件） 
jquery-ui-1.8.11.custom.css 19KB visualizationPageStyle.css 2KB visualPages.css 2KB style1.css 1KB style.css 1KB visual.css 1KB
source.html 51KB about.html 6KB faq.html 5KB index.html 5KB bugfeature.html 4KB faq1.html 3KB visualization.html 3KB RecFact.html 3KB TST.html 3KB ClosedHashBucket.html 3KB TopoSortIndegree.html 3KB StackArray.html 3KB ChangingCoordinates3D.html 3KB Floyd.html 3KB ConnectedComponent.html 3KB ChangingCoordinates2D.html 3KB TopoSortDFS.html 3KB Kruskal.html 3KB Prim.html 3KB BTree.html 3KB BST.html 3KB Dijkstra.html 3KB DFS.html 3KB BPlusTree.html 3KB RadixTree.html 3KB ClosedHash.html 3KB Trie.html 3KB OpenHash.html 3KB RecQueens.html 3KB RecReverse.html 3KB BFS.html 3KB DisjointSets.html 3KB DPLCS.html 3KB DPChange.html 3KB StackLL.html 3KB QueueLL.html 3KB RotateTranslate2D.html 3KB Search.html 3KB QueueArray.html 3KB DPFib.html 3KB BinomialQueue.html 3KB RotateScale3D.html 3KB RotateScale2D.html 3KB CountingSort.html 3KB FibonacciHeap.html 3KB RedBlack.html 3KB LeftistHeap.html 3KB SimpleStack.html 3KB SplayTree.html 3KB ComparisonSort.html 3KB SkewHeap.html 3KB HeapSort.html 3KB BucketSort.html 3KB RadixSort.html 3KB Heap.html 3KB AVLtree.html 3KB download.html 3KB galles.html 2KB cs420.html 2KB contact.html 2KB testimonials.html 2KB compilerdesign.html 1KB cs411.html 1KB flash.html 1KB
textcover4.jpg 29KB jquery-1.5.2.min.js 84KB BTree.js 44KB AnimationMain.js 43KB RedBlack.js 39KB BPlusTree.js 37KB RotateScale3D.js 36KB AVL.js 34KB RotateTranslate2D.js 31KB DPChange.js 30KB RotateScale2D.js 30KB TST.js 28KB Search.js 27KB SplayTree.js 27KB DPLCS.js 26KB FibonacciHeap.js 25KB RadixTree.js 25KB jquery-ui-1.8.11.custom.min.js 24KB Graph.js 22KB ComparisonSort.js 22KB ObjectManager.js 22KB TopoSortIndegree.js 20KB BST.js 19KB BinomialQueue.js 18KB Trie.js 18KB RecQueens.js 17KB DPFib.js 17KB LeftistHeap.js 16KB ConnectedComponent.js 15KB Floyd.js 14KB共 137 条
- 1
- 2
资源评论
