var w; //individual pipe width

var pipes = [];

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  w = width / (step + 2);

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

    pipes[i] = new Pipe(w / 2 + (w + 5) * i,  height / 2 + i * height / (2 * step));

  }

}

​

function draw() {

  background(0);

  //num of pipes displayed, controlled by mouseX

  var num = 1 + floor((mouseX - w / 2) / (w + 5));

  num = constrain(num, 0, step);

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

    pipes[i].display();

  }

}

​

class Pipe {

  constructor(_x, _h) {

    this.x = _x;

    this.h = _h;

  }

  display() {

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

      noStroke();

      fill(0 + i * (255 / 10));

      rect(this.x, height/2, w - 3 * i, this.h - 3 * i);

    }

  }

}