Buildings

let scene;

let buffer;

let bufferSize = 720;

let scrollWidth = 3;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  scene = createGraphics(width + bufferSize + scrollWidth, bufferSize);

  buffer = createGraphics(bufferSize, bufferSize);

  scene.background(255);

}

​

function draw() {

  background(255);

  createBuilding();

  scrollScene();

}

​

function scrollScene(){

  scene.copy(0,0,scene.width,scene.height,

    scrollWidth,0,scene.width,scene.height

  );

  image(scene, -bufferSize, 0);  

}

​

function createBuilding() {

  step = frameCount % (bufferSize / scrollWidth);

  w = bufferSize;

​

  if (step == 1) {

    buffer

      .background(255)

      .clear();

  }

  if (step == 2) {

    buffer

      .strokeWeight(0.1)

      .line(0, w / 2, w, w / 2)

      .line(w / 2, 0, w / 2, w);

  }

  if (step == 3) {

    buffer.noStroke().fill("red");

    for (i = 5; i--; ) {

      x = random(w);

      y = random(w);

      buffer.ellipse(x, y, 1);

    }

  }

  if (step > 3 && step < 54) {

    buffer.stroke(0);

    x1 = int(random(w));

    y1 = int(random(w));

    w1 = int(random(w));

    h1 = int(random(w));

    x2 = int(random(w));

    y2 = int(random(w));

    w2 = int(random(w));

    h2 = int(random(w));

    buffer.copy(x1, y1, w1, h1, x2, y2, w2, h2);

  }

  if (step > 53 && step < 63) {

    buffer.copy(0, 0, w, w, 0, 30, w, w + 30);

  }

  if (step == 64) {

    scene.image(buffer, scrollWidth, 0);

  }

}