var yPos = [];

var bgColor = 200;

var isDay = true;

​

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(bgColor);

  stroke(227);

  randomRain();

  streetLamp(300, 375,200);

  noStroke();

  fill(0);

  rect(0,360,400,40);

  fill(255,251,166,30);

  arc(260, 292, 157,157,PI/3,2*PI/3,OPEN);

  stroke(0,0,0,50);

  strokeWeight(1);

  line(220, 360, 320, 360);

​

  person(250, 300, 50);

  if(bgColor < 200 && bgColor >= 0 && isDay) {

    bgColor -= 0.1;

  } else if (bgColor < 0) {

    bgColor += 0.1;

    isDay = false;

  } else if (bgColor < 200 && bgColor > 0 && !isDay) {

    bgColor += 0.1;

  } else {

    bgColor -= 0.1;

    isDay = true;

  }

}

​

function randomRain() {

    strokeWeight(1);

    xPos.push(Math.floor(random(-150,500)/5)*5);

    yPos.push(0);

    yPos.push(0);

    xPos.push(Math.floor(random(-150,500)/5)*5);

​

​

  for (let i = 0; i < xPos.length; i++) {

    if (yPos[i] > 600) {

      yPos.splice(i,1);

      xPos.splice(i,1);

    }

  }

  push();

  rotate(-PI/8);

  for (let i = 0; i < xPos.length; i++) {

    line(xPos[i], yPos[i], xPos[i], yPos[i] - 50);

    yPos[i] += 5;

  }

  pop();

}

​

function streetLamp(baseX, baseY, height) {

  //pole

  noStroke();

  fill(0);

  rect(baseX, baseY, 30,10);

  rect(baseX+5, baseY-10, 20,10);

  rect(baseX+10,baseY-(10+height), 10, height);

  arc(baseX+15, baseY-(10+height), 10,10, PI, 0);

  //lamp+hanging bar

  stroke(0,0,0);

  strokeWeight(6);

  noFill();

  arc(baseX-15, baseY-(height-40),100,100,4*PI/3,5*PI/3);

  //arc(baseX+45, baseY-(height-40),100,100,4*PI/3,5*PI/3);

  strokeWeight(3);

  line(baseX-40, baseY-(height-20), baseX-40, baseY-(height));

  noStroke();

  let a = 250;

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

    fill(255, 251, 166, a);

    ellipse(baseX-40, baseY-(height-30), 30+i*5,30+i*5);

    a -= 50;

  }

  //spotlight

  fill(255,251,166,50);

  beginShape();

  vertex(baseX-60, baseY-(height-30));

  vertex(baseX-20, baseY-(height-30));

  vertex(baseX, baseY+10);

  vertex(baseX-80, baseY+10);

  endShape();

}

​

function person(headX, headY, height) {

  noStroke();

  fill(0);

  rect(headX-6,headY+11, 12, 2*height/3, 5);

  rect(headX-4.5, headY+(11+height/2), 9, height/2);

  rect(headX-2,headY+7,5,6);

  ellipse(headX, headY+2, 11, 14);

  //umbrella

  beginShape();

  vertex(headX-42, headY-10);

  bezierVertex(headX-32, headY-40, headX+8, headY-40, headX+18, headY-10);

  endShape();

  stroke(0);

  strokeWeight(2);

  line(headX-12, headY-15, headX-12, headY+25);

  //arm

  strokeWeight(3);

  line(headX-5, headY+15, headX-7, headY+27);

  line(headX-7, headY+27, headX-12, headY+15);

  line(headX+6, headY+15, headX+8, headY+35);

}