let clusterSizeOffset = 20;

let checkMouseXYdist;

let lerpVal;

​

class Dot {

  constructor(x, y) {

    this.xOffset = x;

    this.yOffset = y;

  }

​

  display(x, y) {

    ellipse(x + this.xOffset, y + this.yOffset, 10, 10);

  }

​

}

​

class Cluster {

​

​

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.dots = [];

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

​

      let myDot = new Dot(random(-clusterSizeOffset, clusterSizeOffset),

        random(-clusterSizeOffset, clusterSizeOffset));

      ///add the new dot object to your array of dots in the cluster

      this.dots.push(myDot);

    }

​

  }

​

  move() {

​

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

      this.dots[i].display(this.x, this.y);

      }

​

      this.x = lerp(this.x, mouseX, lerpVal) //this.x + (mouseX - this.x) / 500;

    this.y = lerp(this.y, mouseY, lerpVal) //this.y + (mouseY - this.y) / 500;

​

  }

​

​

}

​

function setup() {

  createCanvas(400, 400);

  // set lerpVal

  lerpVal = sqrt(3)/100;

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

    cluster[i] = new Cluster((random(0, width)), (random(height)));

  }

}

​

function draw() {

  background(220);

  push();

  stroke(1);

  fill(255);

  ellipse(width / 2, height / 2, 300);

  pop();

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

    cluster[i].move();

  }

}