​

function setup(){

  createCanvas(400, 400, WEBGL);

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

    platforms.push(new Platform())

  }

}

​

function draw(){

  background('lightgrey');

  fill('black')

  stroke('black')

  // borders

  rect(width/2 - 10, -height/2, 10, height)

  rect(-width/2, -height/2, 10, height)

  rect(-width/2, -height/2, width, 10)

  rect(-width/2, height/2 -10, width, 10)

  translate(0, 100)

  stroke('red')

  line(-width/2, 0, width, 2)

  // circle(0, 0, 10)

  stroke('black')

  fill('blue')

  rotateX(1)

  let i = 0

  while (i <= platforms.length - 1){

    platforms[i].update()

    platforms[i].draw()

    if (platforms[i].y > 200){

      platforms.splice(i, 1)

      platforms.push(new Platform())

    } else {

      i += 1

    }

  }

}

​

class Platform {

  constructor() {

    this.x = random(-width/2, width/2)

    this.y = random(-height-200, -height+200)

    this.w = 50

    this.h = 100

  }

  draw(){

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

    // if platform is underneith where ball will go

    if (this.y > -this.h && this.y < 0){

      stroke('white')

      strokeWeight(20)

      line(this.x, 0, this.x + this.w, 0)

      strokeWeight(2)

      stroke('black')

    }

  }

  update(){

    this.y += 4

  }

}