// Night 7: Animated Circle Packing

// Expansion of: https://youtu.be/XATr_jdh-44

// Daniel Shiffman

// http://codingrainbow.com/

​

// All the circles

var circles = [];

let colors;

let gfx1, gfx2;

let yoff = 0.0;

​

function setup() {

  colors = [color("#00D0FF"), color("#F91D8B"), color("#81F400")];

  createCanvas(1000, 1000); //windowWidth, windowHeight);

  gfx1 = createGraphics(width, height);

  gfx2 = createGraphics(width, height);

​

  // Start with a big one in the center in the hopes that it

  // takes up a lot of a space and the sketch runs faster

  circles.push(

    new Circle(width / 2, height / 2, min(width, height) / 3, random(colors))

  );

}

​

function draw() {

  gfx1.clear();

  gfx2.clear();

  background(0);

  drawShadow(2,2,2,gfx2);

​

  // All the circles

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

    var c = circles[i];

    c.show();

​

    // Is it a growing one?

    if (c.growing) {

      c.grow();

      // Does it overlap any previous circles?

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

        var other = circles[j];

        if (other != c) {

          var d = dist(c.x, c.y, other.x, other.y);

          if (d - 1 < c.r + other.r) {

            c.growing = false;

          }

        }

      }

​

      // Is it stuck to an edge?

      if (c.growing) {

        c.growing = !c.edges();

      }

    }

  }

​

  // Let's try to make a certain number of new circles each frame

  // More later

  var target = 1 + constrain(floor(frameCount / 120), 0, 20);

  // How many

  var count = 0;

  // Try N times

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

    if (addCircle()) {

      count++;

    }

    // We made enough

    if (count == target) {

      break;

    }

  }

​

  gfx2.fill(50);

  gfx2.beginShape();

  let xoff = 0; // Option #1: 2D Noise

  // let xoff = yoff; // Option #2: 1D Noise

​

  // Iterate over horizontal pixels

  for (let x = 0; x <= width; x += 10) {

    // Calculate a y value according to noise, map to

​

    // Option #1: 2D Noise

    let y = map(noise(xoff, yoff), 0, 1, height/2,height/2+200);//200, 300);

​

    // Option #2: 1D Noise

    // let y = map(noise(xoff), 0, 1, 200,300);

​

    // Set the vertex

    gfx2.vertex(x, y);

    // Increment x dimension for noise

    xoff += 0.05;

  }

  // increment y dimension for noise

  yoff += 0.01;

  gfx2.vertex(width, height);

  gfx2.vertex(0, height);

  gfx2.endShape(CLOSE);

​

  image(gfx2, 0, 0);

  image(gfx1, 0, 0);

​

  // We can't make any more

  // if (count < 1) {

  //   noLoop();

  //   console.log("finished");

  // }

}

​

// Add one circle

function addCircle() {

  // Here's a new circle

  var newCircle = new Circle(random(width), random(height), 1, random(colors));

  // Is it in an ok spot?

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

    var other = circles[i];

    var d = dist(newCircle.x, newCircle.y, other.x, other.y);

    if (d < other.r + 4) {

      newCircle = undefined;

      break;

    }

  }

  // If it is, add it

  if (newCircle) {

    circles.push(newCircle);

    return true;

  } else {

    return false;

  }

}

​

// Circle object

function Circle(x, y, r, c) {

  this.growing = true;

  this.x = x;

  this.y = y;

  this.r = r;

  this.c = c;

  this.filled = random([true, false]);

}

​

// Check stuck to an edge

Circle.prototype.edges = function () {

  return (

    this.r > width - this.x ||

    this.r > this.x ||

    this.r > height - this.y ||

    this.r > this.y

  );

};

​

// Grow

Circle.prototype.grow = function () {

  this.r += 0.5;

};

​

// Show

Circle.prototype.show = function () {

  if (!this.filled) gfx1.noFill();

  else gfx1.fill(this.c);

  gfx1.strokeWeight(1.5);

  gfx1.stroke(this.c); //255, 0, 175, 225);

  gfx1.ellipse(this.x, this.y, this.r * 2);

};

​

function drawShadow(b, x, y, g) {

  if (g != null) {

    g.drawingContext.shadowOffsetX = x;

    g.drawingContext.shadowOffsetY = y;

    g.drawingContext.shadowBlur = b;

    g.drawingContext.shadowColor = color(20); //"black";

  } else {

    drawingContext.shadowOffsetX = x;

    drawingContext.shadowOffsetY = y;

    drawingContext.shadowBlur = b;

    drawingContext.shadowColor = color(20); //"black";

  }

}