let num_circles = 50;

let maxR;

let finalCircles = [];

​

function setup() {

  createCanvas(600, 600);

  pixelDensity(1);

  background(220);

​

  gfx = createGraphics(width, height);

  gfx.background(255);

​

  maxR = width * 0.15;

  gfx.fill(0);

  gfx.noStroke();

  x = random(width);

  y = random(height);

}

​

let growing = true;

let _r = 1;

let x, y;

function draw() {

  image(gfx, 0, 0);

​

  if (growing) {

    let valid = true;

    gfx.loadPixels();

​

    for (let t = 0; t < TWO_PI; t += PI / 64) {

      let _x = x + _r * cos(t);

      let _y = y + _r * sin(t);

​

      if (_x > 0 && _x < width && _y > 0 && _y < height) {

        let pid = getPixelID(_x, _y, gfx);

        if (

          gfx.pixels[pid] == 0 &&

          gfx.pixels[pid + 1] == 0 &&

          gfx.pixels[pid + 2] == 0

        ) {

          valid = false;

          break;

        }

      }

    }

​

    if (valid) {

      gfx.circle(x, y, _r * 2);

      _r++;

    } else growing = false;

    if (_r >= maxR) growing = false;

​

    if (!growing && _r > 1)

      finalCircles.push({ x: x, y: y, r: _r, col: random(255) });

  } else {

    _r = 1;

    x = random(width);

    y = random(height);

    growing = true;

  }

​

  if (finalCircles.length > 500) {

    console.log("done");

​

    background(220);

    for (let c of finalCircles) {

      fill(color(c.col));

      circle(c.x, c.y, (c.r - 2) * 2);

    }

​

    noLoop();

  }

}

​

function getPixelID(x, y, g) {

  let _density = g.pixelDensity();

  return 4 * _density * (int(y) * _density * g.width + int(x));

}

​