//the buidlings appear in random order every time the code runs represnting rapid and random urban growth everywhere

function setup() {

  createCanvas(windowWidth-10, windowHeight-10);

  //background gradient

  let from = color(255);

  let to = color(75,20,50);

  let colorLine = 0;

  for(colorLine; colorLine<height; colorLine++){

//color mix with corrosponding position in relation to height

    position = map(colorLine,0,height,0,1);

    mix = lerpColor(from,to,position);

    stroke(mix); //draw line with new color

    line(0,colorLine,width,colorLine);

  }

​

  fill(255,255,255,20);

  noStroke();

  ellipse(width/2,height/6,600,400); 

​

  rectMode(CENTER);

  frameRate(5);//slower animation

}

let x = 0;

let y = 0;

let t = 0;

let h = 0;

let c = 0;

​

function draw() {

​

  //buildings color

  col2 = map(noise(t),0,1,100,200);

  fill(col2);

  t += 1;

  //draw buildings of random size

  y = height;

  if(x<=width){

    rect(x,y,random(30,70),random(50,200));

    x += random(20,70);

  }

  //night and day element experiment 1

  //c = map(mouseX,0,width,0,255);

  //fill(250,235,c,63);

  //rect(width/2,height/6,width,height/3);

​

   //night and day element experiment 1

  h = map(mouseX,0,width,255,0);

  fill(h);

  circle(width/2,height/6,100);   

}

​

function windowResized(){

  resizeCanvas(windowWidth-10,windowHeight-10);

}