var rain = [];

var sun = [];

var snowflakes = []; 

var nDrops = 800;

​

//create variables for wind

var wSpeed =0.08;

var angle = 0.0;

var scalar = 8;

var imgWave;

​

var windspeed;

var humidity;

var temp; 

var weather;

​

var icon;

​

    var offset = 220;

    var speed = 0.02;

  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;

​

//preload images for display

function preload() {

  //weather images 

  clouds = loadImage ("Icons/cloud.png");

  sunny = loadImage ("Icons/sun.png");

  mist = loadImage ("Icons/mist.png");

  lightsun = loadImage ("Icons/lightsun.png");

  sky = loadImage ("Icons/sky.png");

  fog = loadImage("Icons/fog.png");

  //welcome page

  intro = loadImage ("Icons/weatherInJar.png");

}

​

​

function setup() {

  createCanvas(400,600);

  background (0);

  imageMode(CENTER);

  // gather data from openweathermap

  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');

//  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');

​

  //prepare rain effect 

  for (i = 0 ; i < nDrops; i ++ ) {

    rain.push(new Rain(nDrops,wSpeed));

  }

  sun.push(new Clear(wSpeed,imgWave))

}

​

//for some reason, the function (the same) I put in weather folder won't work

function weatherAsk () {

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

  loadJSON(url,gotData);

​

 }

function gotData(data) { 

  print(data);

  weather = data; 

 print('inside gotData')

 }

​

​

function draw() {

 // print('helloworld')

  background(0);

    image(intro,width/2,height/2,400,500);

​

//    //wind speed 

//     var imgWave = sin(angle)*scalar;

//     angle += wSpeed;

//  image(clouds,width/4,height*1/12-10+imgWave,width/2,height/2.2);

  //wind speed 

 // print(weather)

  if (weather) {

    clear();

    background(0);

    imageMode(CENTER)

    //set wind speed based on API data

    var wSpeed = weather.wind.speed*speed;

    print(wSpeed)

    angle += wSpeed;

    var imgWave = sin(angle)*scalar;

    let t = frameCount / 60;

    //detect weather condition, find the information from the first array

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

    //icon = "Mist";

    print(icon)

    if (icon =="Clear") { 

      sun[0].display(wSpeed,imgWave);

            sun[0].light(wSpeed,imgWave);

    } else if (icon == "Rain") {

         rain.forEach(function(d) {

        d.drawAndDrop();

       });

      image(clouds,width/2,height/2.5+imgWave,width/2,height/2.2);

    } else if (icon == "Snow"){

      for (var i = 0; i < random(7); i++) {

        snowflakes.push(new Snow()); // append snowflake object

  }

​

  // loop through snowflakes with a for..of loop

  for (let flake of snowflakes) {

    flake.update(t); // update snowflake position

    flake.display(); // draw snowflake

  }

      image(clouds,width/2,height/2.5+imgWave,width/1.8,height/2);

    } else if (icon == "Mist"){

      image(lightsun,width/2,height/2.2+imgWave,300,400);

      image(mist,width/2,height/2,width,height);

    } else if (icon == "Fog"){

      image(lightsun,width/2,height/2.2+imgWave,300,400);

      image(fog,width/2,height/2,width,height);

    } else if (icon == "Clouds"){

      image(sunny,width/2,height/2.2,300,400);

        image(clouds,width/2,height/2.5+imgWave,width/2,height/2.2);

    } 

        else {

      image(intro,width/2,height/2-10+imgWave,300,400);

    }

  }

}