var location;

var tempcolour;

var currenttemp;

var lattitude;

var longditude;

var city ;

var wapi = 'http://api.openweathermap.org/data/2.5/weather?lat=';

var wapirest = '&exclude=hourly,daily&units=metric&appid=8ffe55f11a95b5201fb8ab538c365a4e';

var locapi='http://api.openweathermap.org/geo/1.0/direct?q=';

var locapirest='&limit=5&appid=4e5e8412185f92bad08a35ecfa9b3f33';

function setup() {

  createCanvas(windowWidth,windowHeight);

  colorMode(HSB, 360, 100, 100); 

  input = createInput();

  input.position(20, 65);

​

  button = createButton('submit');

  button.position(input.x + input.width, 65);

  button.mousePressed(loc);

​

  place = createElement('h2', 'what is your location?');

  place.position(20, 5);

​

  textAlign(CENTER);

  textSize(50);

}

function loc() {

  place.html('Welcome to ' + input.value() + ' here are your weather stats:');

  input.value('');

}

​

function locData(locdata) {

  var urlloc = (locapi+input.value()+locapirest);

  loadJSON(urlloc,locData);

  location = locdata;

  lattitude= location.name.lat + '&lon=';

  longditude = location.name.lon ;

}

​

function wData(wdata) {

  var urlw = wapi+lattitude+longditude+wapirest;

  loadJSON(urlw,wData);

  weather = wdata;

  tempcolour= 200+3.2*(weather.current.temp+15);

  currenttemp = weather.current.temp +'ºC';

}

​

function draw() {

  background(220);

  print(lattitude)

  //temprature

  {

  if(weather){

    fill(tempcolour, 100, 100)

    noStroke();

  ellipse(width/2,height/2,width/2,height/2); 

    fill(0,0,0)

    textSize(40)

    textAlign(CENTER,CENTER)

    text(currenttemp,width/2,height/2) 

}

}

}