​

var weather;

​

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

var apiKey = '&appid=b233a960f42a92363960980b4c4b796b';

var units = '&units=metric';

​

var input;

​

function setup() {

  createCanvas(600, 600);

  var button = select('#go');

  button.mousePressed(weatherAsk);

  input = select('#city');

}

​

function weatherAsk(){

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

  loadJSON(url, gotData);

}

​

function gotData(data){

  // println(data);

  weather = data;

}

​

function draw() {

  fill(255);

  background(random(0,70), 140, 240);

  noStroke();

  if (weather) {

    ellipse(180, 250, weather.main.temp, weather.main.temp);

    ellipse(420, 250, weather.main.humidity, weather.main.humidity);

  }

  push();

  textAlign(CENTER, CENTER);

  fill(250);

  textFont('Helvetica');

  textSize(25);

  text('🌡 Temperature', 180, 430);

  text('💧 Humidity', 420, 430);

  pop();

}