​

const cnvW = 600;

const cnvH = 600;

const cellSize = 12;

const gridW = cnvW / cellSize;

const gridH = cnvH / cellSize;

let grid = [];

let circles = [];

let colorCycle = 0;

const bgColor = 220;

const coolers = [ "#005f73", "#0a9396", "#94d2bd", "#e9d8a6", "#ee9b00", "#ca6702", "#bb3e03", "#ae2012", "#620f12" ];

​

function setup() {

  createCanvas(cnvW, cnvH);

  // create grid of cells

  for (let i = 0; i < gridW; i++) {

    for (let j = 0; j < gridH; j++) {

      grid.push(new Cell(i, j, cellSize, "#f2f2f2"));

    }

  }

}

​

function draw() {

  background(bgColor);

  for (let i = 0; i < grid.length; i++) {

    grid[i].show();

  }

​

  for (let myc of circles) {

    if (myc.growing) {

      let checked = grid.slice();

      for (other of checked) {

        let d = dist(myc.x, myc.y, other.x, other.y);

        if (d < myc.radius) {

          other.c = myc.c;

          checked = checked.slice(checked.indexOf(other)+1,1);

        }

      }

      myc.grow();

    }

    myc.show();

  }

​

}

​

function mousePressed() {

  let x = mouseX;

  let y = mouseY;

  let newCircle = new Circle(x, y, 1, coolers[colorCycle % coolers.length], 2.5);

  circles.push(newCircle);

  colorCycle+=1;

}

​

​

​

// classes

​

class Cell {

  constructor(x, y, s, c) {

    this.s = s;

    this.x = x * this.s;

    this.y = y * this.s;

    this.c = color(c);

  }

  show() {

    stroke(bgColor);

    fill(this.c);

    rect(this.x, this.y, this.s, this.s);

  }

}

​

class Circle {

  constructor(x, y, r, c, growspeed){

    this.x = x;

    this.y = y;

    this.radius = r;

    this.c = color(c);

    this.growspeed = growspeed;

    this.growing = true;

  }

​

  show() {

    push()

    noStroke();

    noFill();

    ellipse(this.x, this.y, this.radius*2);

    pop()

  }

​

  grow() {

    // if (this.edges()) {

    if (!this.cover()) {

      this.radius += this.growspeed;

    } else {

      this.growing = false;

    }

  }

​

  // check collision with edges

  edges() {

    return !(this.x + this.radius > width || this.x - this.radius < 0 || this.y + this.radius > height || this.y - this.radius < 0)

  }

​

  // check radius is bigger than dist to furthest corner

  cover() {

    let maxDist = 0;

    let corners = [

      [0, 0],

      [width, 0],

      [width, height],

      [0, height]

    ];

    for (let i = 0; i < corners.length; i++) {

      let dist = distFunc(this.x, this.y, corners[i][0], corners[i][1]);

      if (dist > maxDist) {

        maxDist = dist;

      }

    }

    return this.radius*this.radius > maxDist;

  }

}

​

function distFunc(ax, ay, bx, by) {

  let dx = bx - ax;

  let dy = by - ay;

  return dx * dx + dy * dy;

}