Bubbles

var backgroundColor = '#024873';
var foregroundColor = '#5B9ED9';
var number = intVariable('number', 10, 200);
var minSize = intVariable('minSize', 1, 50);
var maxSize = intVariable('maxSize', 25, 200);

var xp = [];
var yp = [];
var rp = [];

function distance(x1, y1, x2, y2){
  return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2)) 
}

// Generate 500 canadidate balls and try to position them
for (var i = 0; i < number; i++){
  var overlap = false;
  var xrand = getRandomInt(0, width);
  var yrand = getRandomInt(0, height);
  var rrand = getRandomInt(minSize, maxSize);
  
  for (var j = 0; j < xp.length - 1; j++){
	var dist = distance(xrand, yrand, xp[j], yp[j]);
    if (dist < (rrand*2)){
      overlap = true; 
    }
  }
  
  if (overlap == false){
    xp.push(xrand);
    yp.push(yrand);
    rp.push(rrand);
  }
}

s.rect(0, 0, width, height).attr({fill: backgroundColor});

// Draw our circles
for (var i = 0; i < xp.length - 1; i++){ 
  s.circle(xp[i], yp[i], rp[i]).attr({fill: foregroundColor, fillOpacity: 0.8}); 
}