​

let json;

​

let temperature = 0;

let windSpeed = 0;

​

let mappedTemperature = 0;

let mappedWindSpeed = 0;

​

let numBalls = 20;

let spring = 0;

let gravity = 0.01;

let friction = -1.0;

let balls = [];

​

let noiseStep = 0.0;

​

let input, button;

​

let city;

​

function queryLocation() {

  let location_url = 'https://api.ipregistry.co?key=8fysg6pf85u3vs';

  location_json = loadJSON(location_url, processLocationResponse);

}

​

function processLocationResponse(response){

  let city_result = response.location.city;

  if (city_result != null){

    city = city_result;

  } else {

    city = "chicago";

  }

  queryUrl(city);

}

​

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 + currentCity + url_end, processData);

}

​

function processData(){

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

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

  noStroke();

​

  input = createInput();

  input.position( 10, 20);

​

  button = createButton('change city');

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

  button.mousePressed(changeCity);

  queryLocation(); 

}

​

function draw() {

  background(mappedTemperature, 0, 255-mappedTemperature);

  fill(255, 255, 255, 150);

​

  text(city, 10, 60);

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

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

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

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

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}