createCanvas(900, 900);

  cols = ["#1fbfff","#1fdaff","#2ceef2","#8ccfb9","#d2b04b","#ffb01f","#fd8f21","#fc6722","#ea4334","#d7474c"];

  rects = [];

  rects[0] = new Rect(0, 0, width, height, 0, 0, 0);

  noFill();

  strokeWeight(0.1);

  noStroke();

  background(cols[0]);

}

​

function draw() {

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

    rects[i].update();

  }

}

​

class Rect{

  constructor(x, y, w, h, index, parent, quadrant){

    this.pos = createVector(x, y);

    this.ow = w;

    this.oh = h;

    this.cw = w;

    this.ch = h;

    this.w = w;

    this.h = h;

    this.index = index;

    this.c1 = this.index % cols.length;

    if(this.c1 < cols.length - 1){

      this.c2 = this.c1 + 1;

    } else {

      this.c2 = 0;

    }

    this.ca = 0;

    this.col = color(cols[this.index % cols.length])

    this.parent = parent;

    this.children = 0;

    this.quadrant = quadrant;

    if(this.quadrant == 0 && this.index > 0){

      this.pos = createVector(rects[this.parent].pos.x, rects[this.parent].pos.y);  

    } else if(this.quadrant == 1){

      this.pos = createVector(rects[this.parent].pos.x + this.ow, rects[this.parent].pos.y);  

    } else if(this.quadrant == 2){

      this.pos = createVector(rects[this.parent].pos.x, rects[this.parent].pos.y + this.oh);  

    } else if(this.quadrant == 3){

      this.pos = createVector(rects[this.parent].pos.x + this.ow, rects[this.parent].pos.y + this.oh);  

    }

  }

  update(){

    this.ca = this.ca + map(noise(frameCount * 0.001 + this.index), 0, 1, 0.0001, 0.01);

    if(this.ca >= 1){

      this.ca = 0;

      if(this.c2 < cols.length - 1){

        this.c1 = this.c2;

        this.c2++;

      } else{

        this.c1 = this.c2;

        this.c2 = 0;

      }

      // this.c1 = this.c2;

      // this.c2 = floor(random(cols.length));

    }

    this.col = lerpColor(cols[this.c1], cols[this.c2], this.ca);

    this.w = noise(this.index, frameCount * 0.001 + this.index );

    this.h = noise(this.index + rects.length, frameCount * 0.001 + this.index );

    // fill(this.col);

    stroke(this.col);

    // this.col.setAlpha(20);

    // fill(this.col);

    if(this.quadrant == 0 && this.index > 0){

      this.cw = rects[this.parent].w * rects[this.parent].cw;

      this.iw = (1 - rects[this.parent].w) * rects[this.parent].cw;

      this.ch = rects[this.parent].h * rects[this.parent].ch;

      this.ih = (1 - rects[this.parent].h) * rects[this.parent].ch;

      this.pos = createVector(rects[this.parent].pos.x, rects[this.parent].pos.y);

      ellipse(this.pos.x, this.pos.y, this.cw, this.ch);

    } else if(this.quadrant == 1){

      this.cw = rects[this.parent].w * rects[this.parent].cw;

      this.iw = (1 - rects[this.parent].w) * rects[this.parent].cw;

      this.ch = rects[this.parent].h * rects[this.parent].ch;

      this.ih = (1 - rects[this.parent].h) * rects[this.parent].ch

      this.pos = createVector(rects[this.parent].pos.x + this.cw, rects[this.parent].pos.y);

      ellipse(this.pos.x, this.pos.y, this.iw, this.ch);

      this.cw = this.iw;

    } else if(this.quadrant == 2){

      this.cw = rects[this.parent].w * rects[this.parent].cw;

      this.iw = (1 - rects[this.parent].w) * rects[this.parent].cw;

      this.ch = rects[this.parent].h * rects[this.parent].ch;

      this.ih = (1 - rects[this.parent].h) * rects[this.parent].ch

      this.pos = createVector(rects[this.parent].pos.x, rects[this.parent].pos.y + this.ch);

      ellipse(this.pos.x, this.pos.y, this.cw, this.ih);

      this.ch = this.ih;

    } else if(this.quadrant == 3){

      this.cw = rects[this.parent].w * rects[this.parent].cw;

      this.iw = (1 - rects[this.parent].w) * rects[this.parent].cw;

      this.ch = rects[this.parent].h * rects[this.parent].ch;

      this.ih = (1 - rects[this.parent].h) * rects[this.parent].ch

      this.pos = createVector(rects[this.parent].pos.x + this.cw, rects[this.parent].pos.y + this.ch);

      ellipse(this.pos.x, this.pos.y, this.iw, this.ih);

      this.cw = this.iw;

      this.ch = this.ih;

    }

    // rect(this.pos.x, this.pos.y, this.cw, this.ch);

    if(this.ow > 50 && this.children < 4){

      rects[rects.length] = new Rect(this.pos.x, this.pos.y, this.ow / 2, this.oh / 2, rects.length, this.index, this.children);

      this.children++;

      rects[rects.length] = new Rect(this.pos.x, this.pos.y, this.ow / 2, this.oh / 2, rects.length, this.index, this.children);

      this.children++;

      rects[rects.length] = new Rect(this.pos.x, this.pos.y, this.ow / 2, this.oh / 2, rects.length, this.index, this.children);

      this.children++;

      rects[rects.length] = new Rect(this.pos.x, this.pos.y, this.ow / 2, this.oh / 2, rects.length, this.index, this.children);

      this.children++;

    }

  }

}