256 lines
4.6 KiB
JavaScript
256 lines
4.6 KiB
JavaScript
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])
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|