​

let json;

​

let temperature = 0;

let windSpeed = 0;

​

let mappedTemperature = 0;

let mappedWindSpeed = 0;

​

let numBalls = 20;

let spring = 0;

//let spring = 0.005;

let gravity = 0.01;

let friction = -1.0;

let balls = [];

​

let noiseStep = 0.0;

​

let input, button;

let city = "Cleveland";

​

let unknownCity = false;

​

function queryUrl(currentCity) {

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

  let url_end = "&units=imperial&APPID=e812164ca05ed9e0344b89ebe273c141";

  json = loadJSON(url_start + city + url_end, processData);

  console.log("json " + json);

  /*

  if (json.main == null){

    unknownCity = true;

  } else {

    unknownCity = false;

  }

  */

}

​

function processData(){

  /*

  if (unknownCity == true) {

    console.log("unknown")

  }

  */

  temperature = json.main.temp;

  //temperature = 30;

  // speed of animated elements

  windSpeed = json.wind.speed;

  //mappedTemperature = 100;

  mappedTemperature = map(temperature, -10, 110, 0, 255);

  mappedWindSpeed = map(windSpeed, 0, 30, 0.005, 0.3);

  //mappedWindSpeed = map(windSpeed, 0, 30, 0, 255);

  //console.log(mappedTemperature + " " + mappedWindSpeed);

  spring = mappedWindSpeed;

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

    balls[i] = new Ball(

      random(width),

      random(height),

      map(noise(noiseStep),0.0,2.0, 10,80),

      i,

      balls

    );

    noiseStep += 0.1;

  }

}

​

function changeCity(){

  city = input.value();

  queryUrl(city);

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

​

  input = createInput();

  input.position( 10, 10);

​

  button = createButton('change city');

  button.position(input.x + input.width + 5, 10);

  button.mousePressed(changeCity);

​

  queryUrl(city);

  noStroke();

}

​

function draw() {

  background(mappedTemperature, 0, 255-mappedTemperature);

  fill(255, 255, 255, 150);

​

  text(city, 10, 60);

  text("Current temperature: " + temperature, 10, 90);

  text("Current wind speed: " + windSpeed, 10, 120);

  fill(255, 255, 255, 150);

  balls.forEach(ball => {

    ball.collide();

    ball.move();

    ball.display();

  });

}

​

class Ball {

  constructor(xin, yin, din, idin, oin) {

    this.x = xin;

    this.y = yin;

    this.vx = 0;

    this.vy = 0;

    this.diameter = din;

    this.id = idin;

    this.others = oin;

  }

​

  collide() {

    for (let i = this.id + 1; i < numBalls; i++) {

      let dx = this.others[i].x - this.x;

      let dy = this.others[i].y - this.y;

      let distance = sqrt(dx * dx + dy * dy);

      let minDist = this.others[i].diameter / 2 + this.diameter / 2;

​

      if (distance < minDist) {

        let angle = atan2(dy, dx);

        let targetX = this.x + cos(angle) * minDist;

        let targetY = this.y + sin(angle) * minDist;

        let ax = (targetX - this.others[i].x) * spring;

        let ay = (targetY - this.others[i].y) * spring;

        this.vx -= ax;

        this.vy -= ay;

        this.others[i].vx += ax;

        this.others[i].vy += ay;

      }

    }

  }

​

  move() {

    this.vy += gravity;

    this.x += this.vx;

    this.y += this.vy;

    if (this.x + this.diameter / 2 > width) {

      this.x = width - this.diameter / 2;

      this.vx *= friction;

    } else if (this.x - this.diameter / 2 < 0) {

      this.x = this.diameter / 2;

      this.vx *= friction;

    }

    if (this.y + this.diameter / 2 > height) {

      this.y = height - this.diameter / 2;

      this.vy *= friction;

    } else if (this.y - this.diameter / 2 < 0) {

      this.y = this.diameter / 2;

      this.vy *= friction;

    }

  }

​

  display() {

   let size = map(sin(frameCount * 0.01), -1.0, 1.0, this.diameter, this.diameter + 20);

    //console.log(size)

    ellipse(this.x, this.y, size, size);

    //ellipse(this.x, this.y, this.diameter, this.diameter);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/*

{

  "coord":{

    "lon":-74.01,

    "lat":40.71

  },

  "sys":{

    "message":0.2012,

    "country":"US",

    "sunrise":1406540974,

    "sunset":1406592927

  },

  "weather":[

    {

      "id":801,

      "main":"Clouds",

      "description":"few clouds",

      "icon":"02d"

    }

  ],

  "base":"cmc stations",

  "main":{

    "temp":73.45,

    "humidity":83,

    "pressure":999,

    "temp_min":70,

    "temp_max":75.99

  },

  "wind":{

    "speed":4.45,

    "gust":3.6,

    "deg":259

  },

  "rain":{

    "3h":0

  },

  "clouds":{

    "all":24

  },

  "dt":1406559145,

  "id":5128581,

  "name":"New York",

  "cod":200

}

*/