var url = 'https://api.openweathermap.org/data/2.5/weather?q=toronto&appid=b71c7a9022f0d952d1367526279a1fa4&units=metric'

​

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

var apiKey = '&appid=b71c7a9022f0d952d1367526279a1fa4';

var city = ['blacksburg','new york', 'shaanxi','beijing','chicago']

var units = '&units=metric';

​

​

// var url2 = 'https://api.openweathermap.org/data/2.5/weather?q=shaanxi&appid=b71c7a9022f0d952d1367526279a1fa4&units=metric'

​

var condition;

var input;

​

let xC = [];

let yC = [];

let img;

let img2;

​

​

let data;

let clouddata;

let clouds=[];

let cloud;

​

function preload(){

  data=loadJSON(url);

  // data2 = loadJSON(url2);

  img = loadImage('49900534-bella-unico-nube-bianca-isolato-su-sfondo-nero-1.png');

  img2 = loadImage('shui.png');

}

function setup() {

  createCanvas(600, 400);

  console.log(data);

  clouddata= data.clouds.all;

  console.log(clouddata);

  cloud = new Clouds(random(width),random(height),255,10);

  for(let i =0;i<clouddata-1;i++){

    let temp = data.main.temp;

    let humid = data.main.humidity;

    clouds.push(new Clouds(random(width),random(height),color(200,100),random(40,120),random(-0.5,0.5), random(-0.5,0.5)));

  }

    for(let i = 0; i < 100; i ++){

  xC[i] = random(0,width);

  yC[i] = random(0,height);

}

}

​

​

function draw() {

  background(20);

  fill(255,100)

  rect(20,0,150,190)

  fill(255);

  textSize(32);

  text('Toronto', 30, 30);

  text(clouddata + "%",30,170)

​

  // if (condition) {

​

  for(let i =0;i<clouddata-1;i++){

​

    // var clouds = condition.clouds.all

    // let current = data.current.condition.weather[0].main;

    clouds[i].display();

    clouds[i].update();

    clouds[i].bounce();

  }

  // cloud.display();

  //humidity

    for(let i = 0; i < 100; i ++){

      noStroke();

      fill(0,122,130);

      ellipse(xC[i],yC[i],10,10);

        }

​

  fill(255);

  text(data.main.temp,30,100);

​

​

}

​

​

​

class Clouds{

  constructor(x,y,c,r,speedX, speedY){

    this.x=x;

    this.y=y;

    this.c=c;

    this.r=r;

    this.speedX = speedX;

    this.speedY = speedY;

  }

  display(){

    noStroke();

    fill(this.c);

    image(img,this.x,this.y,this.r,this.r);

  }

  update(){

    this.x+=this.speedX;

    this.y+=this.speedY;

  }

    bounce() {

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

      this.speedX = -this.speedX;

    }

​

    if (this.y < 0 || this.y > width) {

      this.speedY = -this.speedY;

    }

  }

}