html, body { margin: 0; padding: 0; } canvas { display: block; } 

let dots = [];
let dotSize = 70;

let cols;
let rows;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);

    cols = window.innerWidth/dotSize;
    rows = window.innerHeight/dotSize;

    for(i=0; i<rows; i++){
      for(j=0; j<cols; j++){
        dots.push(new inkblot(dotSize, dotSize/2, dotSize*j, dotSize*i, 0));
      }
    }
    dots.forEach((dot)=>{
      dot.create();
    });
  }

  function draw() {
    clear();
    background(255);
    dots.forEach((dot)=>{
      dot.draw();
    });

    // dots[20].create();
    // dots[20].draw();
  }
  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }

  class inkblot{
    constructor(sizeMax, sizeMin, x, y, spread){
        this.graphic = createGraphics(sizeMax, sizeMax)
        this.x = x;
        this.y = y;
        this.min = sizeMin;
        this.max = sizeMax;
        this.spread = spread;
    }

    create(){
        this.graphic.clear();
        this.graphic.blendMode(MULTIPLY);
        this.graphic.fill('#FF00FF');
        this.graphic.noStroke();
        this.graphic.circle((this.max/2)+this.spread, (this.max/2)-this.spread, this.min);
        this.graphic.fill('#00FFFF');
        this.graphic.circle((this.max/2)-this.spread, (this.max/2)-this.spread, this.min);
        this.graphic.fill('#FFFF00');
        this.graphic.circle(this.max/2, (this.max/2)+this.spread, this.min);
    }

    draw(){
        const prox = dist(this.x, this.y, mouseX, mouseY);

        if(prox < this.max*3){
          const tmpSpread = map(prox, 0, this.max*3, this.max/4, 0);

          this.spread = tmpSpread;
          this.create();
        }else if(this.spread > 0){
          this.spread -= .25;
          this.create();
        }


        image(this.graphic, this.x, this.y);
    }
  }

function mousePressed() {
saveFrames('out', 'jpg', 1, 1);
}