- Author:
- Petar
- Twitter:
- @
- GitHub:
- Facebook:
- Google+:
- +
- Reddit:
- /r/
- Pouet:
- Website:
- Compo:
- classic
- Demo link:
- https://js1k.com/2010-first/demo/552
- Shortlink:
- https://js1k.com/552
- Blog post:
- please update here!
- Bytes:
- 892
- Chars:
- 892
- Submission
window.onload=s;var o=document.getElementById("c"),c=o.getContext("2d"),a=[],i=-1,h,t,b=0,j=-1,z=i,u=800,m=5,n=10,y="#0067A5",k="#483C32",f="0px Arial";function s(){o.width=u;o.height=u;while(++i<80)a[i]=i;i=z;while(++i<80)w(r(),r());t=setInterval(d,0);}function r(){return Math.round(Math.random()*79)}function w(e,q){h=a[q];a[q]=a[e];a[e]=h;}function d(){if(++j>78){j=0;b++;}if(b>80)clearInterval(t);if(a[j]<a[j+1]){w(j,j+1);c.fillStyle="#8C92AC";c.fillRect(0,0,u,u);g(1);g(2);c.fillStyle="#480607";c.font=4+f;c.fillText("BUBBLE SORT",262,390);c.font=2+f;c.fillText("x=position, y=value",315,430);c.fillText("x",390,790);c.fillText("y",780,390);c.fillStyle="#00CED1";i=z;while(++i<80)c.fillRect(i*n,a[i]*n,n,n);}}function g(l){for(i=1,x=n;x<u;++i,x+=n){c.beginPath();c.strokeStyle=(i%m)?y:k;if(l==1){c.moveTo(x,0);c.lineTo(x,u);}else{c.moveTo(0,x);c.lineTo(u,x);}c.stroke();c.closePath();}}
- Description
- Graphic representation of bubble sort
x-axis represents position in the array and y-axis represents the value at that position
array contains numbers from 0 to 80 randomly disseminated
and then sort descending
- Base64 encoded
d2luZG93Lm9ubG9hZD1zO3ZhciBvPWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJjIiksYz1vLmdldENvbnRleHQoIjJkIiksYT1bXSxpPS0xLGgsdCxiPTAsaj0tMSx6PWksdT04MDAsbT01LG49MTAseT0iIzAwNjdBNSIsaz0iIzQ4M0MzMiIsZj0iMHB4IEFyaWFsIjtmdW5jdGlvbiBzKCl7by53aWR0aD11O28uaGVpZ2h0PXU7d2hpbGUoKytpPDgwKWFbaV09aTtpPXo7d2hpbGUoKytpPDgwKXcocigpLHIoKSk7dD1zZXRJbnRlcnZhbChkLDApO31mdW5jdGlvbiByKCl7cmV0dXJuIE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSo3OSl9ZnVuY3Rpb24gdyhlLHEpe2g9YVtxXTthW3FdPWFbZV07YVtlXT1oO31mdW5jdGlvbiBkKCl7aWYoKytqPjc4KXtqPTA7YisrO31pZihiPjgwKWNsZWFySW50ZXJ2YWwodCk7aWYoYVtqXTxhW2orMV0pe3coaixqKzEpO2MuZmlsbFN0eWxlPSIjOEM5MkFDIjtjLmZpbGxSZWN0KDAsMCx1LHUpO2coMSk7ZygyKTtjLmZpbGxTdHlsZT0iIzQ4MDYwNyI7Yy5mb250PTQrZjtjLmZpbGxUZXh0KCJCVUJCTEUgU09SVCIsMjYyLDM5MCk7Yy5mb250PTIrZjtjLmZpbGxUZXh0KCJ4PXBvc2l0aW9uLCB5PXZhbHVlIiwzMTUsNDMwKTtjLmZpbGxUZXh0KCJ4IiwzOTAsNzkwKTtjLmZpbGxUZXh0KCJ5Iiw3ODAsMzkwKTtjLmZpbGxTdHlsZT0iIzAwQ0VEMSI7aT16O3doaWxlKCsraTw4MCljLmZpbGxSZWN0KGkqbixhW2ldKm4sbixuKTt9fWZ1bmN0aW9uIGcobCl7Zm9yKGk9MSx4PW47eDx1OysraSx4Kz1uKXtjLmJlZ2luUGF0aCgpO2Muc3Ryb2tlU3R5bGU9KGklbSk/eTprO2lmKGw9PTEpe2MubW92ZVRvKHgsMCk7Yy5saW5lVG8oeCx1KTt9ZWxzZXtjLm1vdmVUbygwLHgpO2MubGluZVRvKHUseCk7fWMuc3Ryb2tlKCk7Yy5jbG9zZVBhdGgoKTt9fQ==
- Original source
window.onload=s;
var o=document.getElementById("c"),
c=o.getContext("2d"),
a=[],
i=-1,
h,
t,
b=0,
j=-1,
z=i,
u=800,
m=5,
n=10,
y="#0067A5",
k="#483C32",
f="0px Arial";
function s()//set canvas width, height init array, ranom swap
{
o.width=u;
o.height=u;
while(++i<80)
a[i]=i;i=z;
while(++i<80)
w(r(),r());
t=setInterval(d,0);
}
function r()//generate random number for random swap
{
return Math.round(Math.random()*79)
}
function w(e,q)// input two index of array and swap values
{
h=a[q];
a[q]=a[e];
a[e]=h;
}
function d()//sort array and draw background, text and call grid draw
{
if(++j>78)
{
j=0;
b++;
}
if(b>80)
clearInterval(t);
if(a[j]<a[j+1])
{
w(j,j+1);
c.fillStyle="#8C92AC";
c.fillRect(0,0,u,u);
g(1);
g(2);
c.fillStyle="#480607";
c.font=4+f;
c.fillText("BUBBLE SORT",262,390);
c.font=2+f;
c.fillText("x=position, y=value",315,430);
c.fillText("x",390,790);
c.fillText("y",780,390);
c.fillStyle="#00CED1";
i=z;
while(++i<80)
c.fillRect(i*n,a[i]*n,n,n);
}
}
function g(l)//draw grid
{
for(i=1,x=n;x<u;++i,x+=n)
{
c.beginPath();
c.strokeStyle=(i%m)?y:k;
if(l==1)
{
c.moveTo(x,0);
c.lineTo(x,u);
}
else
{
c.moveTo(0,x);
c.lineTo(u,x);
}
c.stroke();
c.closePath();
}
}
