var circles = [];

var minRadius = 2;

var maxRadius = 150;

var totalCircles = 800;

var createCircleAttempts = 500;

​

function setup() {

  createCanvas(dim, dim);

}

​

function draw() {

  background(255);

​

  for (var i = 0; i < totalCircles; i++) {

    createAndDrawCircle();

  }

  noLoop()

}

​

function createAndDrawCircle() {

  var newCircle;

  var circleSafeToDraw = false;

  for (var tries = 0; tries < createCircleAttempts; tries++) {

    newCircle = {

      x: Math.floor(Math.random() * dim),

      y: Math.floor(Math.random() * dim),

      radius: minRadius

    }

​

    if (doesCircleHaveACollision(newCircle)) {

      continue;

    } else {

      circleSafeToDraw = true;

      break;

    }

  }

​

  if (!circleSafeToDraw) {

    return;

  }

​

  for (var radiusSize = minRadius; radiusSize < maxRadius; radiusSize++) {

    newCircle.radius = radiusSize;

    if (doesCircleHaveACollision(newCircle)) {

      newCircle.radius--;

      break;

    }

  }

​

  circles.push(newCircle);

  circle(newCircle.x, newCircle.y, newCircle.radius * 2)

}

​

function doesCircleHaveACollision(circle) {

  for (var i = 0; i < circles.length; i++) {

    var otherCircle = circles[i];

    var a = circle.radius + otherCircle.radius;

    var x = circle.x - otherCircle.x;

    var y = circle.y - otherCircle.y;

​

    if (a >= Math.sqrt((x * x) + (y * y))) {

      return true;

    }

  }

​

  if (circle.x + circle.radius >= dim ||

    circle.x - circle.radius <= 0) {

    return true;

  }

​

  if (circle.y + circle.radius >= dim ||

    circle.y - circle.radius <= 0) {

    return true;

  }

​

  return false;

}