​

function setup() {

  createCanvas(400, 400);

  frameRate(60);

  let it = 0;

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

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

      let k = width/2;

      let x = i*k + k/2;

      let y = j*k + k/2; 

      points[it++] = new SandroPoint(x, y);

    }

  }

  points[0].setNext(1);

  points[1].setNext(3);

  points[3].setNext(2);

  points[2].setNext(0);

}

​

function draw() {

  background(0);

  if (frameCount % 100 == 0) {

    let it = 0;

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

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

        let k = width/2;

        let down1 = i*k;

        let up1 = down1 + k;

        let down2 = j*k; 

        let up2 = down2 + k;

        points[it++].newTarget(down1, up1, down2, up2);

      }

    }

  }

  for (let it = 0; it < points.length; it++) {

    points[it].update();

    points[it].draw();

  }

}

​

class SandroPoint {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.targetX = x;

    this.targetY = y;

    this.ease = 0.15;

  }

  setNext(next) {

    this.nextPoint = points[next];

  }

  update() {

    this.x = this.x +  (this.targetX - this.x) * this.ease;

    this.y = this.y + (this.targetY - this.y) * this.ease;    

  }

  newTarget(down1, up1, down2, up2) {

    this.targetX = random(down1, up1);

    this.targetY = random(down2, up2);

  }

  draw() {

    noStroke();

    fill(255);

    ellipse(this.x, this.y, 50, 50);

    stroke(255);

    strokeWeight(25);

    line(this.x, this.y, this.nextPoint.x, this.nextPoint.y);

  }

}