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

var city = "St. Louis";

var APIkey="&appid=1bce8855c246f339b2384bc4e27930a6";

var units="&units=imperial";

​

var wind;

var clouds;

var temp; 

var humidity;

var pressure;

var start;

var currType;

let font, fontsize = 40;

let displayCity = [];

​

var types = [["kuwait", "venezuela", "dallol", "qatar", "nicaragua", "panama", "honduras"],

             ["haiti","guyana", "vietnam", "laos", "thailand"],

             ["vostok", "Denali", "oymyakon", "verkhoyansk", "Moscow"], 

             ["ica", "sudan", "las vegas", "aoulef", "namibia"], 

             ["wellington", "Gruissan", "Seattle", "Boston"], 

             ["anchorage", "fairbanks", "Milan"], 

             ["Philippines", "Indonesia", "Chuuk", "Malaysia"],

            ["Egypt", "libya"]];

​

// function preload() {

//   font = loadFont("font.ttf");

// }

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

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

  var button=select('#submit');

  currType = random(types);

  input = random(currType);

  // textFont(font);

  // textSize(fontsize);

  // textAlign(CENTER, CENTER);

  button.mousePressed(weatherAsk);

}

​

function weatherAsk() {

  currType = random(types);

  input = random(currType);

  city = input;

  // displayCity[0] = createSpan(city);

  var url=api+input+APIkey+units;

  loadJSON(url, gotData);

}

​

function gotData(data) {

  weather=data;

}

​

function draw() {

  background(30, 3, 5);

  if(weather) {

    fill(255);

    let p = document.getElementById("city");

    p.innerHTML = city;

    if(weather.wind.speed == 0) {

      wind = 0.5;

    } else {

      wind = weather.wind.speed;

    }

    clouds = weather.clouds.all;

    temp = weather.main.temp;

    humidity = weather.main.humidity;

    pressure = weather.main.pressure;

    // text(city, 0, 0);

    noFill();

    windy();

    cloudy();

    humid();

    temperate();

  }

​

}

​

function windy() {

  rotateY(millis()/10000*wind);

  stroke(140);

  // translate(0, windowHeight*0.38);

  // cone(wind*10, 100, 20, 8, false);

  // translate(0, windowHeight*-0.3);

  translate(wind, -wind, wind*windowWidth*0.008);

}

​

function cloudy() {

  // translate(clouds, -wind-clouds, wind);

  // translate(wind, wind, wind);

  rotateX((millis()/5000)*clouds/50);

  stroke(255);

  fill(255);

  torus(clouds*2, clouds/4);

  // translate(-clouds, wind+clouds, -wind);

  rotateX((-millis()/5000)*clouds/50);

}

​

function temperate() {

  // translate(temp, -temp/2, wind);

  // translate(-wind, wind, -wind);

  rotateX(-(millis()/5000)*temp/50);

  if(temp > 0) {

    stroke(252, 186, 3);

    fill(252, 186, 3);

    torus(temp*4, temp/4);

  } else {

    stroke(50, 50, 255);

    noFill();

    torus(temp*4, temp/4);

    // fill(255);

  }

  // translate(-temp, temp/2, -wind);

  rotateX((-millis()/5000)*temp/50);

}

​

function humid() {

  // translate(humidity, -humidity, wind);

  // translate(-wind, -wind, -wind);

  rotateX(-millis()/5000*humidity/50);

  stroke(100, 100, 240);

  fill(100, 100, 240);

  torus(humidity*2, humidity/4);

  // translate(-humidity, humidity, -wind);

  rotateX(-millis()/5000*humidity/50);

}