Rectangle Filling

var shapes = [];

var maxp = 20000;

var maxc = 3000;

​

class Rectangle {

  constructor(x, y, w, h, p) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.p = p;

  }

​

  draw() {

    rectMode(CENTER);

    fill(100,random(100),200,map(this.p,0,maxp,200,0))

    rect(this.x, this.y, this.w, this.h);

  }

​

  intersect(other) {

    return (other.x - other.w / 2 < this.x + this.w / 2) &&

      (other.x + other.w / 2 > this.x - this.w / 2) &&

      (other.y - other.h / 2 < this.y + this.h / 2) &&

      (other.y + other.h / 2 > this.y - this.h / 2);

  }

}

​

​

function setup() {

  createCanvas(1024, 512);

  var protection = 0;

​

  while (shapes.length < maxc && protection < maxp) {

    protection++;

    var rec = new Rectangle(random(width), random(height), random(10,width/3), random(10,height/3), protection);

    var overlapping = false;

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

      if (rec.intersect(shapes[j])) {

        overlapping = true;

        break;

      }

    }

    if (!overlapping) shapes.push(rec);

  }

​

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

    //fill(255,100, 0, map(circles[i].p,0,maxp,0,255));

    shapes[i].draw();

  }

}

​

function draw() {}