City

//Intenta representar una ciutat

let x = 0;

function setup() {

  //Inicialitzar

  createCanvas(windowWidth/1.5, windowHeight);

  background(100);

  noStroke();

  //Set mode a cantonada per dibuixar el cel

  rectMode(CORNER);

  //Li envio la coordenada de mitja pantalla i el valor que em servirà per interpolar entre colors

  drawSky(height/2, 1);

    //stars

  let num_stars = random (30,40);

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

    fill(243,189,187);

    let size_stars = random(3,10);

    rect(random(width), random(height/2), size_stars, size_stars);

  }

  //Creació del sol

  drawSun(width/1.2, height/4 -height/30, height/1.3, 0);

​

  rectMode(CORNER);

    //Bridge

  let cont = 0;

  let opac = 150;

  let _inter = 1;

​

  for(let i = height*0.6; i < height; i += 70){

    let to = color(236, 142, 160);

    let from = color(7, 19, 28);

    let _col = lerpColor(from, to, _inter);

    _inter -= 1/5;

    opac-=30;

    fill(_col);

    rect(0, i, width, 15+cont*5);

    //Decoració

    x = 0 + random(50,200);

    while(x < width){

      //Columnes

      rect(x, i, (60+cont*15)/2, height);

      rect(x-(60+cont*15)/2 , i + (15+cont*15)/2,((60+cont*15)/2)*3, (40+cont*10)/2);

​

      //Barana

      let x2= 0;

      while (x2 < width){

        rect(x2, i-(10+cont*8), width/5, (10+cont*10)/4);

        let margin = (width/5)-((10+cont*5)/2);

        for (let n = 0; n < 8; n++){

          rect(x2, i-(10+cont*8),(10+cont*5)/2,10+cont*10);

          x2+= margin/7;

        }

        x2+=20;

      }

      //Comunicació

      let com_x = 0;

      while(com_x < width){

        rect(com_x, i-180+cont*5, (20+cont*5)/2, 180+cont*5);

        rect(com_x - (120+cont*3)/6, i-180+cont*5, (100+cont*3)/2, 5+cont*1.5);

        rect(com_x - (120+cont*3)/6, i-165+cont*5, (100+cont*3)/2, 5+cont*1.5);

        com_x+= 400;

      }

      //Farola 

      let farola = 50*cont;

      while(farola < width){

          rect(farola, i-(100+cont*8), 5+cont*2, 100+cont*10);

          rect(farola, i-(100+cont*8), 10+cont*2, 5+cont*3);

          rect(farola+5+cont*2, i-(100+cont*8)-(5+cont*2), 15+cont*2, 5+cont*2);

          fill(255);

          rect(farola+(10+cont*2)/2, i-(100+cont*8)+(5+cont*2)/2, 10+cont*2, (5+cont*3)/2);

          rect(farola+(10+cont*2)/2+(10+cont*2)/2, i-(100+cont*8), (10+cont*2), (5+cont*3)/2);

          farola += 250;

          fill(_col);

      }

      //Building

      x += 400;

    }

    drawBuildings(cont, height/2, opac, 5-cont, _col);

    cont+=0.7;

  }

}

function drawBuildings(min, max, opac, veins, _col){

      let build_x = random(-300,300);

      fill(_col);

      while (build_x < width){

        let neighbours = random(0,  veins);

        for(let j = 0; j < neighbours; j++){

          let build_size_x = random(200,250)-20*min;

          let build_size_y = random(400,600);

          let aux = build_size_y-50*min;

          rect(build_x, height - aux, build_size_x, aux);

          //Finestres

          build_x += build_size_x;

        }

        build_x += random(300-50*min,400-50*min);

      }

}

function drawSky(_y, _inter){

  //Preparo el gradient de colors

  let to = color(255, 190, 162);

  let from = color(172, 145, 202);

  let _col = lerpColor(from, to, _inter);

  _inter -= 1/10;

  //dibuixo el cel

  fill(_col);

  rect(0,_y-(height/30), width, (height/30));

  //Setejo les noves coordenades del futur rectangle

  _y = _y - (height/30);

  //De forma recursiva omplo el cel

  if(_y>0){

    drawSky(_y, _inter);

  }

  else{

  //Un cop acabo d'omplir el cel, creo un rectangle just a la intersecció entre cel-mar per destacar la il.luminació del sól

    fill(to);

    rect(0,height, width, -height/2);

  }

}

​

function drawSun(_x, _y, _s, _fade){

  //Molt semblant a l'anterior funció, en lloc de fer un gradient, es fa un fade.

  fill(255,240,185,_fade);

  ellipse(_x, _y, _s, _s);

  //Es redueix el tamany de les ellipses creades

  _s = _s/1.08;

  _fade = _fade +5;

  if(_s>50){

    drawSun(_x, _y, _s, _fade)

  }

  else{

    //Un cop s'han creat tots els halos de llum que s'originen pel sól, es crea una elipse amb 255 d'alpha.

    fill(255,243,197,255);

    _s = _s*6;

    ellipse(_x, _y, _s, _s);

    sun_size = _s;

  }

​

}