var screenWidth;

var screenHeight;

​

function setup() {

  screenWidth = 125;

  screenHeight = 240;

  createCanvas(screenWidth, screenHeight);

  rectMode(CENTER);

  angleMode(DEGREES);

  background(0);

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

    let newLine = new Line();

    lines.push(newLine);

  }

  noStroke();

  fill(255,255,255,100);

}

​

function draw() {

  background(0);

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

    lines[i].update();

    lines[i].display();

  }

}

​

class Line {

  constructor() {

    this.w = 50;

    this.h = 2;

    this.angle = random(-30,30);

    this.speed = 10;

    this.x = random([0,1]);

    if (this.x == 0) {

      this.direction = 'right';

      this.moveX = -this.w/2;

    }

    else {

      this.direction = 'left';

      this.moveX = width + this.w/2;

    }

    this.y = random(25,height-25);

  }

​

  display() {

    push();

    translate(width/2, height/2);

    rotate(this.angle);

    translate(-width/2, -height/2);

    translate(this.moveX,0);

    rect(this.x,this.y,this.w,this.h);

    pop();

  }

  update() {

    if (this.direction == 'right' && this.moveX > width+this.w/2) {

      this.direction = 'left';

      this.y = random(25,height-25);

    }

    if (this.direction == 'left' && this.moveX < -this.w/2) {

      this.direction = 'right';

      this.y = random(25,height-25);

    }

    if (this.direction == 'right') {

      this.moveX += this.speed;

    }

    else {

      this.moveX -= this.speed;

    }

  }

}