Dispersal

var background = '#F4F2EE';
// Slate and blush dominate; lemon is the accent.
var colors = ['#3D4556', '#3D4556', '#3D4556', '#E8CDBE', '#E8CDBE', '#D2CFCC', '#D2CFCC',
              '#A9AFBF', '#F4EE7A'];
var margin = 50;

var dots = intVariable('Dots', 90, 240);
var fall = intVariable('Fall', 15, 40);

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

var bigR = 26, smallR = 8;

// A dab of paint: roughly round, its edge wandering a little in and out,
// smoothed by curving through the midpoints between uneven radii.
function dab(cx, cy, r, fill){
  var n = 12, pts = [];
  for (var k = 0; k < n; k++){
    var a = k / n * Math.PI * 2;
    var rr = r * getRandomArbitary(0.9, 1.08);
    pts.push([cx + Math.cos(a) * rr, cy + Math.sin(a) * rr]);
  }
  function mid(p, q){ return [(p[0] + q[0]) / 2, (p[1] + q[1]) / 2]; }
  var start = mid(pts[n - 1], pts[0]);
  var d = 'M' + start[0] + ',' + start[1];
  for (var k = 0; k < n; k++){
    var m = mid(pts[k], pts[(k + 1) % n]);
    d += ' Q' + pts[k][0] + ',' + pts[k][1] + ' ' + m[0] + ',' + m[1];
  }
  s.path(d + 'Z').attr({fill: fill});
}
var inner = height - margin * 2;

for (var i = 0; i < dots; i++){
  // Most dots crowd the top; the rest thin out on the way down. A higher Fall
  // keeps more of them up there.
  var t = Math.pow(getRandomArbitary(0, 1), fall / 20 + 0.8);
  var r = (bigR + (smallR - bigR) * t) * getRandomArbitary(0.8, 1.15);
  // The crowd at the top runs off the edges like the paint did; the stragglers
  // below draw in to keep clear of the wrap.
  var edge = -r + (margin + r * 2) * Math.min(1, t * 2);
  var x = getRandomArbitary(edge + r, width - edge - r);
  var y = Math.min(-10 + t * (inner + margin + 10), height - margin - r);
  dab(x, y, r, colors[getRandomInt(0, colors.length - 1)]);
}