// Icon credit:<div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>

​

//humindy level 

//temperature 

​

        var angle = 0.0;

    var offset = 220;

    var scalar = 8; //数量

    var speed = 0.04;

        let y; 

​

//data variables        

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

    var apiKey = '&appid=c3769564cbbc64204e7b3b4bfdd5969a'; 

    var units = '&units=';

​

var windspeed;

var humidity;

var temp; 

var weather;

​

var icon;

​

function preload() {  

  Bottle = loadImage( "bottle.png" )

  Clouds = loadImage("weather icons/cloud.png");

  Clear = loadImage("weather icons/sun.png");

  Rain = loadImage("weather icons/rain.png");

  Snow = loadImage("weather icons/snow.png");

  Mist = loadImage("weather icons/haze.png");

  Haze = loadImage("weather icons/foggy.png");

}

function setup() {

    createCanvas(400, 600);

  loadJSON('https://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=c3769564cbbc64204e7b3b4bfdd5969a', gotData,'jsonp');

​

  var button = select ('#submit');

  button.mousePressed(weatherAsk);

  input = select ('#city');

}

​

function weatherAsk () {

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

  loadJSON(url,gotData);

​

    }

function gotData(data) { 

  print(data);

  weather = data; 

    }

​

function draw() {

  background(255);

    var y = 240 + sin(angle) * scalar;

  if(weather) {

    //var windspeed = Number(weather.wind.speed) * 0.1;

    var windspeed = weather.wind.speed*0.04;

    angle += windspeed;

    // icon = weather.weater.main

    // image(icon,130, y, 120, 120);

    var icon = weather.weather[0].main;//.main;

    if (icon=="Clear") {

      var imageShow = Clear;

        }

    if (icon=="Snow") {

      var imageShow = Snow;

        }

    if (icon=="Clouds") {

      var imageShow = Clouds;

        }

    if (icon=="Rain") {

      var imageShow = Rain;

      }

    if (icon=="Mist") {

      var imageShow = Mist;

        }

    if (icon=="Haze") {

      var imageShow = Haze;

        }

    console.log(windspeed,icon);

    image(imageShow,130, y, 120, 120);

  } 

  image(Bottle,90, 170, 200,240);

}