let y1=0;

​

let api = 'https://api.openweathermap.org/data/2.5/weather?q=';

let apiKey = '&appid=37ab60c99201289a82dd3461ccee3956';

let units = '&units=metric';

​

let weather;

​

function setup() {

  createCanvas(600, 600);

​

  let button = select('#submit');

  button.mousePressed(weatherAsk);

  input = select('#city');

}

​

function weatherAsk() {

  let url = api + input.value() + apiKey + units;

  loadJSON(url, gotData);

}

​

function gotData(data) {

  weather = data;

}

​

function draw() {

  push();

  if(x1<600&&y1<600){ //wallpaper grid

   for(let aa=0; aa<30; aa++){

    x1=0;

   for(let bb=0; bb<30; bb++){

    push()

    fill(240, 203, 200)

    strokeWeight(2);

    stroke(248, 242, 237);

    rect(x1, y1, 20, 20);

    x1=x1+20;

    pop()

    }

    y1=y1+20;

  }

}

  translate(-20, 80);

  noStroke();

  fill(184, 122, 90); //carpet

  rect(10, 360, 620, 300);

  fill(197, 147, 103);//desk body exterior

  rect(80, 300, 210, 200); //drawer

  rect(490, 300, 30, 200); //desk leg

  push();

  fill(147, 98, 54);

  quad(470, 300, 470, 465, 490, 497, 490, 300); //leg shadow

  pop();

  push()

  noStroke();

  rect(80, 300, 440, 30); //desk structure

  fill(153, 151, 150);

  pop();

  fill(147, 98, 54);

  quad(80, 300, 520, 300, 470, 250, 130, 250); //desk top

  line(80, 300, 80, 350); //desk exterior outlines

  line(520, 300, 520, 350);

  line(290, 330, 490, 330);

  fill(153, 151, 150); //computer

  rect(320, 140, 130, 100); //monitor

  rect(375, 240, 20, 30);

  rect(320, 260, 130, 15);

  push();

  noStroke();

  rect(376.5, 250, 17, 15);

  pop();

  fill(80, 70, 125);

  rect(330, 150, 110, 80); //screen

  fill(255); //calendar

  rect(235, 225, 55, 40);

  fill(38, 173, 110);

  rect(240, 230, 45, 30)

  rect(235, 222, 55, 4);

  fill(72, 103, 199); //cup

  rect(188, 238, 30, 40, 8);

  fill(11, 64, 38); //cactus

  ellipse(135, 195, 15, 30);

  ellipse(165, 183, 15, 25);

  ellipse(150, 200, 25, 70);

  fill(175, 57, 54);

  rect(127, 215, 45, 55, 10);

  pop();

  push();

  stroke(197, 147, 163);

  strokeWeight(4);

  fill(202, 224, 235);

  rect(100, 50, 400, 150);

  text('it feels like', 340, 250, 70,50);

  noStroke();

  // text('22.15', 228, 325, 5);

  pop();

​

  if (weather) {

    noStroke();

    temp = weather.main.temp;

    tempColor = map(temp, 0, 30, 40, 250);

    fill(tempColor, tempColor, 255 - tempColor) ;

    noStroke();

    rect(100, 50, 400, 150);

    fill(255);

    text(weather.main.feels_like + '°C', 348, 270, 70,50)

    text(weather.description, 350, 300, 70, 50);

    text(weather.main.temp_max, 228, 325, 5);

    push();

    textSize(9);

    text('°C', 250, 335, 5)

    pop();

  }

}