var desc;

var nclouds;

var stroketemp;

var strokewind;

var winddirection;

var windspeed;

var x = 0;

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

apiKey =

  "&exclude=hourly,daily&units=metric&appid=8ffe55f11a95b5201fb8ab538c365a4e";

var input;

var position = Array();

var leaves;

​

function preload() {

  leaves = loadImage("leaf.png");

  windimg = loadImage("wind.png");

  clouds = loadImage("cloud.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100);

​

  input = createInput();

  input.position(20, 65);

​

  button = createButton("submit");

  button.position(input.x + input.width, 65);

  button.mousePressed(loc);

​

  place = createElement("h2", "what is your location?");

  place.position(20, 5);

​

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

    position[i] = createVector(random(0, width), random(0, height));

  }

  wind = createVector();

  clouds = createVector();

}

​

function loc() {

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

  loadJSON(url, gotData);

  place.html("Welcome to " + input.value() + ", here are your weather stats:");

}

​

function gotData(data) {

  weather = data;

  currenttemp = weather.main.temp + "Cº";

  tempcolour = 200 + 3.2 * (weather.main.temp + 15);

  nclouds = weather.clouds.all;

  winddirection = weather.wind.deg;

  windspeed = (weather.wind.speed * 3.6) / 50;

}

​

function draw() {

  background(200, 99, 50);

​

  if (weather) {

    background(200, 99, 100 - nclouds / 2);

    noStroke();

  }

    /* if (340 > winddirection<20) {

      text("N", (width / 4) * 3, (height / 7) * 3);

    }

    else if (70 > winddirection > 20) {

      text("NE", (width / 4) * 3, (height / 7) * 3);

    }

    else if (110 > winddirection > 70) {

      text("E", (width / 4) * 3, (height / 7) * 3);

    }

    else if (160 > winddirection > 110) {

      text("SE", (width / 4) * 3, (height / 7) * 3);

    }

    else if (200> winddirection > 160) {

      text("S", (width / 4) * 3, (height / 7) * 3);

    }

    else if (250 > winddirection > 200) {

      text("SW", (width / 4) * 3, (height / 7) * 3);

    }

    else if (290 > winddirection > 250) {

      text("W", (width / 4) * 3, (height / 7) * 3);

    }

    else if (340 > winddirection > 290) {

      text("NW", (width / 4) * 3, (height / 7) * 3);

    }

  */

  if (weather) {

    fill(0, 0, 100);

    ellipse(x, width / 8, width / 8);

    ellipse(x - width / 10, width / 8, width / 8);

    ellipse(x - width / 7, width / 8, width / 10);

    ellipse(x - width / 9, width / 11, width / 10);

    ellipse(x - width / 16, width / 11, width / 10);

    ellipse(x - width / 16, width / 7, width / 9);

​

    ellipse(x- width/6 - width/2,width/5 + width / 8, width / 8);

    ellipse(x- width / 10- width/2,width/5 + width / 8, width / 8);

    ellipse(x- width / 7- width/2,width/5 + width / 8, width / 10);

    ellipse(x- width / 9- width/2,width/5 + width / 11, width / 10);

    ellipse(x- width / 16- width/2,width/5 + width / 11, width / 10);

    ellipse(x- width / 16- width/2,width/5 + width / 7, width / 9);

    if (x > width + width/2) {

      x = -50;

    }

    if (x >= -50) {

      x += windspeed;

    }

​

    noStroke();

    fill(0, 0, 100);

    textSize(30);

    textAlign(CENTER, CENTER);

    text(currenttemp, width / 4, (height / 7) * 3);

    text(winddirection, (width / 4)*3, (height / 7) * 3);

    print(winddirection);

​

​

    stroketemp = tempcolour;

    strokewind = 90 - weather.wind.speed * 3.6;

    cloudcolour = (100, 100, nclouds);

  } else {

    stroketemp = 290;

    strokewind = 120;

    cloudcolour = (100, 10, 10);

    fill(0, 0, nclouds);

    text("temp", width / 4, (height / 7) * 3);

    text("direction", (width / 4) * 3, (height / 7) * 3);

  }

​

  push();

  noStroke();

  fill(80, 80, 90);

  rect(0, (height / 3) * 2, width, height / 2);

  pop();

​

  strokeWeight(10);

  noFill();

  stroke(stroketemp, 100, 100);

  ellipse(width / 4, (height / 7) * 3, width / 3, width / 3);

  stroke(strokewind, 100, 100);

  ellipse((width / 4) * 3, (height / 7) * 3, width / 3, width / 3);

​

  fill(0, 0, nclouds);

  noStroke();

  textSize(40);

  textAlign(CENTER, CENTER);

​

  if (weather) {

    var degree = PI / radians(weather.wind.deg);

    wind = p5.Vector.fromAngle(degree);

​

    var speed = weather.wind.speed * 2;

    if (weather.main == "Rain") {

      fill(200, 100, 100);

    } else if (weather.main == "Snow") {

      fill(200, 70, 50);

    } else {

      noFill();

    }

​

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

      position[i].add(wind);

​

      noStroke();

      ellipse(

        position[i].x * speed,

        position[i].y * speed,

        width / 100,

        width / 100

      );

      if (position[i].x > width) position[i].x = 0;

      if (position[i].x < 0) position[i].x = width;

      if (position[i].y > height) position[i].y = 0;

      if (position[i].y < 0) position[i].y = height;

    }

  }

}

​