​

var weather;

// var pollution;

​

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

var apiKey = '&APPID=d5a50eac6c0e8c4940f46a930c9e7b94';

var units = '&units=metric';

var input;

var button;

​

// var api2 = 'http://api.openweathermap.org/data/2.5/air_pollution?';

// var apiKey2 = '&APPID=d5a50eac6c0e8c4940f46a930c9e7b94';

​

​

var ball = {

  x: 300,

  y: 200,

  xspeed: 4,

  yspeed: -3

}

​

var ball2 = {

  x: 400,

  y: 100,

  xspeed: -6,

  yspeed: 3

}

​

var ball3 = {

  x: 200,

  y: 200,

  xspeed: -4,

  yspeed: 4

}

​

var ball4 = {

  x: 350,

  y: 300,

  xspeed: 5,

  yspeed: 5

}

​

var ball5 = {

  x: 200,

  y: 500,

  xspeed: -3,

  yspeed: -4

}

​

var ball6 = {

  x: 100,

  y: 100,

  xspeed: -2,

  yspeed: -3

}

​

var ball7 = {

  x: 150,

  y: 450,

  xspeed: 4,

  yspeed: 3

}

​

var ball8 = {

  x: 150,

  y: 250,

  xspeed: -5,

  yspeed: -4

}

​

function setup() {

  createCanvas(600, 600);

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

​

  // var button = select('#submit');

  // button.mousePressed(weatherAsk);

  // input = select('#city');

​

  input = createInput();

  input.position(10, 10);

​

  button = createButton('submit');

  button.mousePressed(weatherAsk);

  button.position(190, 10);

  altTxt = "";

​

  // 2 button 

  //   input = createInput();

  //   input.position(10, 40);

​

  //   button2 = createButton('submit');

  //   button2.mousePressed(weatherAsk2);

  //   button2.position(160, 40);

  //   altTxt2 = "";

​

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

  // loadJSON(url, gotData); 

}

​

function weatherAsk() {

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

  loadJSON(proxyurl + url, gotData);

  // loadJSON(url, gotData);

}

​

// function weatherAsk2() {

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

//   loadJSON(proxyurl + url, gotData);

// }

​

function gotData(data) {

  // println(data);

  weather = data;

  // pollution = data;

}

​

function draw() {

  frameRate(0.4);

  background(30);

  if (weather) {

    var temp = weather.main.temp;

    var humidity = weather.main.humidity;

    var pressure = weather.main.pressure;

    var feels_like = weather.main.feels_like;

    var wind_speed = weather.wind.speed;

    var clouds = weather.clouds.all;

    var lon = weather.coord.lon;

    var lat = weather.coord.lat;

    push();

    // noStroke();

    // noFill();

    strokeWeight(0.2);

    stroke(random(255), random(255), random(255));

    fill(random(255), random(255), random(255), 80);

    ellipse(ball2.x, ball2.y, temp * 7, temp * 7);

    ellipse(ball.x, ball.y, humidity * 2, humidity * 2);

    ellipse(ball3.x, ball3.y, pressure / 10, pressure / 10);

    ellipse(ball4.x, ball4.y, feels_like * 5, feels_like * 5);

​

    ellipse(ball5.x, ball5.y, wind_speed * 10, wind_speed * 10);

    ellipse(ball6.x, ball6.y, clouds, clouds);

    ellipse(ball7.x, ball7.y, lon * 2, lon * 2);

    ellipse(ball8.x, ball8.y, lat * 2, lat * 2);

    pop();

    push();

    fill(200);

    text('temperature', ball2.x-30, ball2.y+3);

    text('humidity', ball.x-20, ball.y+3);

    text('pressure', ball3.x-20, ball3.y+3);

    text('feels like', ball4.x-10, ball4.y+3);

    text('wind speed', ball5.x-20, ball5.y+3);

    text('clouds', ball6.x-20, ball6.y+3);

    text('lontitute', ball7.x-30, ball7.y+3);

    text('latitude', ball8.x-20, ball8.y+3);

    text('lontitute', 5, height - 40, width, 30);

    text('latitude', 65, height - 40, width, 30);

    pop();

    push();

    fill(255, 0, 0);

    text(lon, 5, height - 20, width, 30);

    text(lat, 65, height - 20, width, 60);

    pop();

​

    if (ball.x > width || ball.x < 0) {

      ball.xspeed = ball.xspeed * -1;

    }

    if (ball.y > height || ball.y < 0) {

      ball.yspeed = ball.yspeed * -1;

    }

    ball.x = ball.x + ball.xspeed;

    ball.y = ball.y + ball.yspeed;

​

​

    if (ball2.x > width || ball2.x < 0) {

      ball2.xspeed = ball2.xspeed * -1;

    }

    if (ball2.y > height || ball2.y < 0) {

      ball2.yspeed = ball2.yspeed * -1;

    }

    ball2.x = ball2.x + ball2.xspeed;

    ball2.y = ball2.y + ball2.yspeed;

​

​

    if (ball3.x > width || ball3.x < 0) {

      ball3.xspeed = ball3.xspeed * -1;

    }

    if (ball3.y > height || ball3.y < 0) {

      ball3.yspeed = ball3.yspeed * -1;

    }

    ball3.x = ball3.x + ball3.xspeed;

    ball3.y = ball3.y + ball3.yspeed;

​

​

    if (ball4.x > width || ball4.x < 0) {

      ball4.xspeed = ball4.xspeed * -1;

    }

    if (ball4.y > height || ball4.y < 0) {

      ball4.yspeed = ball4.yspeed * -1;

    }

    ball4.x = ball4.x + ball4.xspeed;

    ball4.y = ball4.y + ball4.yspeed;

​

​

    if (ball5.x > width || ball5.x < 0) {

      ball5.xspeed = ball5.xspeed * -1;

    }

    if (ball5.y > height || ball5.y < 0) {

      ball5.yspeed = ball5.yspeed * -1;

    }

    ball5.x = ball5.x + ball5.xspeed;

    ball5.y = ball5.y + ball5.yspeed;

​

​

    if (ball6.x > width || ball6.x < 0) {

      ball6.xspeed = ball6.xspeed * -1;

    }

    if (ball6.y > height || ball6.y < 0) {

      ball6.yspeed = ball6.yspeed * -1;

    }

    ball6.x = ball6.x + ball6.xspeed;

    ball6.y = ball6.y + ball6.yspeed;

​

​

    if (ball7.x > width || ball7.x < 0) {

      ball7.xspeed = ball7.xspeed * -1;

    }

    if (ball7.y > height || ball7.y < 0) {

      ball7.yspeed = ball7.yspeed * -1;

    }

    ball7.x = ball7.x + ball7.xspeed;

    ball7.y = ball7.y + ball7.yspeed;

​

​

    if (ball8.x > width || ball8.x < 0) {

      ball8.xspeed = ball8.xspeed * -1;

    }

    if (ball8.y > height || ball8.y < 0) {

      ball8.yspeed = ball8.yspeed * -1;

    }

    ball8.x = ball8.x + ball8.xspeed;

    ball8.y = ball8.y + ball8.yspeed;

​

​

  } // end weather

//   if (pollution){

//     var co = pollution.list.components.co;

//     var no = pollution.list.components.no;

//     var no2 = pollution.list.components.no2;

//     var o3 = pollution.list.components.o3;

//     var so2 = pollution.list.components.so2;

//     var pm2_5 = pollution.list.components.pm2_5;

//     var pm10 = pollution.list.components.pm10;

//     var nh3 = pollution.list.components.nh3;    

//     // text('co', 5, height - 40, width, 30);

//   } // end pollution

} // end draw