​

let cnv;

function setup() {

  cnv = createCanvas(500, 500);

  imageMode(CENTER);

  y = width / 2;

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

    cir.push(new Circles(random(20, width - 20), random(20, height - 20), 3));

  }

}

​

function draw() {

  background(0);

​

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

    cir[i].move();

    if (i < 9) {

      stroke(255);

      line(cir[i].x, cir[i].y, cir[i + 1].x, cir[i + 1].y);

    }

  }

  // if (frameCount % 60 == 0) {

  //   windowResized();

  // }

}

​

function windowResized() {

  resizeCanvas(random(100, 500), random(100, 500));

}

​

class Circles {

  constructor(x, y, speed) {

    this.x = x;

    this.y = y;

    this.xspeed = speed;

    this.yspeed = speed;

    this.r = random(0, 255);

    this.g = random(0, 255);

    this.b = random(0, 255);

    this.size = 40;

  }

​

  move() {

    fill(this.r, this.g, this.b);

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

    this.x += this.xspeed;

    if (this.x >= width - 20 || this.x <= 20) {

      this.xspeed *= random(-10, -1);

      this.xspeed = constrain(this.xspeed, -10, 10);

      this.size = random(10, 80);

      this.r = random(0, 255);

      this.g = random(0, 255);

      this.b = random(0, 255);

    }

    this.y += this.yspeed;

    if (this.y >= height - 20 || this.y <= 20) {

      this.yspeed *= random(-10, -1);

      this.yspeed = constrain(this.yspeed, -5, 5);

      this.size = random(10, 80);

      this.r = random(0, 255);

      this.g = random(0, 255);

      this.b = random(0, 255);

    }

  }

}

​