added scratchpad

scratchpad.html

@@ -0,0 +1,169 @@
+<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>