let buildings =[]; //creating an empty array

​

function setup() {

  frameRate(5); //in order to slow down the construction of new buildings (boxes)

  createCanvas(400, 400, WEBGL);//WEBGL allows to create 3D shapes

  background(0);

  camera(100, -200, 400, 0, 0, 0, 0, 1, 0);

  debugMode(GRID);

}

​

function draw() {

  orbitControl();

​

//setting the limits of the range the buildings can be created on the X and Z axis. 

  let randomX = random(-60, 60);

  let randomZ = random(-50, 50);

​

// creating one building at a time and moving it randomly by the X and Z axis. 

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

   translate(randomX, 0, randomZ);

    buildings[i] = new Building(); 

    buildings[i].show();

  }

}

​

//giving the parameters for the buildings with the class. Thus, it has the random width, height and depth in the specified range and the random colors. 

class Building {

  constructor(x, y, z) {

    this.x = random(1, 30);

    this.y = random(20, 200);

    this.z = random(1, 30);

    this.color = color(random(220), random(255), random(200));

  }

  show() {

    stroke(255);

    strokeWeight(1);

    fill(this.color);

    box(this.x, this.y, this.z);

  }

}

​

​