let lineWidth;

​

let numBall = 50;

let balls = [];

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

    balls.push(new Particle(random(width), random(height), random(20, 50)));

  }

}

​

function draw() {

  background(230, 100, 29);

  lineWidth = random(4, 300);

  squareSize = random(5, windowHeight);

​

  rectMode(CENTER);

  strokeWeight(lineWidth);

  stroke(200, 0, 255, 100);

  fill(255, 100);

  square(windowWidth / 2, windowHeight / 2, squareSize);

​

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

    balls[i].move();

    balls[i].bounce();

    balls[i].display();

  }

}

​

class Particle {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.xSpeed = random(5, 10);

    this.ySpeed = random(-4, -9);

    this.color = color(0, random(100, 255), 0);

  }

​

  bounce() {

    if (this.x > width || this.x < 0) {

      this.xSpeed = this.xSpeed * -1;

    }

​

    if (this.y > height || this.y < 0) {

      this.ySpeed = this.ySpeed * -1;

    }

  }

​

  display() {

    noStroke();

    fill(this.color);

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

  }

​

  move() {

    this.x = this.x + this.xSpeed;

    this.y = this.y + this.ySpeed;

  }

}

​