let HIG;

let balls = [];

// let n = 60;

let i;

​

function setup() {

  WID = windowWidth;

  HIG = windowHeight;

  createCanvas(WID,HIG);

  // for (i=0; i<n;i++){

  //   balls[i] = new ball(i * 3);

  // }

}

​

function draw() {

  background(10);

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

    balls[i].show();

    balls[i].move();  

  }

  // print(i);

}

​

function mouseDragged() {

  let b = new ball(30);

  balls.push(b);

}

​

function mouseClicked() {

  let b = new ball();

  balls.push(b);

}

​

class ball {

  constructor(){

    this.x = mouseX;

    this.y = mouseY;

    this.d = random(2,70);

    this.R = random(220);

    this.G = random(220);

    this.B = random(220);

    this.S = random(220);

  }

    move() {

    this.x = this.x + random(-2,2);

    this.y = this.y + random(-2,0);

    if (this.x > WID - 2 * this.d) {this.x = WID - 2 * this.d;}

    if (this.x < 2 * this.d) {this.x = 2 * this.d;}

    if (this.y > HIG -2 * this.d) {this.y = HIG - 2 * this.d;}

    if (this.y < 2 * this.d) {this.x = 2 * this.d;}

  }

  show() {

    stroke(this.R,this.G,this.B,100);

    strokeWeight(1);

    fill(this.R,this.G,this.B,50);

    // fill(this.s);

    if (this.y > 3 * this.d)  {

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

    } else if (this.y > 2.6 * this.d){

      ellipse(this.x, this.y, 1.4 * this.d);        

    } 

  }

}

​