The following is the source code of the bubble sort animation i had developed using Raphael -
mycode.js
function draw() {
var paper = Raphael("notepad", 320, 200);
crcl = paper.set();
numText = paper.set();
nos = [5, 4, 3, 2, 1, -5];
var x = 30, incrX=50;
var color = 'white';
oldPos = [];
for (var i=0,j=5;i<6;i++,j--) {
crcl.push(paper.circle(x, 50, 20).attr({'fill':'#30bfbf','stroke-width':2}));
numText.push(paper.text(x, 50, nos[i]));
oldPos[i] = x;
x += incrX;
}
x = 30;
recur(0, nos.length);
}
function recur(j, i) {
crcl[j].animate({r: 22, fill: 'red'}, 500,'elastic', function(){this.animate({r:20, fill: '#30bfbf'}, 500,function(){
});});
crcl[j+1].animate({r: 22, fill: 'red'}, 500,'elastic', function(){this.animate({r:20, fill: '#30bfbf'}, 500,function(){
if (nos[j] > nos[j+1]) {
var temp = nos[j+1];
nos[j+1] = nos[j];
nos[j] = temp;
var new_cx = oldPos[j]+50;
crcl[j].animate({cx: new_cx}, 500,'elastic',
function() {
numText[j].animate({x: new_cx}, 500);
crcl[j+1].animate({cx: new_cx-50}, 500,'bounce',
function() {
numText[j+1].animate({x: new_cx-50}, 500);
var tmpCrcl = crcl[j];
crcl[j] = crcl[j+1];
crcl[j+1] = tmpCrcl;
var tmpVal = numText[j];
numText[j] = numText[j+1];
numText[j+1] = tmpVal;
j=j+1;
if (j<i-1) {
recur(j, i);
} else if (i>0) {
crcl[i-1].animate({fill:'#4dbf30'},1000);
recur(0,i-1);
}
});});
} else if (nos[j] <= nos[j+1] && j<(i-1)) {
recur(j+1, i);
} else {
crcl[j+1].animate({fill:'#4dbf30'},1000);
crcl[j].animate({fill:'#4dbf30'}, 1000);
}
});});
}
bubblesort.html
<html>
<head>
<script type="text/javascript" src="js/raphael.js">
</script>
<script type="text/javascript" src="js/mycode.js">
</script>
</head>
<body onLoad='draw();'>
<div id="notepad">
</div>
</body>
</html>
No comments:
Post a Comment