let border;

​

class Particle {

  constructor(x,y,px,py,col,size) {

    this.x = x;

    this.origX = x;

    this.y = y;

    this.origY = y;

    this.px = px;

    this.py = py;

    this.col = color(col);

    this.size = size;

  }

  update() {

    this.x += this.px;

    this.y += this.py;

    if (this.x < border || this.x > width-border || this.y < border || this.y > height-border) {

      if (this.px > 0 && this.x > width-border)

        this.x = this.origX;

      if (this.py > 0 && this.y > height-border)

        this.y = this.origY;

      return false;

    }

    return true;

  }

  draw() {

    noStroke();

    fill(this.col);

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

  }

}

​

function setup() {

  createCanvas(800, 800);

  border = width * 0.01;

  side_particles = [];

  for (let i = border; i >= border/2; i--) {

    let col = 0;

    if (i < border) col = int(map(i,border-1,border/2,0,220));

    let s = int(map(i,border-1,border/2,10,1));

    side_particles.push(new Particle(i,border,1,0,col,s));

    side_particles.push(new Particle(i,height-2*border,1,0,col,s));

  }

  background(220);

}

​

function draw() {

  // background(220);

  for (let i = 0; i < side_particles.length-1; i++) {

    let r = side_particles[i].update();

    if (r) side_particles[i].draw();

  }

}