first import book
This commit is contained in:
parent
6be2701fd8
commit
dfd9c869d5
233 changed files with 47797 additions and 0 deletions
2
book/modules/luther/sphinx/animation/__init__.py
Normal file
2
book/modules/luther/sphinx/animation/__init__.py
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
from .animation import *
|
||||
105
book/modules/luther/sphinx/animation/animation.py
Normal file
105
book/modules/luther/sphinx/animation/animation.py
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
# Copyright (C) 2011 Bradley N. Miller
|
||||
#
|
||||
# This program is free software: you can redistribute it and/or modify
|
||||
# it under the terms of the GNU General Public License as published by
|
||||
# the Free Software Foundation, either version 3 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU General Public License
|
||||
# along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
#
|
||||
__author__ = 'bmiller'
|
||||
|
||||
from docutils import nodes
|
||||
from docutils.parsers.rst import directives
|
||||
from docutils.parsers.rst import Directive
|
||||
|
||||
|
||||
def setup(app):
|
||||
app.add_directive('animation',Animation)
|
||||
# app.add_stylesheet('video.css')
|
||||
app.add_javascript('animationbase.js')
|
||||
|
||||
|
||||
SRC = '''
|
||||
<div id="%(divid)s">
|
||||
<canvas id="%(divid)s_canvas" width="400" height="400" style="border:4px solid blue"></canvas>
|
||||
<br />
|
||||
<button onclick="%(divid)s_anim = %(divid)s_init('%(divid)s')">Initialize</button>
|
||||
<button onclick="%(divid)s_anim.run('%(divid)s_anim')">Run</button>
|
||||
<button onclick="%(divid)s_anim.stop()">Stop</button> </br>
|
||||
<button onclick="%(divid)s_anim.begin()">Beginning</button>
|
||||
<button onclick="%(divid)s_anim.forward()">Step Forward</button>
|
||||
<button onclick="%(divid)s_anim.backward()">Step Backward</button>
|
||||
<button onclick="%(divid)s_anim.end()">End</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
%(divid)s_init = function(divid)
|
||||
{
|
||||
var a = new Animator(new %(model)s(), new %(viewer)s(), divid)
|
||||
a.init()
|
||||
return a
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
'''
|
||||
|
||||
SCRIPTTAG = '''<script type="text/javascript" src="../_static/%s"></script>\n'''
|
||||
|
||||
class Animation(Directive):
|
||||
required_arguments = 1
|
||||
optional_arguments = 1
|
||||
final_argument_whitespace = True
|
||||
has_content = False
|
||||
option_spec = {'modelfile':directives.unchanged,
|
||||
'viewerfile':directives.unchanged,
|
||||
'model':directives.unchanged,
|
||||
'viewer':directives.unchanged
|
||||
}
|
||||
|
||||
def run(self):
|
||||
"""
|
||||
process the video directive and generate html for output.
|
||||
:param self:
|
||||
:return:
|
||||
"""
|
||||
|
||||
res = ''
|
||||
self.options['divid'] = self.arguments[0]
|
||||
|
||||
if 'modelfile' in self.options:
|
||||
res = res + SCRIPTTAG % self.options['modelfile']
|
||||
if 'viewerfile' in self.options:
|
||||
res = res + SCRIPTTAG % self.options['viewerfile']
|
||||
|
||||
|
||||
res = res + SRC % self.options
|
||||
return [nodes.raw('',res , format='html')]
|
||||
|
||||
|
||||
source = '''
|
||||
.. animation:: testanim
|
||||
:modelfile: sortmodels.js
|
||||
:viewerfile: sortviewers.js
|
||||
:model: SortModel
|
||||
:viewer: BarViewer
|
||||
|
||||
'''
|
||||
|
||||
if __name__ == '__main__':
|
||||
from docutils.core import publish_parts
|
||||
|
||||
directives.register_directive('animation',Animation)
|
||||
|
||||
doc_parts = publish_parts(source,
|
||||
settings_overrides={'output_encoding': 'utf8',
|
||||
'initial_header_level': 2},
|
||||
writer_name="html")
|
||||
|
||||
print doc_parts['html_body']
|
||||
204
book/modules/luther/sphinx/animation/animationbase.js
Normal file
204
book/modules/luther/sphinx/animation/animationbase.js
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
Animator = function(m, v, divid)
|
||||
{
|
||||
this.model = m
|
||||
this.viewer = v
|
||||
this.timer = null
|
||||
|
||||
this.cursor = -1
|
||||
|
||||
this.sc = document.getElementById(divid+"_canvas")
|
||||
this.ctx = this.sc.getContext("2d")
|
||||
this.sc.width = this.sc.width
|
||||
this.speed = 75
|
||||
|
||||
this.script = this.model.init() //does the animation and sends script back
|
||||
this.viewer.init(this.ctx)
|
||||
}
|
||||
|
||||
Animator.prototype.getContext=function()
|
||||
{
|
||||
return this.ctx
|
||||
}
|
||||
|
||||
Animator.prototype.incCursor=function()
|
||||
{
|
||||
if (this.cursor < this.script.length-1)
|
||||
this.cursor = this.cursor + 1
|
||||
}
|
||||
|
||||
Animator.prototype.decCursor=function()
|
||||
{
|
||||
if (this.cursor > 0)
|
||||
this.cursor = this.cursor -1
|
||||
}
|
||||
|
||||
Animator.prototype.getCursor=function()
|
||||
{
|
||||
return this.cursor
|
||||
}
|
||||
|
||||
Animator.prototype.setCursor=function(newc)
|
||||
{
|
||||
this.cursor = newc
|
||||
}
|
||||
|
||||
Animator.prototype.run = function(animobj)
|
||||
{
|
||||
if (this.timer == null)
|
||||
this.timer = setInterval(animobj+".forward()",this.speed)
|
||||
}
|
||||
|
||||
Animator.prototype.stop = function()
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer=null
|
||||
}
|
||||
|
||||
Animator.prototype.forward = function()
|
||||
{
|
||||
this.incCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
if (this.getCursor() == this.script.length-1 && this.timer != null)
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
|
||||
Animator.prototype.backward = function()
|
||||
{
|
||||
this.decCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.end = function()
|
||||
{
|
||||
this.setCursor(this.script.length-1)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
|
||||
}
|
||||
|
||||
Animator.prototype.begin = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width=this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.init = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[0])
|
||||
}
|
||||
|
||||
init1 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init2 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init3 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init4 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init5 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init6 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init7 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init8 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init9 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init10 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init11 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init12 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init13 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init14 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init15 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init16 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init17 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init18 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
38
book/modules/luther/sphinx/animation/animationrefactor.html
Normal file
38
book/modules/luther/sphinx/animation/animationrefactor.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<script type "text/javascript" src="animationrefactor.js"></script>
|
||||
|
||||
<html>
|
||||
<body onload="">
|
||||
|
||||
<div id="ancan">
|
||||
<canvas id="ancan_canvas" width="400" height="400" style="border:4px solid blue"></canvas>
|
||||
<br />
|
||||
<button onclick="ancan_anim = init1('ancan')">Initialize with BarView</button><button onclick="ancan_anim = init2('ancan')">Initialize with ListView</button><br/>
|
||||
<button onclick="ancan_anim.run('ancan_anim')">Run</button>
|
||||
<button onclick="ancan_anim.stop()">Stop</button> </br>
|
||||
<button onclick="ancan_anim.begin()">Beginning</button>
|
||||
<button onclick="ancan_anim.forward()">Step Forward</button>
|
||||
<button onclick="ancan_anim.backward()">Step Backward</button>
|
||||
<button onclick="ancan_anim.end()">End</button>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
init1 = function(divid)
|
||||
{
|
||||
var a = new Animator(new SortModel(), new BarViewer(), divid)
|
||||
a.init()
|
||||
return a
|
||||
}
|
||||
|
||||
init2 = function(divid)
|
||||
{
|
||||
var a = new Animator(new SortModel(), new ListViewer(), divid)
|
||||
a.init()
|
||||
return a
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
256
book/modules/luther/sphinx/animation/animationrefactor.js
Normal file
256
book/modules/luther/sphinx/animation/animationrefactor.js
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
DataItem = function(pos, h, col)
|
||||
{
|
||||
this.height = h
|
||||
this.position = pos
|
||||
this.color = col
|
||||
}
|
||||
|
||||
DataItem.prototype.clone=function()
|
||||
{
|
||||
var newitem = new DataItem(this.position,this.height,this.color) //make a copy
|
||||
return newitem
|
||||
}
|
||||
|
||||
DataItem.prototype.getHeight=function()
|
||||
{
|
||||
return this.height
|
||||
}
|
||||
|
||||
DataItem.prototype.getColor=function()
|
||||
{
|
||||
return this.color
|
||||
}
|
||||
|
||||
DataItem.prototype.getPosition=function()
|
||||
{
|
||||
return this.position
|
||||
}
|
||||
|
||||
DataItem.prototype.setHeight=function(newh)
|
||||
{
|
||||
this.height = newh
|
||||
}
|
||||
|
||||
DataItem.prototype.setPosition=function(newp)
|
||||
{
|
||||
this.position = newp
|
||||
}
|
||||
|
||||
DataItem.prototype.setColor=function(newc)
|
||||
{
|
||||
this.color = newc
|
||||
}
|
||||
|
||||
SortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
SortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 50
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var passnum=this.valuelist.length-1; passnum>0; passnum = passnum-1)
|
||||
{
|
||||
for (var i=0; i<passnum; i=i+1)
|
||||
{
|
||||
this.valuelist[i].setColor("red")
|
||||
this.valuelist[i+1].setColor("red")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
if (this.valuelist[i].getHeight() > this.valuelist[i+1].getHeight())
|
||||
{
|
||||
|
||||
var temp = this.valuelist[i]
|
||||
this.valuelist[i] = this.valuelist[i+1]
|
||||
this.valuelist[i+1] = temp
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
}
|
||||
|
||||
this.valuelist[i].setColor("black")
|
||||
this.valuelist[i+1].setColor("black")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
}
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
SortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
BarViewer = function() //construct the view
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
BarViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
BarViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillRect(p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].height,
|
||||
3,
|
||||
ascene[p].height)
|
||||
}
|
||||
}
|
||||
|
||||
ListViewer = function() //contruct a list of numbers view
|
||||
{
|
||||
}
|
||||
|
||||
ListViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
ListViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillText(ascene[p].height, p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].height)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Animator = function(m, v, divid)
|
||||
{
|
||||
this.model = m
|
||||
this.viewer = v
|
||||
this.timer = null
|
||||
|
||||
this.cursor = -1
|
||||
|
||||
this.sc = document.getElementById(divid+"_canvas")
|
||||
this.ctx = this.sc.getContext("2d")
|
||||
this.sc.width = this.sc.width
|
||||
this.speed = 75
|
||||
|
||||
this.script = this.model.init() //does the sort and sends script back
|
||||
this.viewer.init(this.ctx)
|
||||
}
|
||||
|
||||
Animator.prototype.getContext=function()
|
||||
{
|
||||
return this.ctx
|
||||
}
|
||||
|
||||
Animator.prototype.incCursor=function()
|
||||
{
|
||||
if (this.cursor < this.script.length-1)
|
||||
this.cursor = this.cursor + 1
|
||||
}
|
||||
|
||||
Animator.prototype.decCursor=function()
|
||||
{
|
||||
if (this.cursor > 0)
|
||||
this.cursor = this.cursor -1
|
||||
}
|
||||
|
||||
Animator.prototype.getCursor=function()
|
||||
{
|
||||
return this.cursor
|
||||
}
|
||||
|
||||
Animator.prototype.setCursor=function(newc)
|
||||
{
|
||||
this.cursor = newc
|
||||
}
|
||||
|
||||
Animator.prototype.run = function(animobj)
|
||||
{
|
||||
if (this.timer == null)
|
||||
this.timer = setInterval(animobj+".forward()",this.speed)
|
||||
}
|
||||
|
||||
Animator.prototype.stop = function()
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer=null
|
||||
}
|
||||
|
||||
Animator.prototype.forward = function()
|
||||
{
|
||||
this.incCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
if (this.getCursor() == this.script.length-1 && this.timer != null)
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
|
||||
Animator.prototype.backward = function()
|
||||
{
|
||||
this.decCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.end = function()
|
||||
{
|
||||
this.setCursor(this.script.length-1)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
|
||||
}
|
||||
|
||||
Animator.prototype.begin = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width=this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.init = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[0])
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
51
book/modules/luther/sphinx/animation/chart.html
Normal file
51
book/modules/luther/sphinx/animation/chart.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>charts</title>
|
||||
<!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
|
||||
<!-- <script type="text/javascript" src="chart.js"></script> -->
|
||||
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jqchart/jquery.gchart.js"></script>
|
||||
<script type="text/javascript" src="jqchart/jquery.gchart.graphviz.js"></script>
|
||||
<style>
|
||||
#visualization { width: 800px; height: 400px; }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="visualization"></div>
|
||||
<script type="text/javascript">
|
||||
// $("#visualization").gchart({type: 'graphviz', series: [$.gchart.series([20, 50, 30])]});
|
||||
// label: '<f0> left | <f1> middle | <f2> right'
|
||||
|
||||
$('#visualization').gchart($.gchart.graphviz(true,
|
||||
{
|
||||
struct1: {label: '<f0> left |<f1> middle |<f2> right'},
|
||||
struct2: {label: '<f0> one|<f1> two'},
|
||||
struct3: {label: 'hello\nworld |{ b |{c|<here> d|e}| f}| g | h'}
|
||||
},
|
||||
{
|
||||
'struct1:f1': ['struct2:f0'],
|
||||
'struct2:f2': ['struct3:here']
|
||||
},
|
||||
{
|
||||
node: {shape: 'record'}
|
||||
}
|
||||
));
|
||||
|
||||
|
||||
// $('#visualization').gchart($.gchart.graphviz(true,
|
||||
// {struct1: {label: "<f0> left |<f1> middle |<f2> right"},
|
||||
// struct2: {label: "<f0> one|<f1> two"},
|
||||
// struct3: {label: "hello\ world |{ b |{c|<here> d|e}| f}| g | h"}
|
||||
// },
|
||||
// {'struct1:f1': ['struct2:f0'],
|
||||
// 'struct2:f2': ['struct3:here']},
|
||||
// {node: {shape: 'record'}}))
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<title>jQuery Google Chart</title>
|
||||
<style type="text/css">
|
||||
#basicGChart { width: 450px; height: 300px }
|
||||
</style>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.gchart.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#basicGChart').gchart({type: 'line', maxValue: 40,
|
||||
title: 'Weather for|Brisbane, Australia', titleColor: 'green',
|
||||
backgroundColor: $.gchart.gradient('horizontal', 'ccffff', 'ccffff00'),
|
||||
series: [$.gchart.series('Max', [29.1, 28.9, 28.1, 26.3,
|
||||
23.5, 21.2, 20.6, 21.7, 23.8, 25.6, 27.3, 28.6], 'red', 'ffcccc'),
|
||||
$.gchart.series('Min', [20.9, 20.8, 19.5, 16.9,
|
||||
13.8, 10.9, 9.5, 10.0, 12.5, 15.6, 18.0, 19.8], 'green'),
|
||||
$.gchart.series('Rainfall', [157.7, 174.6, 138.5, 90.4,
|
||||
98.8, 71.2, 62.6, 42.7, 34.9, 94.4, 96.5, 126.2], 'blue', 0, 200)],
|
||||
axes: [$.gchart.axis('bottom', ['Jan', 'Feb', 'Mar', 'Apr',
|
||||
'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 'black'),
|
||||
$.gchart.axis('left', 0, 40, 'red', 'right'),
|
||||
$.gchart.axis('left', ['C'], [50], 'red', 'right'),
|
||||
$.gchart.axis('right', 0, 200, 50, 'blue', 'left'),
|
||||
$.gchart.axis('right', ['mm'], [50], 'blue', 'left')],
|
||||
legend: 'right'});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>jQuery Google Chart Basics</h1>
|
||||
<p>This page demonstrates the very basics of the
|
||||
<a href="http://keith-wood.name/gChart.html">jQuery Google Chart plugin</a>.
|
||||
It contains the minimum requirements for using the plugin and
|
||||
can be used as the basis for your own experimentation.</p>
|
||||
<p>For more detail see the <a href="http://keith-wood.name/gChartRef.html">documentation reference</a> page.</p>
|
||||
<div id="basicGChart"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,334 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart interface extensions for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
|
||||
(function($) { // Hide scope, no $ conflict
|
||||
|
||||
$.extend($.gchart._defaults, {
|
||||
// Maps -------------------
|
||||
mapLatLong: false, // True to use lat/long coords in mapArea
|
||||
mapArea: null, // New maps: (number) pixel border all around or
|
||||
// (number[4]) individual pixel borders or lat/long
|
||||
// Original maps: the general area to show:
|
||||
// world, africa, asia, europe, middle_east, south_america, usa
|
||||
mapRegions: [], // List of country/state codes to plot
|
||||
mapDefaultColor: 'bebebe', // The colour for non-plotted countries/states
|
||||
mapColors: ['blue', 'red'], // The colour range for plotted countries/states
|
||||
// QR Code ----------------
|
||||
qrECLevel: null, // Error correction level: low, medium, quarter, high
|
||||
qrMargin: null // Margin (squares) around QR code, default is 4
|
||||
});
|
||||
|
||||
// New chart types: formula, map, mapOriginal, meter, qrCode, scatter, venn
|
||||
$.extend($.gchart._chartTypes, {formula: 'tx', map: 'map', mapOriginal: 't',
|
||||
meter: 'gom', qrCode: 'qr', scatter: 's', venn: 'v',
|
||||
gom: 'gom', qr: 'qr', s: 's', t: 't', tx: 'tx', v: 'v'});
|
||||
|
||||
$.extend($.gchart._typeOptions, {map: 'map', qr: 'qr', t: 'map', tx: 'no'});
|
||||
|
||||
$.extend($.gchart._prototype.prototype, {
|
||||
|
||||
/* Latitude and longitude coordinates for the continents. */
|
||||
mapAfrica: [-35, -20, 40, 55],
|
||||
mapAsia: [-15, 40, 75, 180],
|
||||
mapAustralia: [-45, 110, -10, 155],
|
||||
mapEurope: [33, -25, 73, 50],
|
||||
mapNorthAmerica: [5, -175, 75, -50],
|
||||
mapSouthAmerica: [-55, -85, 15, -35],
|
||||
|
||||
/* Prepare options for a scatter chart.
|
||||
@param values (number[][2/3]) the coordinates of the points: [0] is the x-coord,
|
||||
[1] is the y-coord, [2] (optional) is the percentage size
|
||||
@param minMax (number[2/4]) any minimum and maximum values for the axes (optional)
|
||||
@param labels (string[]) the labels for the groups (optional)
|
||||
@param colours (string[]) the colours for the labels (optional)
|
||||
@param options (object) additional settings (optional)
|
||||
@return (object) the configured options object */
|
||||
scatter: function(values, minMax, labels, colours, options) {
|
||||
if (!$.isArray(minMax)) {
|
||||
options = minMax;
|
||||
colours = null;
|
||||
labels = null;
|
||||
minMax = null;
|
||||
}
|
||||
else if (typeof minMax[0] != 'number') {
|
||||
options = colours;
|
||||
colours = labels;
|
||||
labels = minMax;
|
||||
minMax = null;
|
||||
}
|
||||
if (labels && !$.isArray(labels)) {
|
||||
options = labels;
|
||||
colours = null;
|
||||
labels = null;
|
||||
}
|
||||
var series = [[], [], []];
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
series[0][i] = values[i][0];
|
||||
series[1][i] = values[i][1];
|
||||
series[2][i] = values[i][2] || 100;
|
||||
}
|
||||
minMax = minMax || [];
|
||||
options = options || {};
|
||||
if (labels) {
|
||||
options.extension = {chdl: labels.join('|')};
|
||||
}
|
||||
if (colours) {
|
||||
colours = $.map(colours, function(v, i) {
|
||||
return $.gchart.color(v);
|
||||
});
|
||||
$.extend(options.extension, {chco: colours.join('|')});
|
||||
}
|
||||
return $.extend({}, options,
|
||||
{type: 'scatter', encoding: (minMax.length >= 2 ? 'scaled' : 'text'), series: [
|
||||
(minMax.length >= 2 ? $.gchart.series(series[0], minMax[0], minMax[1]) :
|
||||
$.gchart.series(series[0])),
|
||||
(minMax.length >= 4 ? $.gchart.series(series[1],
|
||||
(minMax[2] != null ? minMax[2] : minMax[0]), (minMax[3] != null ? minMax[3] : minMax[1])) :
|
||||
$.gchart.series(series[1])), $.gchart.series(series[2])]});
|
||||
},
|
||||
|
||||
/* Prepare options for a Venn diagram.
|
||||
@param size1 (number) the relative size of the first circle
|
||||
@param size2 (number) the relative size of the second circle
|
||||
@param size3 (number) the relative size of the third circle
|
||||
@param overlap12 (number) the overlap between circles 1 and 2
|
||||
@param overlap13 (number) the overlap between circles 1 and 3
|
||||
@param overlap23 (number) the overlap between circles 2 and 3
|
||||
@param overlap123 (number) the overlap between all circles
|
||||
@param options (object) additional settings (optional)
|
||||
@return (object) the configured options object */
|
||||
venn: function(size1, size2, size3, overlap12, overlap13, overlap23, overlap123, options) {
|
||||
return $.extend({}, options || {}, {type: 'venn', series:
|
||||
[$.gchart.series([size1, size2, size3, overlap12, overlap13, overlap23, overlap123])]});
|
||||
},
|
||||
|
||||
/* Prepare options for a Google meter.
|
||||
@param text (string or string[]) the text to show on the arrow (optional)
|
||||
@param values (number or number[] or [] of these) the position(s) of the arrow(s)
|
||||
@param maxValue (number) the maximum value for the meter (optional, default 100)
|
||||
@param colours (string[]) the colours to use for the band (optional)
|
||||
@param labels (string[]) labels appearing beneath the meter (optional)
|
||||
@param styles (number[][4]) the styles of each series' arrows:
|
||||
width, dash, space, arrow size (optional)
|
||||
@param options (object) additional settings (optional)
|
||||
@return (object) the configured options object */
|
||||
meter: function(text, values, maxValue, colours, labels, styles, options) {
|
||||
if (typeof text != 'string' && !$.isArray(text)) {
|
||||
options = styles;
|
||||
styles = labels;
|
||||
labels = colours;
|
||||
colours = maxValue;
|
||||
maxValue = values;
|
||||
values = text;
|
||||
text = '';
|
||||
}
|
||||
if (typeof maxValue != 'number') {
|
||||
options = styles;
|
||||
styles = labels;
|
||||
labels = colours;
|
||||
colours = maxValue;
|
||||
maxValue = null;
|
||||
}
|
||||
if (!$.isArray(colours)) {
|
||||
options = styles;
|
||||
styles = labels;
|
||||
labels = colours;
|
||||
colours = null;
|
||||
}
|
||||
if (!$.isArray(labels)) {
|
||||
options = styles;
|
||||
styles = labels;
|
||||
labels = null;
|
||||
}
|
||||
if (!$.isArray(styles)) {
|
||||
options = styles;
|
||||
styles = null;
|
||||
}
|
||||
values = ($.isArray(values) ? values : [values]);
|
||||
var multi = false;
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
multi = multi || $.isArray(values[i]);
|
||||
}
|
||||
var ss = (multi ? [] : [$.gchart.series(values)]);
|
||||
if (multi) {
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
ss.push($.gchart.series($.isArray(values[i]) ? values[i] : [values[i]]));
|
||||
}
|
||||
}
|
||||
values = ss;
|
||||
if (colours) {
|
||||
var cs = '';
|
||||
$.each(colours, function(i, v) {
|
||||
cs += ',' + $.gchart.color(v);
|
||||
});
|
||||
colours = cs.substr(1);
|
||||
}
|
||||
if (styles) {
|
||||
var ls = ['', ''];
|
||||
$.each(styles, function(i, v) {
|
||||
v = ($.isArray(v) ? v : [v]);
|
||||
ls[0] += '|' + $.gchart.color(v.slice(0, 3).join(','));
|
||||
ls[1] += '|' + (v[3] || 15);
|
||||
});
|
||||
styles = ls[0].substr(1) + ls[1];
|
||||
}
|
||||
var axis = (labels && labels.length ? $.gchart.axis('y', labels) : null);
|
||||
return $.extend({}, options || {}, {type: 'meter',
|
||||
maxValue: maxValue || 100, series: values,
|
||||
dataLabels: ($.isArray(text) ? text : [text || ''])},
|
||||
(colours ? {extension: {chco: colours}} : {}),
|
||||
(axis ? {axes: [axis]} : {}),
|
||||
(styles ? {extension: {chls: styles}} : {}));
|
||||
},
|
||||
|
||||
/* Prepare options for a map chart.
|
||||
@param latLongArea (boolean) true to specify the area via latitude/longitude (optional)
|
||||
@param mapArea (string) the region of the world to show (original map style) or
|
||||
(number[4]) the pixel zoom or lat/long coordinates to show or
|
||||
(number) all around pixel zoom (optional)
|
||||
@param values (object) the countries/states to plot -
|
||||
attributes are country/state codes and values
|
||||
@param defaultColour (string) the colour for regions without values (optional)
|
||||
@param colour (string or string[]) the starting colour or
|
||||
gradient colours for rendering values (optional)
|
||||
@param endColour (string) the ending colour for rendering values (optional)
|
||||
@param options (object) additional settings (optional)
|
||||
@return (object) the configured options object */
|
||||
map: function(latLongArea, mapArea, values, defaultColour, colour, endColour, options) {
|
||||
if (typeof latLongArea != 'boolean') {
|
||||
options = endColour;
|
||||
endColour = colour;
|
||||
colour = defaultColour;
|
||||
defaultColour = values;
|
||||
values = mapArea;
|
||||
mapArea = latLongArea;
|
||||
latLongArea = false;
|
||||
}
|
||||
if (typeof mapArea == 'object' && !$.isArray(mapArea)) { // Optional mapArea
|
||||
options = endColour;
|
||||
endColour = colour;
|
||||
colour = defaultColour;
|
||||
defaultColour = values;
|
||||
values = mapArea;
|
||||
mapArea = null;
|
||||
}
|
||||
if (typeof defaultColour == 'object') {
|
||||
options = defaultColour;
|
||||
endColour = null;
|
||||
colour = null;
|
||||
defaultColour = null;
|
||||
}
|
||||
else if (typeof colour == 'object' && !$.isArray(colour)) {
|
||||
options = colour;
|
||||
endColour = null;
|
||||
colour = null;
|
||||
}
|
||||
else if (typeof endColour == 'object') {
|
||||
options = endColour;
|
||||
endColour = null;
|
||||
}
|
||||
var mapRegions = [];
|
||||
var data = [];
|
||||
var i = 0;
|
||||
for (var name in values) {
|
||||
mapRegions[i] = name.replace(/_/g, '-');
|
||||
data[i] = values[name];
|
||||
i++;
|
||||
}
|
||||
if (typeof mapArea == 'number') {
|
||||
mapArea = [mapArea, mapArea, mapArea, mapArea];
|
||||
}
|
||||
return $.extend({}, options || {},
|
||||
{type: (typeof mapArea == 'string' ? 'mapOriginal' : 'map'),
|
||||
mapLatLong: latLongArea, mapArea: mapArea, mapRegions: mapRegions,
|
||||
mapDefaultColor: defaultColour || $.gchart._defaults.mapDefaultColor,
|
||||
mapColors: ($.isArray(colour) ? colour : [colour || $.gchart._defaults.mapColors[0],
|
||||
endColour || $.gchart._defaults.mapColors[1]]),
|
||||
series: [$.gchart.series('', data)]});
|
||||
},
|
||||
|
||||
/* Prepare options for generating a QR Code.
|
||||
@param text (object) the QR code settings or
|
||||
(string) the text to encode
|
||||
@param encoding (string) the encoding scheme (optional)
|
||||
@param ecLevel (string) the error correction level: l, m, q, h (optional)
|
||||
@param margin (number) the margin around the code (optional)
|
||||
@return (object) the configured options object */
|
||||
qrCode: function(text, encoding, ecLevel, margin) {
|
||||
var options = {};
|
||||
if (typeof text == 'object') {
|
||||
options = text;
|
||||
}
|
||||
else { // Individual fields
|
||||
options = {dataLabels: [text], encoding: encoding,
|
||||
qrECLevel: ecLevel, qrMargin: margin};
|
||||
}
|
||||
options.type = 'qrCode';
|
||||
if (options.text) {
|
||||
options.dataLabels = [options.text];
|
||||
options.text = null;
|
||||
}
|
||||
return options;
|
||||
},
|
||||
|
||||
/* Generate standard options for map charts.
|
||||
@param options (object) the chart settings
|
||||
@param labels (string) the concatenated labels for the chart
|
||||
@return (string) the standard map chart options */
|
||||
mapOptions: function(options, labels) {
|
||||
var encoding = this['_' + options.encoding + 'Encoding'] || this['_textEncoding'];
|
||||
var colours = '';
|
||||
for (var i = 0; i < options.mapColors.length; i++) {
|
||||
colours += ',' + $.gchart.color(options.mapColors[i]);
|
||||
}
|
||||
return (typeof options.mapArea == 'string' ? '&chtm=' + options.mapArea :
|
||||
(options.mapArea ? (options.mapLatLong ? ':fixed=' : ':auto=') +
|
||||
($.isArray(options.mapArea) ? options.mapArea.join(',') :
|
||||
options.mapArea + ',' + options.mapArea + ',' + options.mapArea + ',' + options.mapArea) : '')) +
|
||||
'&chd=' + encoding.apply($.gchart, [options]) +
|
||||
(options.mapRegions && options.mapRegions.length ?
|
||||
'&chld=' + options.mapRegions.join(typeof options.mapArea == 'string' ? '' : '|') : '') +
|
||||
'&chco=' + $.gchart.color(options.mapDefaultColor) + colours;
|
||||
},
|
||||
|
||||
/* Generate standard options for QR Code charts.
|
||||
@param options (object) the chart settings
|
||||
@param labels (string) the concatenated labels for the chart
|
||||
@return (string) the standard QR Code chart options */
|
||||
qrOptions: function(options, labels) {
|
||||
return $.gchart._include('&choe=', options.encoding) +
|
||||
(options.qrECLevel || options.qrMargin ?
|
||||
'&chld=' + (options.qrECLevel ? options.qrECLevel.charAt(0) : 'l') +
|
||||
(options.qrMargin != null ? '|' + options.qrMargin : '') : '') +
|
||||
(labels ? '&chl=' + labels.substr(1) : '');
|
||||
},
|
||||
|
||||
/* Generate standard options for charts that aren't really charts.
|
||||
@param options (object) the chart settings
|
||||
@param labels (string) the concatenated labels for the chart
|
||||
@return (string) the standard non-chart options */
|
||||
noOptions: function(options, labels) {
|
||||
return '&chl=' + labels.substr(1);
|
||||
},
|
||||
|
||||
/* Generate the options for chart size, including restriction for maps.
|
||||
@param type (string) the encoded chart type
|
||||
@param options (object) the chart settings
|
||||
@return (string) the chart size options */
|
||||
addSize: function(type, options) {
|
||||
var maxSize = (type == 'map' || type == 't' ? 600 : 1000);
|
||||
options.width = Math.max(10, Math.min(options.width, maxSize));
|
||||
options.height = Math.max(10, Math.min(options.height, maxSize));
|
||||
if (options.width * options.height > 300000) {
|
||||
options.height = Math.floor(300000 / options.width);
|
||||
}
|
||||
return 'chs=' + options.width + 'x' + options.height;
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.ext.min.js
vendored
Normal file
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.ext.min.js
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart interface extensions for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
(function($){$.extend($.gchart._defaults,{mapLatLong:false,mapArea:null,mapRegions:[],mapDefaultColor:'bebebe',mapColors:['blue','red'],qrECLevel:null,qrMargin:null});$.extend($.gchart._chartTypes,{formula:'tx',map:'map',mapOriginal:'t',meter:'gom',qrCode:'qr',scatter:'s',venn:'v',gom:'gom',qr:'qr',s:'s',t:'t',tx:'tx',v:'v'});$.extend($.gchart._typeOptions,{map:'map',qr:'qr',t:'map',tx:'no'});$.extend($.gchart._prototype.prototype,{mapAfrica:[-35,-20,40,55],mapAsia:[-15,40,75,180],mapAustralia:[-45,110,-10,155],mapEurope:[33,-25,73,50],mapNorthAmerica:[5,-175,75,-50],mapSouthAmerica:[-55,-85,15,-35],scatter:function(a,b,c,d,e){if(!$.isArray(b)){e=b;d=null;c=null;b=null}else if(typeof b[0]!='number'){e=d;d=c;c=b;b=null}if(c&&!$.isArray(c)){e=c;d=null;c=null}var f=[[],[],[]];for(var i=0;i<a.length;i++){f[0][i]=a[i][0];f[1][i]=a[i][1];f[2][i]=a[i][2]||100}b=b||[];e=e||{};if(c){e.extension={chdl:c.join('|')}}if(d){d=$.map(d,function(v,i){return $.gchart.color(v)});$.extend(e.extension,{chco:d.join('|')})}return $.extend({},e,{type:'scatter',encoding:(b.length>=2?'scaled':'text'),series:[(b.length>=2?$.gchart.series(f[0],b[0],b[1]):$.gchart.series(f[0])),(b.length>=4?$.gchart.series(f[1],(b[2]!=null?b[2]:b[0]),(b[3]!=null?b[3]:b[1])):$.gchart.series(f[1])),$.gchart.series(f[2])]})},venn:function(a,b,c,d,e,f,g,h){return $.extend({},h||{},{type:'venn',series:[$.gchart.series([a,b,c,d,e,f,g])]})},meter:function(a,b,c,d,e,f,g){if(typeof a!='string'&&!$.isArray(a)){g=f;f=e;e=d;d=c;c=b;b=a;a=''}if(typeof c!='number'){g=f;f=e;e=d;d=c;c=null}if(!$.isArray(d)){g=f;f=e;e=d;d=null}if(!$.isArray(e)){g=f;f=e;e=null}if(!$.isArray(f)){g=f;f=null}b=($.isArray(b)?b:[b]);var h=false;for(var i=0;i<b.length;i++){h=h||$.isArray(b[i])}var j=(h?[]:[$.gchart.series(b)]);if(h){for(var i=0;i<b.length;i++){j.push($.gchart.series($.isArray(b[i])?b[i]:[b[i]]))}}b=j;if(d){var k='';$.each(d,function(i,v){k+=','+$.gchart.color(v)});d=k.substr(1)}if(f){var l=['',''];$.each(f,function(i,v){v=($.isArray(v)?v:[v]);l[0]+='|'+$.gchart.color(v.slice(0,3).join(','));l[1]+='|'+(v[3]||15)});f=l[0].substr(1)+l[1]}var m=(e&&e.length?$.gchart.axis('y',e):null);return $.extend({},g||{},{type:'meter',maxValue:c||100,series:b,dataLabels:($.isArray(a)?a:[a||''])},(d?{extension:{chco:d}}:{}),(m?{axes:[m]}:{}),(f?{extension:{chls:f}}:{}))},map:function(a,b,c,d,e,f,g){if(typeof a!='boolean'){g=f;f=e;e=d;d=c;c=b;b=a;a=false}if(typeof b=='object'&&!$.isArray(b)){g=f;f=e;e=d;d=c;c=b;b=null}if(typeof d=='object'){g=d;f=null;e=null;d=null}else if(typeof e=='object'&&!$.isArray(e)){g=e;f=null;e=null}else if(typeof f=='object'){g=f;f=null}var h=[];var j=[];var i=0;for(var k in c){h[i]=k.replace(/_/g,'-');j[i]=c[k];i++}if(typeof b=='number'){b=[b,b,b,b]}return $.extend({},g||{},{type:(typeof b=='string'?'mapOriginal':'map'),mapLatLong:a,mapArea:b,mapRegions:h,mapDefaultColor:d||$.gchart._defaults.mapDefaultColor,mapColors:($.isArray(e)?e:[e||$.gchart._defaults.mapColors[0],f||$.gchart._defaults.mapColors[1]]),series:[$.gchart.series('',j)]})},qrCode:function(a,b,c,d){var e={};if(typeof a=='object'){e=a}else{e={dataLabels:[a],encoding:b,qrECLevel:c,qrMargin:d}}e.type='qrCode';if(e.text){e.dataLabels=[e.text];e.text=null}return e},mapOptions:function(a,b){var c=this['_'+a.encoding+'Encoding']||this['_textEncoding'];var d='';for(var i=0;i<a.mapColors.length;i++){d+=','+$.gchart.color(a.mapColors[i])}return(typeof a.mapArea=='string'?'&chtm='+a.mapArea:(a.mapArea?(a.mapLatLong?':fixed=':':auto=')+($.isArray(a.mapArea)?a.mapArea.join(','):a.mapArea+','+a.mapArea+','+a.mapArea+','+a.mapArea):''))+'&chd='+c.apply($.gchart,[a])+(a.mapRegions&&a.mapRegions.length?'&chld='+a.mapRegions.join(typeof a.mapArea=='string'?'':'|'):'')+'&chco='+$.gchart.color(a.mapDefaultColor)+d},qrOptions:function(a,b){return $.gchart._include('&choe=',a.encoding)+(a.qrECLevel||a.qrMargin?'&chld='+(a.qrECLevel?a.qrECLevel.charAt(0):'l')+(a.qrMargin!=null?'|'+a.qrMargin:''):'')+(b?'&chl='+b.substr(1):'')},noOptions:function(a,b){return'&chl='+b.substr(1)},addSize:function(a,b){var c=(a=='map'||a=='t'?600:1000);b.width=Math.max(10,Math.min(b.width,c));b.height=Math.max(10,Math.min(b.height,c));if(b.width*b.height>300000){b.height=Math.floor(300000/b.width)}return'chs='+b.width+'x'+b.height}})})(jQuery);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart interface extensions for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(o($){$.w($.7.O,{X:Y,r:6,C:[],P:\'1o\',B:[\'1p\',\'1q\'],D:6,E:6});$.w($.7.1r,{1s:\'Q\',z:\'z\',19:\'t\',Z:\'11\',12:\'F\',13:\'s\',14:\'v\',11:\'11\',F:\'F\',s:\'s\',t:\'t\',Q:\'Q\',v:\'v\'});$.w($.7.1t,{z:\'z\',F:\'F\',t:\'z\',Q:\'1u\'});$.w($.7.1v.1w,{1x:[-1a,-20,1b,1c],1y:[-15,1b,1d,1z],1A:[-1B,1C,-10,1D],1E:[1F,-25,1G,1e],1H:[5,-1I,1d,-1e],1J:[-1c,-1K,15,-1a],13:o(a,b,c,d,e){8(!$.n(b)){e=b;d=6;c=6;b=6}R 8(p b[0]!=\'16\'){e=d;d=c;c=b;b=6}8(c&&!$.n(c)){e=c;d=6;c=6}9 f=[[],[],[]];G(9 i=0;i<a.A;i++){f[0][i]=a[i][0];f[1][i]=a[i][1];f[2][i]=a[i][2]||1f}b=b||[];e=e||{};8(c){e.S={1L:c.H(\'|\')}}8(d){d=$.z(d,o(v,i){u $.7.I(v)});$.w(e.S,{17:d.H(\'|\')})}u $.w({},e,{J:\'13\',T:(b.A>=2?\'1M\':\'U\'),q:[(b.A>=2?$.7.q(f[0],b[0],b[1]):$.7.q(f[0])),(b.A>=4?$.7.q(f[1],(b[2]!=6?b[2]:b[0]),(b[3]!=6?b[3]:b[1])):$.7.q(f[1])),$.7.q(f[2])]})},14:o(a,b,c,d,e,f,g,h){u $.w({},h||{},{J:\'14\',q:[$.7.q([a,b,c,d,e,f,g])]})},Z:o(a,b,c,d,e,f,g){8(p a!=\'V\'&&!$.n(a)){g=f;f=e;e=d;d=c;c=b;b=a;a=\'\'}8(p c!=\'16\'){g=f;f=e;e=d;d=c;c=6}8(!$.n(d)){g=f;f=e;e=d;d=6}8(!$.n(e)){g=f;f=e;e=6}8(!$.n(f)){g=f;f=6}b=($.n(b)?b:[b]);9 h=Y;G(9 i=0;i<b.A;i++){h=h||$.n(b[i])}9 j=(h?[]:[$.7.q(b)]);8(h){G(9 i=0;i<b.A;i++){j.1N($.7.q($.n(b[i])?b[i]:[b[i]]))}}b=j;8(d){9 k=\'\';$.1g(d,o(i,v){k+=\',\'+$.7.I(v)});d=k.W(1)}8(f){9 l=[\'\',\'\'];$.1g(f,o(i,v){v=($.n(v)?v:[v]);l[0]+=\'|\'+$.7.I(v.1O(0,3).H(\',\'));l[1]+=\'|\'+(v[3]||15)});f=l[0].W(1)+l[1]}9 m=(e&&e.A?$.7.1P(\'y\',e):6);u $.w({},g||{},{J:\'Z\',1Q:c||1f,q:b,18:($.n(a)?a:[a||\'\'])},(d?{S:{17:d}}:{}),(m?{1R:[m]}:{}),(f?{S:{1S:f}}:{}))},z:o(a,b,c,d,e,f,g){8(p a!=\'1T\'){g=f;f=e;e=d;d=c;c=b;b=a;a=Y}8(p b==\'K\'&&!$.n(b)){g=f;f=e;e=d;d=c;c=b;b=6}8(p d==\'K\'){g=d;f=6;e=6;d=6}R 8(p e==\'K\'&&!$.n(e)){g=e;f=6;e=6}R 8(p f==\'K\'){g=f;f=6}9 h=[];9 j=[];9 i=0;G(9 k 1U c){h[i]=k.1V(/1h/g,\'-\');j[i]=c[k];i++}8(p b==\'16\'){b=[b,b,b,b]}u $.w({},g||{},{J:(p b==\'V\'?\'19\':\'z\'),X:a,r:b,C:h,P:d||$.7.O.P,B:($.n(e)?e:[e||$.7.O.B[0],f||$.7.O.B[1]]),q:[$.7.q(\'\',j)]})},12:o(a,b,c,d){9 e={};8(p a==\'K\'){e=a}R{e={18:[a],T:b,D:c,E:d}}e.J=\'12\';8(e.U){e.18=[e.U];e.U=6}u e},1W:o(a,b){9 c=1i[\'1h\'+a.T+\'1X\']||1i[\'1Y\'];9 d=\'\';G(9 i=0;i<a.B.A;i++){d+=\',\'+$.7.I(a.B[i])}u(p a.r==\'V\'?\'&1Z=\'+a.r:(a.r?(a.X?\':21=\':\':22=\')+($.n(a.r)?a.r.H(\',\'):a.r+\',\'+a.r+\',\'+a.r+\',\'+a.r):\'\'))+\'&23=\'+c.24($.7,[a])+(a.C&&a.C.A?\'&1j=\'+a.C.H(p a.r==\'V\'?\'\':\'|\'):\'\')+\'&17=\'+$.7.I(a.P)+d},26:o(a,b){u $.7.27(\'&28=\',a.T)+(a.D||a.E?\'&1j=\'+(a.D?a.D.29(0):\'l\')+(a.E!=6?\'|\'+a.E:\'\'):\'\')+(b?\'&1k=\'+b.W(1):\'\')},2a:o(a,b){u\'&1k=\'+b.W(1)},2b:o(a,b){9 c=(a==\'z\'||a==\'t\'?2c:2d);b.L=M.1l(10,M.1m(b.L,c));b.N=M.1l(10,M.1m(b.N,c));8(b.L*b.N>1n){b.N=M.2e(1n/b.L)}u\'2f=\'+b.L+\'x\'+b.N}})})(2g);',62,141,'||||||null|gchart|if|var||||||||||||||isArray|function|typeof|series|mapArea|||return||extend|||map|length|mapColors|mapRegions|qrECLevel|qrMargin|qr|for|join|color|type|object|width|Math|height|_defaults|mapDefaultColor|tx|else|extension|encoding|text|string|substr|mapLatLong|false|meter||gom|qrCode|scatter|venn||number|chco|dataLabels|mapOriginal|35|40|55|75|50|100|each|_|this|chld|chl|max|min|300000|bebebe|blue|red|_chartTypes|formula|_typeOptions|no|_prototype|prototype|mapAfrica|mapAsia|180|mapAustralia|45|110|155|mapEurope|33|73|mapNorthAmerica|175|mapSouthAmerica|85|chdl|scaled|push|slice|axis|maxValue|axes|chls|boolean|in|replace|mapOptions|Encoding|_textEncoding|chtm||fixed|auto|chd|apply||qrOptions|_include|choe|charAt|noOptions|addSize|600|1000|floor|chs|jQuery'.split('|'),0,{}))
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart GraphViz extension for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
|
||||
(function($) { // Hide scope, no $ conflict
|
||||
|
||||
// New chart types: graphviz
|
||||
$.extend($.gchart._chartTypes, {graphviz: 'gv', gv: 'gv'});
|
||||
|
||||
$.extend($.gchart._typeOptions, {gv: 'no'});
|
||||
|
||||
$.extend($.gchart._prototype.prototype, {
|
||||
|
||||
/* Prepare options for a GraphViz chart.
|
||||
@param engine (string, optional) the graphing engine to use:
|
||||
dot (default), neato, twopi, circo, fdp
|
||||
@param options (object, optional) other options for the chart
|
||||
@param directed (boolean, optional) true for directed graph, false for normal
|
||||
@param nodes (string) the DOT representation of the nodes to graph or
|
||||
(object) the graph nodes and their settings
|
||||
@param edges (object, optional) the graph edges keyed from, with array of to
|
||||
@param attrs (object, optional) other settings for the graph
|
||||
@return (object) the configured options object */
|
||||
graphviz: function(engine, options, directed, nodes, edges, attrs) {
|
||||
if (arguments.length == 1) {
|
||||
nodes = engine;
|
||||
engine = 'dot';
|
||||
}
|
||||
var hadEngine = typeof engine == 'string';
|
||||
if (!hadEngine) {
|
||||
attrs = edges;
|
||||
edges = nodes;
|
||||
nodes = directed;
|
||||
directed = options;
|
||||
options = engine;
|
||||
engine = 'dot';
|
||||
}
|
||||
if ((options && typeof options != 'object') || arguments.length == 2 ||
|
||||
(arguments.length == 3 && hadEngine)) {
|
||||
attrs = edges;
|
||||
edges = nodes;
|
||||
nodes = directed;
|
||||
directed = options;
|
||||
options = {};
|
||||
}
|
||||
if (typeof directed != 'boolean' && arguments.length > 1) {
|
||||
attrs = edges;
|
||||
edges = nodes;
|
||||
nodes = directed;
|
||||
directed = false;
|
||||
}
|
||||
options = options || {};
|
||||
options.type = 'gv' + (engine != 'dot' ? ':' + engine : '');
|
||||
options.dataLabels = [typeof nodes == 'string' ? nodes :
|
||||
this._genGraph(directed, nodes, edges, attrs)];
|
||||
return options;
|
||||
},
|
||||
|
||||
/* Generate a graph definition.
|
||||
@param directed (boolean, optional) true for directed graph, false for normal
|
||||
@param nodes (object) the graph nodes and their settings
|
||||
@param edges (object) the graph edges keyed from, with array of to
|
||||
@param attrs (object, optional) other settings for the graph
|
||||
@return (string) the graph definition */
|
||||
_genGraph: function(directed, nodes, edges, attrs) {
|
||||
attrs = attrs || {};
|
||||
var gdef = (directed ? 'digraph' : 'graph') + '{';
|
||||
var sep = '';
|
||||
for (var n in attrs) {
|
||||
gdef += sep + n;
|
||||
var sep2 = '[';
|
||||
for (var n2 in attrs[n]) {
|
||||
gdef += sep2 + n2 + '=' + attrs[n][n2];
|
||||
sep2 = ','
|
||||
}
|
||||
gdef += (sep2 != '[' ? ']' : '');
|
||||
sep = ';';
|
||||
}
|
||||
for (var node in nodes || {}) {
|
||||
gdef += sep + node;
|
||||
var sep2 = '[';
|
||||
for (var n in nodes[node]) {
|
||||
gdef += sep2 + n + '=' + nodes[node][n];
|
||||
sep2 = ','
|
||||
}
|
||||
gdef += (sep2 != '[' ? ']' : '');
|
||||
sep = ';';
|
||||
}
|
||||
for (var edge in edges || {}) {
|
||||
for (var n in edges[edge]) {
|
||||
gdef += sep + edge + (directed ? '->' : '--') + edges[edge][n];
|
||||
}
|
||||
sep = ';';
|
||||
}
|
||||
gdef += '}';
|
||||
return gdef;
|
||||
},
|
||||
|
||||
/* Generate standard options for charts that aren't really charts.
|
||||
@param options (object) the chart settings
|
||||
@param labels (string) the concatenated labels for the chart
|
||||
@return (string) the standard non-chart options */
|
||||
noOptions: function(options, labels) {
|
||||
return '&chl=' + labels.substr(1);
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.graphviz.min.js
vendored
Normal file
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.graphviz.min.js
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart GraphViz extension for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
(function($){$.extend($.gchart._chartTypes,{graphviz:'gv',gv:'gv'});$.extend($.gchart._typeOptions,{gv:'no'});$.extend($.gchart._prototype.prototype,{graphviz:function(a,b,c,d,e,f){if(arguments.length==1){d=a;a='dot'}var g=typeof a=='string';if(!g){f=e;e=d;d=c;c=b;b=a;a='dot'}if((b&&typeof b!='object')||arguments.length==2||(arguments.length==3&&g)){f=e;e=d;d=c;c=b;b={}}if(typeof c!='boolean'&&arguments.length>1){f=e;e=d;d=c;c=false}b=b||{};b.type='gv'+(a!='dot'?':'+a:'');b.dataLabels=[typeof d=='string'?d:this._genGraph(c,d,e,f)];return b},_genGraph:function(a,b,c,d){d=d||{};var e=(a?'digraph':'graph')+'{';var f='';for(var n in d){e+=f+n;var g='[';for(var h in d[n]){e+=g+h+'='+d[n][h];g=','}e+=(g!='['?']':'');f=';'}for(var i in b||{}){e+=f+i;var g='[';for(var n in b[i]){e+=g+n+'='+b[i][n];g=','}e+=(g!='['?']':'');f=';'}for(var j in c||{}){for(var n in c[j]){e+=f+j+(a?'->':'--')+c[j][n]}f=';'}e+='}';return e},noOptions:function(a,b){return'&chl='+b.substr(1)}})})(jQuery);
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/* http://keith-wood.name/gChart.html
|
||||
Google Chart GraphViz extension for jQuery v1.4.3.
|
||||
See API details at http://code.google.com/apis/chart/.
|
||||
Written by Keith Wood (kbwood{at}iinet.com.au) September 2008.
|
||||
Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
|
||||
MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
|
||||
Please attribute the author if you use it. */
|
||||
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(7($){$.m($.o.u,{r:\'6\',6:\'6\'});$.m($.o.v,{6:\'w\'});$.m($.o.x.y,{r:7(a,b,c,d,e,f){8(9.k==1){d=a;a=\'p\'}0 g=l a==\'s\';8(!g){f=e;e=d;d=c;c=b;b=a;a=\'p\'}8((b&&l b!=\'z\')||9.k==2||(9.k==3&&g)){f=e;e=d;d=c;c=b;b={}}8(l c!=\'A\'&&9.k>1){f=e;e=d;d=c;c=B}b=b||{};b.C=\'6\'+(a!=\'p\'?\':\'+a:\'\');b.D=[l d==\'s\'?d:E.t(c,d,e,f)];q b},t:7(a,b,c,d){d=d||{};0 e=(a?\'F\':\'G\')+\'{\';0 f=\'\';4(0 n 5 d){e+=f+n;0 g=\'[\';4(0 h 5 d[n]){e+=g+h+\'=\'+d[n][h];g=\',\'}e+=(g!=\'[\'?\']\':\'\');f=\';\'}4(0 i 5 b||{}){e+=f+i;0 g=\'[\';4(0 n 5 b[i]){e+=g+n+\'=\'+b[i][n];g=\',\'}e+=(g!=\'[\'?\']\':\'\');f=\';\'}4(0 j 5 c||{}){4(0 n 5 c[j]){e+=f+j+(a?\'->\':\'--\')+c[j][n]}f=\';\'}e+=\'}\';q e},H:7(a,b){q\'&I=\'+b.J(1)}})})(K);',47,47,'var||||for|in|gv|function|if|arguments|||||||||||length|typeof|extend||gchart|dot|return|graphviz|string|_genGraph|_chartTypes|_typeOptions|no|_prototype|prototype|object|boolean|false|type|dataLabels|this|digraph|graph|noOptions|chl|substr|jQuery'.split('|'),0,{}))
|
||||
1279
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.icons.js
Normal file
1279
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.icons.js
Normal file
File diff suppressed because it is too large
Load diff
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.icons.min.js
vendored
Normal file
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.icons.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1661
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.js
Normal file
1661
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.js
Normal file
File diff suppressed because it is too large
Load diff
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.min.js
vendored
Normal file
8
book/modules/luther/sphinx/animation/jqchart/jquery.gchart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
138
book/modules/luther/sphinx/animation/searchmodels.js
Normal file
138
book/modules/luther/sphinx/animation/searchmodels.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
DataItem = function(pos, h, col)
|
||||
{
|
||||
this.value = h
|
||||
this.position = pos
|
||||
this.color = col
|
||||
}
|
||||
|
||||
DataItem.prototype.clone=function()
|
||||
{
|
||||
var newitem = new DataItem(this.position,this.value,this.color) //make a copy
|
||||
return newitem
|
||||
}
|
||||
|
||||
DataItem.prototype.getValue=function()
|
||||
{
|
||||
return this.value
|
||||
}
|
||||
|
||||
DataItem.prototype.getColor=function()
|
||||
{
|
||||
return this.color
|
||||
}
|
||||
|
||||
DataItem.prototype.getPosition=function()
|
||||
{
|
||||
return this.position
|
||||
}
|
||||
|
||||
DataItem.prototype.setValue=function(newh)
|
||||
{
|
||||
this.value = newh
|
||||
}
|
||||
|
||||
DataItem.prototype.setPosition=function(newp)
|
||||
{
|
||||
this.position = newp
|
||||
}
|
||||
|
||||
DataItem.prototype.setColor=function(newc)
|
||||
{
|
||||
this.color = newc
|
||||
}
|
||||
|
||||
BinarySearchModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
BinarySearchModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 25
|
||||
var initvalues=[25,30,46,55,60,78,90,95,101,110,122,134,145,150,166,175,187,200,205,213,240,255,267,299]
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var item = new DataItem(i,initvalues[i],"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
//this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.binarySearch(this.valuelist,200)
|
||||
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
return this.script
|
||||
}
|
||||
|
||||
BinarySearchModel.prototype.binarySearch=function(alist, item)
|
||||
{
|
||||
var first = 0
|
||||
var last = alist.length-1
|
||||
var found = false
|
||||
var oldmidpoint = null
|
||||
|
||||
while (first<=last && !found)
|
||||
{ this.chunkcolor(first,last,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
if (oldmidpoint != null)
|
||||
{alist[oldmidpoint].setColor("black")
|
||||
this.script.push(this.makescene(this.valuelist))}
|
||||
var midpoint = Math.floor((first + last)/2)
|
||||
alist[midpoint].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
//alist[midpoint].setColor("black")
|
||||
//this.script.push(this.makescene(this.valuelist))
|
||||
if (alist[midpoint].getValue() == item)
|
||||
{
|
||||
found = true
|
||||
alist[midpoint].setColor("green")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
}
|
||||
else
|
||||
if (item < alist[midpoint].getValue())
|
||||
{
|
||||
last = midpoint-1
|
||||
this.chunkcolor(first,midpoint-1,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
oldmidpoint = midpoint
|
||||
//alist[midpoint].setColor("black")
|
||||
//this.script.push(this.makescene(this.valuelist))
|
||||
}
|
||||
else
|
||||
{
|
||||
first = midpoint+1
|
||||
this.chunkcolor(midpoint+1,last,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
oldmidpoint = midpoint
|
||||
//alist[midpoint].setColor("black")
|
||||
//this.script.push(this.makescene(this.valuelist))
|
||||
}
|
||||
|
||||
}
|
||||
return found
|
||||
|
||||
}
|
||||
|
||||
|
||||
BinarySearchModel.prototype.chunkcolor=function(start,end,c)
|
||||
{
|
||||
for (var clearidx=start; clearidx<=end; clearidx++)
|
||||
this.valuelist[clearidx].setColor(c)
|
||||
}
|
||||
|
||||
|
||||
BinarySearchModel.prototype.makescene = function(somearray)
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<somearray.length; idx++)
|
||||
{
|
||||
var item = somearray[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
41
book/modules/luther/sphinx/animation/simpletree.html
Normal file
41
book/modules/luther/sphinx/animation/simpletree.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="animationrefactor.js"></script>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jqchart/jquery.gchart.js"></script>
|
||||
<script type="text/javascript" src="jqchart/jquery.gchart.graphviz.js"></script>
|
||||
<script type="text/javascript" src="animationrefactor.js"></script>
|
||||
<script type="text/javascript" src="simpletree.js"></script>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<style>
|
||||
#ancan_div { width: 800px; height: 400px; }
|
||||
</style>
|
||||
|
||||
<div id="ancan">
|
||||
<canvas id="ancan_canvas" width="400" height="400" style="border:4px solid blue"></canvas>
|
||||
<div id="ancan_div" width="400" height="400"> </div>
|
||||
<br />
|
||||
<button onclick="ancan_anim = init1('ancan')">Initialize</button>
|
||||
<button onclick="ancan_anim.run('ancan_anim')">Run</button>
|
||||
<button onclick="ancan_anim.stop()">Stop</button> </br>
|
||||
<button onclick="ancan_anim.begin()">Beginning</button>
|
||||
<button onclick="ancan_anim.forward()">Step Forward</button>
|
||||
<button onclick="ancan_anim.backward()">Step Backward</button>
|
||||
<button onclick="ancan_anim.end()">End</button>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
init1 = function(divid)
|
||||
{
|
||||
var a = new Animator(new SimpleTreeModel(), new TreeViewer(), divid)
|
||||
a.init()
|
||||
return a
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
63
book/modules/luther/sphinx/animation/simpletree.js
Normal file
63
book/modules/luther/sphinx/animation/simpletree.js
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
SimpleTreeModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
SimpleTreeModel.prototype.init = function(ctl)
|
||||
{
|
||||
|
||||
var model = [
|
||||
{ nodelist: {C_0: {color: 'blue', style: 'filled'},
|
||||
H_0: {type: 's', shape: 'record', color: 'blue', label: 'foo'},
|
||||
H_1: {type: 's'}, H_2: {type: 's'},
|
||||
C_1: {type: 's'}, H_3: {type: 's'},
|
||||
H_4: {type: 's'}, H_5: {type: 's'}},
|
||||
edgelist: {C_0: ['H_0:f1', 'H_1', 'H_2', 'C_1'], C_1: ['H_3', 'H_4', 'H_5']},
|
||||
params: {node: {shape: 'circle', color: 'red'}, edge: {color: 'blue'}}},
|
||||
|
||||
{ nodelist: {C_0: {},
|
||||
H_0: {type: 's', shape: 'record', color: 'blue', label: 'foo', style: 'filled'},
|
||||
H_1: {type: 's'}, H_2: {type: 's'},
|
||||
C_1: {type: 's'}, H_3: {type: 's'},
|
||||
H_4: {type: 's'}, H_5: {type: 's'}},
|
||||
edgelist: {C_0: ['H_0:f1', 'H_1', 'H_2', 'C_1'], C_1: ['H_3', 'H_4', 'H_5']},
|
||||
params: {node: {shape: 'circle', color: 'red'}, edge: {color: 'blue'}}},
|
||||
|
||||
{ nodelist: {C_0: {},
|
||||
H_0: {type: 's', shape: 'record', label: 'foo'},
|
||||
H_1: {type: 's', style: 'filled', color: 'blue'}, H_2: {type: 's'},
|
||||
C_1: {type: 's'}, H_3: {type: 's'},
|
||||
H_4: {type: 's'}, H_5: {type: 's'}},
|
||||
edgelist: {C_0: ['H_0:f1', 'H_1', 'H_2', 'C_1'], C_1: ['H_3', 'H_4', 'H_5']},
|
||||
params: {node: {shape: 'circle', color: 'red'}, edge: {color: 'blue'}}},
|
||||
|
||||
{ nodelist: {C_0: {},
|
||||
H_0: {type: 's', shape: 'record', label: 'foo'},
|
||||
H_1: {type: 's', style: 'filled', color: 'blue'}, H_2: {type: 's'},
|
||||
C_1: {type: 's'}, H_3: {type: 's'},
|
||||
H_4: {type: 's'}, H_5: {type: 's'}, B_1: {type: 's', color: 'blue', style: 'filled'}},
|
||||
edgelist: {C_0: ['H_0:f1', 'H_1', 'H_2', 'C_1'], C_1: ['H_3', 'H_4', 'H_5'], H_1: ['B_1']},
|
||||
params: {node: {shape: 'circle', color: 'red'}, edge: {color: 'blue'}}},
|
||||
];
|
||||
|
||||
return model
|
||||
}
|
||||
|
||||
|
||||
TreeViewer = function() //construct the view
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
TreeViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
TreeViewer.prototype.render = function(ascene)
|
||||
{
|
||||
$('#ancan_div').attr('class','none')
|
||||
$('#ancan_div').gchart($.gchart.graphviz(true, ascene.nodelist,
|
||||
ascene.edgelist, ascene.params ))
|
||||
|
||||
}
|
||||
|
||||
35
book/modules/luther/sphinx/animation/sortingbase.html
Normal file
35
book/modules/luther/sphinx/animation/sortingbase.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<script type="text/javascript" src="sortmodels.js"></script>
|
||||
<script type="text/javascript" src="sortviewers.js"></script>
|
||||
<script type="text/javascript" src="animationbase.js"></script>
|
||||
|
||||
|
||||
<html>
|
||||
<body onload="">
|
||||
|
||||
<canvas id="ancan" width="400" height="400" style="border:4px solid blue"></canvas>
|
||||
<br />
|
||||
<button onclick="init1()">BubbleSort with BarView</button><button onclick="init2()">BubbleSort with ScatterView</button>
|
||||
<button onclick="init3()">BubbleSort with BoxView</button><br/>
|
||||
<button onclick="init4()">SelectionSort with BarView</button><button onclick="init5()">SelectionSort with ScatterView</button>
|
||||
<button onclick="init6()">SelectionSort with BoxView</button><br/>
|
||||
<button onclick="init7()">InsertionSort with BarView</button><button onclick="init8()">InsertionSort with ScatterView</button>
|
||||
<button onclick="init9()">InsertionSort with BoxView</button><br/>
|
||||
<button onclick="init10()">ShellSort with BarView</button><button onclick="init11()">ShellSort with ScatterView</button>
|
||||
<button onclick="init12()">ShellSort with BoxView</button><br/>
|
||||
<button onclick="init13()">MergeSort with BarView</button><button onclick="init14()">MergeSort with ScatterView</button>
|
||||
<button onclick="init15()">MergeSort with BoxView</button><br/>
|
||||
<button onclick="init16()">QuickSort with BarView</button><button onclick="init17()">QuickSort with ScatterView</button>
|
||||
<button onclick="init18()">QuickSort with BoxView</button><br/>
|
||||
<button onclick="a.run()">Run</button>
|
||||
<button onclick="a.stop()">Stop</button> </br>
|
||||
<button onclick="a.begin()">Beginning</button>
|
||||
<button onclick="a.forward()">Step Forward</button>
|
||||
<button onclick="a.backward()">Step Backward</button>
|
||||
<button onclick="a.end()">End</button>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
book/modules/luther/sphinx/animation/sortingdemo.html
Normal file
22
book/modules/luther/sphinx/animation/sortingdemo.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<script type "text/javascript" src="sortingdemo.js"></script>
|
||||
|
||||
<html>
|
||||
<body onload="">
|
||||
|
||||
<canvas id="sortingcanvas" width="400" height="400" style="border:4px solid blue">
|
||||
</canvas>
|
||||
<br />
|
||||
<button onclick="init()">Initialize</button><br/>
|
||||
<button onclick="run()">Run</button>
|
||||
<button onclick="stop()">Stop</button> </br>
|
||||
<button onclick="begin()">Beginning</button>
|
||||
<button onclick="forward()">Step Forward</button>
|
||||
<button onclick="backward()">Step Backward</button>
|
||||
<button onclick="end()">End</button>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
268
book/modules/luther/sphinx/animation/sortingdemo.js
Normal file
268
book/modules/luther/sphinx/animation/sortingdemo.js
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
BarList = function(hm)
|
||||
{
|
||||
this.howmany = hm
|
||||
this.bars = new Array()
|
||||
|
||||
for (var i=0; i<this.howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
abar = new Bar(i,y,"black")
|
||||
this.bars.push(abar)
|
||||
}
|
||||
}
|
||||
|
||||
BarList.prototype.size = function()
|
||||
{
|
||||
return this.howmany
|
||||
}
|
||||
|
||||
BarList.prototype.show = function(c)
|
||||
{
|
||||
for (var idx=0; idx<this.howmany; idx++)
|
||||
{
|
||||
this.bars[idx].show(this.c)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Bar = function(pos, h, col)
|
||||
{
|
||||
this.height = h
|
||||
this.position = pos
|
||||
this.color = col
|
||||
|
||||
}
|
||||
|
||||
Bar.prototype.clone=function()
|
||||
{
|
||||
var newbar = new Bar() //make a copy
|
||||
newbar.setHeight(this.getHeight())
|
||||
newbar.setPosition(this.getPosition())
|
||||
newbar.setColor(this.getColor())
|
||||
return newbar
|
||||
}
|
||||
|
||||
Bar.prototype.getHeight=function()
|
||||
{
|
||||
return this.height
|
||||
}
|
||||
|
||||
Bar.prototype.setHeight=function(newh)
|
||||
{
|
||||
this.height = newh
|
||||
}
|
||||
|
||||
Bar.prototype.getColor=function()
|
||||
{
|
||||
return this.color
|
||||
}
|
||||
|
||||
Bar.prototype.getPosition=function()
|
||||
{
|
||||
return this.position
|
||||
}
|
||||
|
||||
Bar.prototype.setPosition=function(newp)
|
||||
{
|
||||
this.position = newp
|
||||
}
|
||||
|
||||
Bar.prototype.show = function(c,p)
|
||||
{
|
||||
c.fillStyle=this.color
|
||||
c.fillRect(p*7 + 2, c.canvas.height-this.height, 3, this.height)
|
||||
}
|
||||
|
||||
Bar.prototype.unshow = function(c,p)
|
||||
{
|
||||
c.clearRect(p*7 + 2, c.canvas.height-this.height, 3, this.height)
|
||||
}
|
||||
|
||||
Bar.prototype.setColor=function(newc)
|
||||
{
|
||||
this.color = newc
|
||||
}
|
||||
|
||||
|
||||
|
||||
SortingAnimation = function() //Insertion Sort Demo
|
||||
{
|
||||
this.timer = null
|
||||
this.framelist = new Array()
|
||||
this.cursor = -1
|
||||
|
||||
this.sc = document.getElementById("sortingcanvas")
|
||||
this.ctx = this.sc.getContext("2d")
|
||||
this.sc.width = this.sc.width
|
||||
this.speed = 75
|
||||
|
||||
|
||||
|
||||
//commented out code does insertion sort, code below does bubble sort
|
||||
/* for (var index=1; index < this.barlist.bars.length; index = index+1)
|
||||
{
|
||||
this.barlist.bars[index].setColor("blue")
|
||||
this.snapshot()
|
||||
this.barlist.bars[index].setColor("black")
|
||||
this.snapshot()
|
||||
var currentvalue = this.barlist.bars[index].clone()
|
||||
var position = index
|
||||
while (position>0 && (this.barlist.bars[position-1].getHeight() > currentvalue.getHeight()))
|
||||
{
|
||||
this.barlist.bars[position-1].setColor("red")
|
||||
this.snapshot()
|
||||
this.barlist.bars[position-1].setColor("black")
|
||||
|
||||
this.barlist.bars[position] = this.barlist.bars[position-1].clone()
|
||||
//this.barlist.bars[position-1] = currentvalue
|
||||
this.barlist.bars[position-1].setHeight(0)
|
||||
|
||||
|
||||
this.snapshot()
|
||||
|
||||
position = position-1
|
||||
|
||||
}
|
||||
|
||||
this.barlist.bars[position] = currentvalue
|
||||
this.barlist.bars[position].setColor("blue")
|
||||
this.snapshot()
|
||||
this.barlist.bars[position].setColor("black")
|
||||
}
|
||||
this.snapshot()*/
|
||||
|
||||
this.barlist = new BarList(50)
|
||||
this.snapshot()
|
||||
for (var passnum=this.barlist.bars.length-1; passnum>0; passnum = passnum-1)
|
||||
{
|
||||
for (var i=0; i<passnum; i=i+1)
|
||||
{
|
||||
this.barlist.bars[i].setColor("red")
|
||||
this.barlist.bars[i+1].setColor("red")
|
||||
|
||||
this.snapshot()
|
||||
|
||||
if (this.barlist.bars[i].getHeight() > this.barlist.bars[i+1].getHeight())
|
||||
{
|
||||
|
||||
var temp = this.barlist.bars[i]
|
||||
this.barlist.bars[i] = this.barlist.bars[i+1]
|
||||
this.barlist.bars[i+1] = temp
|
||||
|
||||
this.snapshot()
|
||||
|
||||
}
|
||||
|
||||
this.barlist.bars[i].setColor("black")
|
||||
this.barlist.bars[i+1].setColor("black")
|
||||
|
||||
this.snapshot()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SortingAnimation.prototype.incCursor=function()
|
||||
{
|
||||
if (this.cursor < this.framelist.length-1)
|
||||
this.cursor = this.cursor + 1
|
||||
}
|
||||
|
||||
SortingAnimation.prototype.decCursor=function()
|
||||
{
|
||||
if (this.cursor > 0)
|
||||
this.cursor = this.cursor -1
|
||||
}
|
||||
|
||||
SortingAnimation.prototype.getCursor=function()
|
||||
{
|
||||
return this.cursor
|
||||
}
|
||||
|
||||
SortingAnimation.prototype.setCursor=function(newc)
|
||||
{
|
||||
this.cursor = newc
|
||||
}
|
||||
|
||||
|
||||
SortingAnimation.prototype.render = function(framenum)
|
||||
{
|
||||
var currentframe = this.framelist[framenum]
|
||||
this.sc.width = this.sc.width
|
||||
|
||||
for (var idx=0; idx<currentframe.length; idx++)
|
||||
{
|
||||
currentframe[idx].show(this.ctx,idx)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SortingAnimation.prototype.snapshot = function()
|
||||
{
|
||||
var newframe = new Array()
|
||||
for (var idx=0; idx<this.barlist.bars.length; idx++)
|
||||
{
|
||||
var newbar = new Bar() //make a copy
|
||||
newbar.setHeight(this.barlist.bars[idx].getHeight())
|
||||
newbar.setPosition(this.barlist.bars[idx].getPosition())
|
||||
newbar.setColor(this.barlist.bars[idx].getColor())
|
||||
|
||||
newframe.push(newbar)
|
||||
}
|
||||
|
||||
this.framelist.push(newframe)
|
||||
}
|
||||
|
||||
|
||||
|
||||
run = function()
|
||||
{
|
||||
if (sa.timer == null)
|
||||
sa.timer = setInterval("forward()",sa.speed)
|
||||
}
|
||||
|
||||
stop = function()
|
||||
{
|
||||
clearInterval(sa.timer)
|
||||
sa.timer=null
|
||||
}
|
||||
|
||||
forward = function()
|
||||
{
|
||||
sa.incCursor()
|
||||
sa.render(sa.getCursor())
|
||||
if (sa.getCursor() == sa.framelist.length-1 && sa.timer != null)
|
||||
{
|
||||
clearInterval(sa.timer)
|
||||
sa.timer = null
|
||||
}
|
||||
}
|
||||
|
||||
backward = function()
|
||||
{
|
||||
sa.decCursor()
|
||||
sa.render(sa.getCursor())
|
||||
}
|
||||
|
||||
end = function()
|
||||
{
|
||||
sa.setCursor(sa.framelist.length-1)
|
||||
sa.render(sa.getCursor())
|
||||
|
||||
}
|
||||
|
||||
begin = function()
|
||||
{
|
||||
sa.setCursor(0)
|
||||
sa.render(sa.getCursor())
|
||||
}
|
||||
|
||||
init = function()
|
||||
{
|
||||
sa = new SortingAnimation()
|
||||
sa.snapshot()
|
||||
sa.render(0)
|
||||
}
|
||||
32
book/modules/luther/sphinx/animation/sortingpackage.html
Normal file
32
book/modules/luther/sphinx/animation/sortingpackage.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<script type "text/javascript" src="sortingpackage.js"></script>
|
||||
|
||||
<html>
|
||||
<body onload="">
|
||||
|
||||
<canvas id="ancan" width="400" height="400" style="border:4px solid blue"></canvas>
|
||||
<br />
|
||||
<button onclick="init1()">BubbleSort with BarView</button><button onclick="init2()">BubbleSort with ScatterView</button>
|
||||
<button onclick="init3()">BubbleSort with BoxView</button><br/>
|
||||
<button onclick="init4()">SelectionSort with BarView</button><button onclick="init5()">SelectionSort with ScatterView</button>
|
||||
<button onclick="init6()">SelectionSort with BoxView</button><br/>
|
||||
<button onclick="init7()">InsertionSort with BarView</button><button onclick="init8()">InsertionSort with ScatterView</button>
|
||||
<button onclick="init9()">InsertionSort with BoxView</button><br/>
|
||||
<button onclick="init10()">ShellSort with BarView</button><button onclick="init11()">ShellSort with ScatterView</button>
|
||||
<button onclick="init12()">ShellSort with BoxView</button><br/>
|
||||
<button onclick="init13()">MergeSort with BarView</button><button onclick="init14()">MergeSort with ScatterView</button>
|
||||
<button onclick="init15()">MergeSort with BoxView</button><br/>
|
||||
<button onclick="init16()">QuickSort with BarView</button><button onclick="init17()">QuickSort with ScatterView</button>
|
||||
<button onclick="init18()">QuickSort with BoxView</button><br/>
|
||||
<button onclick="a.run()">Run</button>
|
||||
<button onclick="a.stop()">Stop</button> </br>
|
||||
<button onclick="a.begin()">Beginning</button>
|
||||
<button onclick="a.forward()">Step Forward</button>
|
||||
<button onclick="a.backward()">Step Backward</button>
|
||||
<button onclick="a.end()">End</button>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
870
book/modules/luther/sphinx/animation/sortingpackage.js
Normal file
870
book/modules/luther/sphinx/animation/sortingpackage.js
Normal file
|
|
@ -0,0 +1,870 @@
|
|||
DataItem = function(pos, h, col)
|
||||
{
|
||||
this.height = h
|
||||
this.position = pos
|
||||
this.color = col
|
||||
}
|
||||
|
||||
DataItem.prototype.clone=function()
|
||||
{
|
||||
var newitem = new DataItem(this.position,this.height,this.color) //make a copy
|
||||
return newitem
|
||||
}
|
||||
|
||||
DataItem.prototype.getHeight=function()
|
||||
{
|
||||
return this.height
|
||||
}
|
||||
|
||||
DataItem.prototype.getColor=function()
|
||||
{
|
||||
return this.color
|
||||
}
|
||||
|
||||
DataItem.prototype.getPosition=function()
|
||||
{
|
||||
return this.position
|
||||
}
|
||||
|
||||
DataItem.prototype.setHeight=function(newh)
|
||||
{
|
||||
this.height = newh
|
||||
}
|
||||
|
||||
DataItem.prototype.setPosition=function(newp)
|
||||
{
|
||||
this.position = newp
|
||||
}
|
||||
|
||||
DataItem.prototype.setColor=function(newc)
|
||||
{
|
||||
this.color = newc
|
||||
}
|
||||
|
||||
BubbleSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
BubbleSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var passnum=this.valuelist.length-1; passnum>0; passnum = passnum-1)
|
||||
{
|
||||
for (var i=0; i<passnum; i=i+1)
|
||||
{
|
||||
this.valuelist[i].setColor("red")
|
||||
this.valuelist[i+1].setColor("red")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
if (this.valuelist[i].getHeight() > this.valuelist[i+1].getHeight())
|
||||
{
|
||||
|
||||
var temp = this.valuelist[i]
|
||||
this.valuelist[i] = this.valuelist[i+1]
|
||||
this.valuelist[i+1] = temp
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
}
|
||||
|
||||
this.valuelist[i].setColor("black")
|
||||
this.valuelist[i+1].setColor("black")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
}
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
BubbleSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
InsertionSortModel = function()
|
||||
{
|
||||
}
|
||||
|
||||
InsertionSortModel.prototype.init=function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var index=1; index < this.valuelist.length; index = index+1)
|
||||
{
|
||||
this.valuelist[index].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[index].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
var currentvalue = this.valuelist[index].clone()
|
||||
var position = index
|
||||
while (position>0 && (this.valuelist[position-1].getHeight() > currentvalue.getHeight()))
|
||||
{
|
||||
this.valuelist[position-1].setColor("red")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[position-1].setColor("black")
|
||||
|
||||
this.valuelist[position] = this.valuelist[position-1].clone()
|
||||
//this.barlist.bars[position-1] = currentvalue
|
||||
this.valuelist[position-1].setHeight(0)
|
||||
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
position = position-1
|
||||
|
||||
}
|
||||
|
||||
this.valuelist[position] = currentvalue
|
||||
this.valuelist[position].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[position].setColor("black")
|
||||
}
|
||||
|
||||
this.script.push(this.makescene())
|
||||
return this.script
|
||||
}
|
||||
|
||||
|
||||
InsertionSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
return newscene
|
||||
}
|
||||
|
||||
SelectionSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
SelectionSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
|
||||
for (var fillslot=this.valuelist.length-1; fillslot>0; fillslot = fillslot-1)
|
||||
{ var positionOfMax=0
|
||||
this.valuelist[positionOfMax].setColor("yellow")
|
||||
this.valuelist[fillslot].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var i=1; i<fillslot+1; i=i+1)
|
||||
{
|
||||
this.valuelist[i].setColor("red")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
if (this.valuelist[i].getHeight() > this.valuelist[positionOfMax].getHeight())
|
||||
{
|
||||
this.valuelist[positionOfMax].setColor("black")
|
||||
positionOfMax = i
|
||||
this.valuelist[i].setColor("yellow")
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
else
|
||||
{
|
||||
this.valuelist[i].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var temp = this.valuelist[fillslot]
|
||||
this.valuelist[fillslot] = this.valuelist[positionOfMax]
|
||||
this.valuelist[positionOfMax] = temp
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
this.valuelist[fillslot].setColor("black")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
SelectionSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
ShellSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
ShellSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
var sublistcount = Math.floor(this.valuelist.length/2)
|
||||
while (sublistcount > 0)
|
||||
{
|
||||
for (var startposition = 0; startposition < sublistcount;
|
||||
startposition = startposition+1)
|
||||
{
|
||||
var gap = sublistcount
|
||||
var start = startposition
|
||||
this.valuelist[start].setColor("red")
|
||||
for (var i=start+gap; i<this.valuelist.length; i = i + gap)
|
||||
{
|
||||
currentvalue = this.valuelist[i].clone()
|
||||
currentvalue.setColor("red")
|
||||
this.script.push(this.makescene())
|
||||
position = i
|
||||
while (position>=gap && this.valuelist[position-gap].getHeight()>currentvalue.getHeight())
|
||||
{
|
||||
this.valuelist[position] = this.valuelist[position-gap].clone()
|
||||
this.valuelist[position-gap].setHeight(0)
|
||||
position = position-gap
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
this.valuelist[position]=currentvalue
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
for (var clearidx=0; clearidx<this.valuelist.length; clearidx++)
|
||||
this.valuelist[clearidx].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
|
||||
}
|
||||
this.script.push(this.makescene())
|
||||
sublistcount = Math.floor(sublistcount/2)
|
||||
}
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
ShellSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
MergeSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.domergesort(0,this.valuelist.length-1)
|
||||
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
return this.script
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.chunkcolor=function(start,end,c)
|
||||
{
|
||||
for (var clearidx=start; clearidx<=end; clearidx++)
|
||||
this.valuelist[clearidx].setColor(c)
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.domergesort = function(start,end)
|
||||
{ len = end-start + 1
|
||||
if (len>1)
|
||||
{
|
||||
var mid = start + Math.floor(len/2)
|
||||
|
||||
this.chunkcolor(start,mid-1,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(start,mid-1,"black")
|
||||
this.domergesort(start,mid-1)
|
||||
|
||||
this.chunkcolor(mid,end,"blue")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(mid,end,"black")
|
||||
this.domergesort(mid,end)
|
||||
|
||||
var i=start
|
||||
var j=mid
|
||||
|
||||
var newlist = Array()
|
||||
while (i<mid && j<=end)
|
||||
{
|
||||
if (this.valuelist[i].getHeight()<this.valuelist[j].getHeight())
|
||||
{
|
||||
newlist.push(this.valuelist[i])
|
||||
i=i+1
|
||||
}
|
||||
else
|
||||
{
|
||||
newlist.push(this.valuelist[j])
|
||||
j=j+1
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
while (i<mid)
|
||||
{
|
||||
newlist.push(this.valuelist[i])
|
||||
i=i+1
|
||||
}
|
||||
|
||||
while (j<=end)
|
||||
{
|
||||
newlist.push(this.valuelist[j])
|
||||
j=j+1
|
||||
}
|
||||
this.copyback(newlist,start)
|
||||
this.chunkcolor(start,end,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(start,end,"black")
|
||||
}
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.copyback = function(original,i,j) //make copy from i to j excl
|
||||
{
|
||||
var newcopy = new Array()
|
||||
for (var idx=0; idx<original.length; idx++)
|
||||
{
|
||||
var item = original[idx].clone() //make a copy
|
||||
this.valuelist[i] = item
|
||||
i=i+1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
MergeSortModel.prototype.makecopy = function(original,i) //make copy to i
|
||||
{
|
||||
|
||||
for (var idx=0; idx<original.length; idx++)
|
||||
{
|
||||
var item = original[idx].clone() //make a copy
|
||||
this.valuelist[i] = item
|
||||
i++
|
||||
}
|
||||
|
||||
return newcopy
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.makescene = function(somearray)
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<somearray.length; idx++)
|
||||
{
|
||||
var item = somearray[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.quickSort(this.valuelist)
|
||||
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
return this.script
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.quickSort=function(alist)
|
||||
{
|
||||
this.quickSortHelper(alist,0,alist.length-1)
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.quickSortHelper=function(alist,first,last)
|
||||
{
|
||||
if (first<last)
|
||||
{
|
||||
var splitpoint = this.partition(alist,first,last)
|
||||
|
||||
this.chunkcolor(first,splitpoint-1,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(first,splitpoint-1,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.chunkcolor(splitpoint+1,last,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(splitpoint+1,last,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.quickSortHelper(alist,first,splitpoint-1)
|
||||
this.quickSortHelper(alist,splitpoint+1,last)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel.prototype.partition = function(alist,first,last)
|
||||
{
|
||||
var pivotvalue = alist[first].getHeight()
|
||||
alist[first].setColor("red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
var leftmark = first+1
|
||||
var rightmark = last
|
||||
alist[leftmark].setColor("blue")
|
||||
alist[rightmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
var done = false
|
||||
while (! done)
|
||||
{
|
||||
|
||||
while (leftmark <= rightmark && alist[leftmark].getHeight() <= pivotvalue)
|
||||
{
|
||||
alist[leftmark].setColor("black")
|
||||
leftmark = leftmark + 1
|
||||
if (leftmark <= rightmark)
|
||||
{
|
||||
alist[leftmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))}
|
||||
}
|
||||
while (alist[rightmark].getHeight() >= pivotvalue && rightmark >= leftmark)
|
||||
{
|
||||
alist[rightmark].setColor("black")
|
||||
rightmark = rightmark - 1
|
||||
if (rightmark >= leftmark)
|
||||
{
|
||||
alist[rightmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))}
|
||||
}
|
||||
|
||||
if (rightmark < leftmark)
|
||||
done = true
|
||||
else
|
||||
{
|
||||
temp = alist[leftmark]
|
||||
alist[leftmark] = alist[rightmark]
|
||||
alist[rightmark] = temp
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
alist[leftmark].setColor("black")
|
||||
alist[rightmark].setColor("black")
|
||||
}
|
||||
}
|
||||
|
||||
var temp = alist[first]
|
||||
alist[first] = alist[rightmark]
|
||||
alist[rightmark] = temp
|
||||
|
||||
alist[first].setColor("black")
|
||||
alist[rightmark].setColor("red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(0,this.valuelist.length-1,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
return rightmark
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.chunkcolor=function(start,end,c)
|
||||
{
|
||||
for (var clearidx=start; clearidx<=end; clearidx++)
|
||||
this.valuelist[clearidx].setColor(c)
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel.prototype.makescene = function(somearray)
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<somearray.length; idx++)
|
||||
{
|
||||
var item = somearray[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
BarViewer = function() //construct the view
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
BarViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
BarViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillRect(p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].height,
|
||||
3,
|
||||
ascene[p].height)
|
||||
}
|
||||
}
|
||||
|
||||
ScatterViewer = function() //contruct a list of numbers view
|
||||
{
|
||||
}
|
||||
|
||||
ScatterViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
ScatterViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillText(ascene[p].height, p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].height)
|
||||
}
|
||||
}
|
||||
|
||||
BoxViewer = function() //contruct an array of boxes view
|
||||
{
|
||||
}
|
||||
|
||||
BoxViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
BoxViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillText(ascene[p].height, p*25 + 3, 200)
|
||||
this.ctx.strokeStyle = ascene[p].color
|
||||
this.ctx.strokeRect(p*25+2,185,25,25)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Animator = function(m, v)
|
||||
{
|
||||
this.model = m
|
||||
this.viewer = v
|
||||
this.timer = null
|
||||
|
||||
this.cursor = -1
|
||||
|
||||
this.sc = document.getElementById("ancan")
|
||||
this.ctx = this.sc.getContext("2d")
|
||||
this.sc.width = this.sc.width
|
||||
this.speed = 75
|
||||
|
||||
this.script = this.model.init() //does the sort and sends script back
|
||||
this.viewer.init(this.ctx)
|
||||
}
|
||||
|
||||
Animator.prototype.getContext=function()
|
||||
{
|
||||
return this.ctx
|
||||
}
|
||||
|
||||
Animator.prototype.incCursor=function()
|
||||
{
|
||||
if (this.cursor < this.script.length-1)
|
||||
this.cursor = this.cursor + 1
|
||||
}
|
||||
|
||||
Animator.prototype.decCursor=function()
|
||||
{
|
||||
if (this.cursor > 0)
|
||||
this.cursor = this.cursor -1
|
||||
}
|
||||
|
||||
Animator.prototype.getCursor=function()
|
||||
{
|
||||
return this.cursor
|
||||
}
|
||||
|
||||
Animator.prototype.setCursor=function(newc)
|
||||
{
|
||||
this.cursor = newc
|
||||
}
|
||||
|
||||
Animator.prototype.run = function()
|
||||
{
|
||||
if (this.timer == null)
|
||||
this.timer = setInterval("a.forward()",this.speed)
|
||||
}
|
||||
|
||||
Animator.prototype.stop = function()
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer=null
|
||||
}
|
||||
|
||||
Animator.prototype.forward = function()
|
||||
{
|
||||
this.incCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
if (this.getCursor() == this.script.length-1 && this.timer != null)
|
||||
{
|
||||
clearInterval(this.timer)
|
||||
this.timer = null
|
||||
}
|
||||
}
|
||||
|
||||
Animator.prototype.backward = function()
|
||||
{
|
||||
this.decCursor()
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.end = function()
|
||||
{
|
||||
this.setCursor(this.script.length-1)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
|
||||
}
|
||||
|
||||
Animator.prototype.begin = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width=this.sc.width
|
||||
this.viewer.render(this.script[this.getCursor()])
|
||||
}
|
||||
|
||||
Animator.prototype.init = function()
|
||||
{
|
||||
this.setCursor(0)
|
||||
this.sc.width = this.sc.width
|
||||
this.viewer.render(this.script[0])
|
||||
}
|
||||
|
||||
init1 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init2 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init3 = function()
|
||||
{
|
||||
a = new Animator(new BubbleSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init4 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init5 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init6 = function()
|
||||
{
|
||||
a = new Animator(new SelectionSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init7 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init8 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init9 = function()
|
||||
{
|
||||
a = new Animator(new InsertionSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init10 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init11 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init12 = function()
|
||||
{
|
||||
a = new Animator(new ShellSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init13 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init14 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init15 = function()
|
||||
{
|
||||
a = new Animator(new MergeSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init16 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new BarViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init17 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new ScatterViewer())
|
||||
a.init()
|
||||
}
|
||||
|
||||
init18 = function()
|
||||
{
|
||||
a = new Animator(new QuickSortModel(), new BoxViewer())
|
||||
a.init()
|
||||
}
|
||||
601
book/modules/luther/sphinx/animation/sortmodels.js
Normal file
601
book/modules/luther/sphinx/animation/sortmodels.js
Normal file
|
|
@ -0,0 +1,601 @@
|
|||
DataItem = function(pos, h, col)
|
||||
{
|
||||
this.value = h
|
||||
this.position = pos
|
||||
this.color = col
|
||||
}
|
||||
|
||||
DataItem.prototype.clone=function()
|
||||
{
|
||||
var newitem = new DataItem(this.position,this.value,this.color) //make a copy
|
||||
return newitem
|
||||
}
|
||||
|
||||
DataItem.prototype.getValue=function()
|
||||
{
|
||||
return this.value
|
||||
}
|
||||
|
||||
DataItem.prototype.getColor=function()
|
||||
{
|
||||
return this.color
|
||||
}
|
||||
|
||||
DataItem.prototype.getPosition=function()
|
||||
{
|
||||
return this.position
|
||||
}
|
||||
|
||||
DataItem.prototype.setValue=function(newh)
|
||||
{
|
||||
this.value = newh
|
||||
}
|
||||
|
||||
DataItem.prototype.setPosition=function(newp)
|
||||
{
|
||||
this.position = newp
|
||||
}
|
||||
|
||||
DataItem.prototype.setColor=function(newc)
|
||||
{
|
||||
this.color = newc
|
||||
}
|
||||
|
||||
BubbleSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
BubbleSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var passnum=this.valuelist.length-1; passnum>0; passnum = passnum-1)
|
||||
{
|
||||
for (var i=0; i<passnum; i=i+1)
|
||||
{
|
||||
this.valuelist[i].setColor("red")
|
||||
this.valuelist[i+1].setColor("red")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
if (this.valuelist[i].getValue() > this.valuelist[i+1].getValue())
|
||||
{
|
||||
|
||||
var temp = this.valuelist[i]
|
||||
this.valuelist[i] = this.valuelist[i+1]
|
||||
this.valuelist[i+1] = temp
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
}
|
||||
|
||||
this.valuelist[i].setColor("black")
|
||||
this.valuelist[i+1].setColor("black")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
}
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
BubbleSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
InsertionSortModel = function()
|
||||
{
|
||||
}
|
||||
|
||||
InsertionSortModel.prototype.init=function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var index=1; index < this.valuelist.length; index = index+1)
|
||||
{
|
||||
this.valuelist[index].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[index].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
var currentvalue = this.valuelist[index].clone()
|
||||
var position = index
|
||||
while (position>0 && (this.valuelist[position-1].getValue() > currentvalue.getValue()))
|
||||
{
|
||||
this.valuelist[position-1].setColor("red")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[position-1].setColor("black")
|
||||
|
||||
this.valuelist[position] = this.valuelist[position-1].clone()
|
||||
//this.barlist.bars[position-1] = currentvalue
|
||||
this.valuelist[position-1].setValue(0)
|
||||
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
position = position-1
|
||||
|
||||
}
|
||||
|
||||
this.valuelist[position] = currentvalue
|
||||
this.valuelist[position].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
this.valuelist[position].setColor("black")
|
||||
}
|
||||
|
||||
this.script.push(this.makescene())
|
||||
return this.script
|
||||
}
|
||||
|
||||
|
||||
InsertionSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
return newscene
|
||||
}
|
||||
|
||||
SelectionSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
SelectionSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
|
||||
for (var fillslot=this.valuelist.length-1; fillslot>0; fillslot = fillslot-1)
|
||||
{ var positionOfMax=0
|
||||
this.valuelist[positionOfMax].setColor("yellow")
|
||||
this.valuelist[fillslot].setColor("blue")
|
||||
this.script.push(this.makescene())
|
||||
|
||||
for (var i=1; i<fillslot+1; i=i+1)
|
||||
{
|
||||
this.valuelist[i].setColor("red")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
if (this.valuelist[i].getValue() > this.valuelist[positionOfMax].getValue())
|
||||
{
|
||||
this.valuelist[positionOfMax].setColor("black")
|
||||
positionOfMax = i
|
||||
this.valuelist[i].setColor("yellow")
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
else
|
||||
{
|
||||
this.valuelist[i].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var temp = this.valuelist[fillslot]
|
||||
this.valuelist[fillslot] = this.valuelist[positionOfMax]
|
||||
this.valuelist[positionOfMax] = temp
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
this.valuelist[fillslot].setColor("black")
|
||||
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
SelectionSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
ShellSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
ShellSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene())
|
||||
|
||||
var sublistcount = Math.floor(this.valuelist.length/2)
|
||||
while (sublistcount > 0)
|
||||
{
|
||||
for (var startposition = 0; startposition < sublistcount;
|
||||
startposition = startposition+1)
|
||||
{
|
||||
var gap = sublistcount
|
||||
var start = startposition
|
||||
this.valuelist[start].setColor("red")
|
||||
for (var i=start+gap; i<this.valuelist.length; i = i + gap)
|
||||
{
|
||||
currentvalue = this.valuelist[i].clone()
|
||||
currentvalue.setColor("red")
|
||||
this.script.push(this.makescene())
|
||||
position = i
|
||||
while (position>=gap && this.valuelist[position-gap].getValue()>currentvalue.getValue())
|
||||
{
|
||||
this.valuelist[position] = this.valuelist[position-gap].clone()
|
||||
this.valuelist[position-gap].setValue(0)
|
||||
position = position-gap
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
this.valuelist[position]=currentvalue
|
||||
this.script.push(this.makescene())
|
||||
}
|
||||
for (var clearidx=0; clearidx<this.valuelist.length; clearidx++)
|
||||
this.valuelist[clearidx].setColor("black")
|
||||
this.script.push(this.makescene())
|
||||
|
||||
}
|
||||
this.script.push(this.makescene())
|
||||
sublistcount = Math.floor(sublistcount/2)
|
||||
}
|
||||
|
||||
this.script.push(this.makescene())
|
||||
|
||||
return this.script
|
||||
}
|
||||
|
||||
ShellSortModel.prototype.makescene = function()
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<this.valuelist.length; idx++)
|
||||
{
|
||||
var item = this.valuelist[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
MergeSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.domergesort(0,this.valuelist.length-1)
|
||||
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
return this.script
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.chunkcolor=function(start,end,c)
|
||||
{
|
||||
for (var clearidx=start; clearidx<=end; clearidx++)
|
||||
this.valuelist[clearidx].setColor(c)
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.domergesort = function(start,end)
|
||||
{ len = end-start + 1
|
||||
if (len>1)
|
||||
{
|
||||
var mid = start + Math.floor(len/2)
|
||||
|
||||
this.chunkcolor(start,mid-1,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(start,mid-1,"black")
|
||||
this.domergesort(start,mid-1)
|
||||
|
||||
this.chunkcolor(mid,end,"blue")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(mid,end,"black")
|
||||
this.domergesort(mid,end)
|
||||
|
||||
var i=start
|
||||
var j=mid
|
||||
|
||||
var newlist = Array()
|
||||
while (i<mid && j<=end)
|
||||
{
|
||||
if (this.valuelist[i].getValue()<this.valuelist[j].getValue())
|
||||
{
|
||||
newlist.push(this.valuelist[i])
|
||||
i=i+1
|
||||
}
|
||||
else
|
||||
{
|
||||
newlist.push(this.valuelist[j])
|
||||
j=j+1
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
while (i<mid)
|
||||
{
|
||||
newlist.push(this.valuelist[i])
|
||||
i=i+1
|
||||
}
|
||||
|
||||
while (j<=end)
|
||||
{
|
||||
newlist.push(this.valuelist[j])
|
||||
j=j+1
|
||||
}
|
||||
this.copyback(newlist,start)
|
||||
this.chunkcolor(start,end,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(start,end,"black")
|
||||
}
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.copyback = function(original,i,j) //make copy from i to j excl
|
||||
{
|
||||
var newcopy = new Array()
|
||||
for (var idx=0; idx<original.length; idx++)
|
||||
{
|
||||
var item = original[idx].clone() //make a copy
|
||||
this.valuelist[i] = item
|
||||
i=i+1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
MergeSortModel.prototype.makecopy = function(original,i) //make copy to i
|
||||
{
|
||||
|
||||
for (var idx=0; idx<original.length; idx++)
|
||||
{
|
||||
var item = original[idx].clone() //make a copy
|
||||
this.valuelist[i] = item
|
||||
i++
|
||||
}
|
||||
|
||||
return newcopy
|
||||
}
|
||||
|
||||
MergeSortModel.prototype.makescene = function(somearray)
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<somearray.length; idx++)
|
||||
{
|
||||
var item = somearray[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel = function() //construct the model
|
||||
{
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.init = function(ctl)
|
||||
{
|
||||
this.mycontroller = ctl
|
||||
|
||||
this.valuelist = new Array()
|
||||
var howmany = 15
|
||||
|
||||
for (var i=0; i<howmany; i++)
|
||||
{
|
||||
var min = 5
|
||||
var max = 300
|
||||
var y = Math.floor(Math.random() * (max - min + 1)) + min
|
||||
|
||||
var item = new DataItem(i,y,"black")
|
||||
this.valuelist.push(item)
|
||||
}
|
||||
|
||||
this.script = new Array()
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.quickSort(this.valuelist)
|
||||
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
return this.script
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.quickSort=function(alist)
|
||||
{
|
||||
this.quickSortHelper(alist,0,alist.length-1)
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.quickSortHelper=function(alist,first,last)
|
||||
{
|
||||
if (first<last)
|
||||
{
|
||||
var splitpoint = this.partition(alist,first,last)
|
||||
|
||||
this.chunkcolor(first,splitpoint-1,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(first,splitpoint-1,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
this.chunkcolor(splitpoint+1,last,"red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(splitpoint+1,last,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.quickSortHelper(alist,first,splitpoint-1)
|
||||
this.quickSortHelper(alist,splitpoint+1,last)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel.prototype.partition = function(alist,first,last)
|
||||
{
|
||||
var pivotvalue = alist[first].getValue()
|
||||
alist[first].setColor("red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
var leftmark = first+1
|
||||
var rightmark = last
|
||||
alist[leftmark].setColor("blue")
|
||||
alist[rightmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
var done = false
|
||||
while (! done)
|
||||
{
|
||||
|
||||
while (leftmark <= rightmark && alist[leftmark].getValue() <= pivotvalue)
|
||||
{
|
||||
alist[leftmark].setColor("black")
|
||||
leftmark = leftmark + 1
|
||||
if (leftmark <= rightmark)
|
||||
{
|
||||
alist[leftmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))}
|
||||
}
|
||||
while (alist[rightmark].getValue() >= pivotvalue && rightmark >= leftmark)
|
||||
{
|
||||
alist[rightmark].setColor("black")
|
||||
rightmark = rightmark - 1
|
||||
if (rightmark >= leftmark)
|
||||
{
|
||||
alist[rightmark].setColor("blue")
|
||||
this.script.push(this.makescene(this.valuelist))}
|
||||
}
|
||||
|
||||
if (rightmark < leftmark)
|
||||
done = true
|
||||
else
|
||||
{
|
||||
temp = alist[leftmark]
|
||||
alist[leftmark] = alist[rightmark]
|
||||
alist[rightmark] = temp
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
alist[leftmark].setColor("black")
|
||||
alist[rightmark].setColor("black")
|
||||
}
|
||||
}
|
||||
|
||||
var temp = alist[first]
|
||||
alist[first] = alist[rightmark]
|
||||
alist[rightmark] = temp
|
||||
|
||||
alist[first].setColor("black")
|
||||
alist[rightmark].setColor("red")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
this.chunkcolor(0,this.valuelist.length-1,"black")
|
||||
this.script.push(this.makescene(this.valuelist))
|
||||
|
||||
|
||||
return rightmark
|
||||
}
|
||||
|
||||
QuickSortModel.prototype.chunkcolor=function(start,end,c)
|
||||
{
|
||||
for (var clearidx=start; clearidx<=end; clearidx++)
|
||||
this.valuelist[clearidx].setColor(c)
|
||||
}
|
||||
|
||||
|
||||
QuickSortModel.prototype.makescene = function(somearray)
|
||||
{
|
||||
var newscene = new Array()
|
||||
for (var idx=0; idx<somearray.length; idx++)
|
||||
{
|
||||
var item = somearray[idx].clone() //make a copy
|
||||
newscene.push(item)
|
||||
}
|
||||
|
||||
return newscene
|
||||
}
|
||||
|
||||
61
book/modules/luther/sphinx/animation/sortviewers.js
Normal file
61
book/modules/luther/sphinx/animation/sortviewers.js
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
|
||||
BarViewer = function() //construct the view
|
||||
{
|
||||
}
|
||||
|
||||
BarViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
BarViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillRect(p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].getValue(),
|
||||
3,
|
||||
ascene[p].getValue())
|
||||
}
|
||||
}
|
||||
|
||||
ScatterViewer = function() //contruct a list of numbers view
|
||||
{
|
||||
}
|
||||
|
||||
ScatterViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
ScatterViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillText(ascene[p].getValue(), p*7 + 2,
|
||||
this.ctx.canvas.height-ascene[p].getValue())
|
||||
}
|
||||
}
|
||||
|
||||
BoxViewer = function() //contruct an array of boxes view
|
||||
{
|
||||
}
|
||||
|
||||
BoxViewer.prototype.init = function(c)
|
||||
{
|
||||
this.ctx = c
|
||||
}
|
||||
|
||||
BoxViewer.prototype.render = function(ascene)
|
||||
{
|
||||
for (var p=0; p<ascene.length; p++)
|
||||
{
|
||||
this.ctx.fillStyle=ascene[p].color
|
||||
this.ctx.fillText(ascene[p].getValue(), p*25 + 3, 200)
|
||||
this.ctx.strokeStyle = ascene[p].color
|
||||
this.ctx.strokeRect(p*25+2,185,25,25)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue