personal_site/scratchpad.html

<style> 
* {
margin: 0;
padding: 0;
line-height: 0;
}
</style>

<canvas id="canvas"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight-10;
console.log(innerWidth, innerHeight);

var circleratio = 1/3;
var numbers = Array(Math.floor((Math.random()*10)+10));
for (var i = 0; i < numbers.length; i++) {
	numbers[i] = Math.floor((Math.random()*100)+1);
};

var highlighted = Array(numbers.length);
for (var i = 0; i < highlighted.length; i++) {
	highlighted[i] = 0;
};
var speed = 4;
var numberoffset = 1/6 * innerWidth;
var numberspacing = (2/3 * innerWidth) / numbers.length;
var sorted = numbers.slice(0);
sorted.sort(function(a,b) {return b-a;});
var biggest = sorted[0];

function clearcanvas() {
	context.save();

	// Use the identity matrix while clearing the canvas
	context.setTransform(1, 0, 0, 1, 0, 0);
	context.clearRect(0, 0, canvas.width, canvas.height);

	// Restore the transform
	context.restore();
}

function swapcircles(a,b) {

	var max = 100/speed;
	var iteration = max;
	var id = 0;
	var diff = (b-a)/2;
	var finished = false;

	f = function() {
		if(iteration < 1) {
			var temp = numbers[a];
			numbers[a] = numbers[b];
			numbers[b] = temp;
			clearInterval(id);
			finished = true;
		}
		else {
			iteration--;
			clearcanvas();
			var t = iteration/max;
			var y = innerHeight/2 + numberspacing/2 * Math.sin(t*Math.PI);
			var x = numberoffset + numberspacing * (a+diff) + numberspacing * diff * Math.cos(t*Math.PI);
			drawcircle(a, x, y);

			var y = innerHeight/2 + numberspacing/2 * Math.sin(-t*Math.PI);
			var x = numberoffset + numberspacing * (b-diff) -numberspacing * diff* Math.cos(-t*Math.PI);
			drawcircle(b, x, y);

			for (var i = 0; i < numbers.length; i++) {
				if(i != a && i != b) {
					var y = innerHeight/2;
					var x = numberoffset + numberspacing * i;
					drawcircle(i, x, y);
				}
			};

		}
	}

id = setInterval(f,10);
}

function drawcircle(i, x, y) {
		var width = circleratio * numberspacing * (numbers[i] / biggest) + 10;
		if(highlighted[i] == 0) {
			context.fillStyle   = '#000';
		}
		else {
			context.fillStyle = '#f00';
		}
		context.beginPath();
		context.arc(x,y,width,0,2*Math.PI);
		context.stroke();
		context.fill();
		context.strokeStyle   = '#fff';
		context.strokeText(numbers[i], x, y, width);
}

function drawcircles() {

	context.textAlign = 'center';
	context.textBaseline = 'middle';

	for (var i = 0; i < numbers.length; i++) {
		var y = innerHeight/2;
		var x = numberoffset + numberspacing * i;
		drawcircle(i, x, y);
	};
}

 $(document).ready(function(){
   drawcircles();
 	var a = numbers.length;
 	var b = numbers.length;
 	var id = 0;
 	var pass = numbers.length;

 	bubble = function() {

 		if(pass <= 0) {
 			numbers = Array(Math.floor((Math.random()*10)+10));
			for (var i = 0; i < numbers.length; i++) {
				numbers[i] = Math.floor((Math.random()*100)+1);
			};

			highlighted = Array(numbers.length);
			for (var i = 0; i < highlighted.length; i++) {
				highlighted[i] = 0;
			};

			numberspacing = (2/3 * innerWidth) / numbers.length;
			sorted = numbers.slice(0);
			sorted.sort(function(a,b) {return b-a;});
			biggest = sorted[0];
			pass = numbers.length;
 		}
 		else {

 			highlighted[a] = 0;
 			highlighted[b] = 0;
 			a++;
 			b++;
 			if(b > pass) {
 				a = 0;
 				b = 1;
 				pass--;
 			}
 			highlighted[a] = 1;
 			highlighted[b] = 1

 			 drawcircles();
 			if(numbers[a] > numbers[b]) {
 				swapcircles(a,b);
 			}
 		}
 		setTimeout(bubble, 2000/speed);
 	}
 	bubble();

 });

</script>