​

let api = "https://api.openweathermap.org/data/2.5/air_pollution?lat=";

let and = "&lon=";

let apiKey = "&appid=ed955ef37457e18734551de7882f7b4d";

​

let pollution;

let lat;

let lon;

let button;

​

let c1, c2;

let x1 = 300;

let x2 = 0;

let font1, font2;

let img;

​

function preload() {

  font1 = loadFont('JosefinSans-Medium.ttf');

  font2 = loadFont('JosefinSans-Regular.ttf');

  img = loadImage('unnamed.png');

​

}

​

function setup() {

  createCanvas(600, 600);

  frameRate(7);

  textFont(font2);

​

  lat = createInput('50');

  lat.position(115, 250);

  lon = createInput('50');

  lon.position(285, 250);

  button = createButton('go');

  button.position(455, 250);

​

  // Call the API when requested

  button.mousePressed(askPollution);

​

  c1 = color(158, 211, 255);

  c2 = color(255);

​

​

}

​

// function to call the API

function askPollution() {

  let url = api + lat.value() + and + lon.value() + apiKey;

  loadJSON(url, gotData);

}

​

// callback

function gotData(data) {

  print(data);

  pollution = data;

}

​

function draw() {

  background(0);

​

  // background

  noFill();

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

    let inter = map(i, 0, 600, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(0, i, 600, i);

  }

​

  // text(mouseX, 300, 300);

  // text(mouseY, 350, 300);

​

  push();

  fill(255);

  noStroke();

  image(img, x1, 70, img.width * 0.3, img.height * 0.3);

  image(img, x2, 70, img.width * 0.2, img.height * 0.2);

  // ellipseMode(CORNER);

  // ellipse(x1, 70, 190, 40);

  // ellipse(x2, 90, 170, 40);

  x1 = x1 + 3;

  x2 = x2 + 3;

  if (x2 > 600) {

    x1 = -150;

    x2 = -450;

  }

  pop();

​

  push();

  noStroke();

  fill(0);

  textAlign(CENTER, CENTER);

  textSize(15);

  textFont(font1);

  text("Enter a coordinate to check the air quality", 300, 200);

  pop();

​

  noStroke();

  fill(255);

  push();

  translate(10, 0);

  textAlign(CENTER, CENTER);

  text('latitude', 125, 240);

  text('longitude', 300, 240);

  pop();

​

​

  // if (weather) {

  //   ellipse(200, 300, weather.main.temp, weather.main.temp);

  //   ellipse(400, 300, weather.main.humidity, weather.main.humidity);

  // }

​

​

  // information to display once data is requested

  if (pollution) {

​

    for (let i = 0; i < (pollution.list[0].components.co); i++) {

      noStroke();

      fill(0);

      // image(co, random(width), random(height), co.width * 0.03, co.height * 0.03);

      ellipse(random(width), random(height), random(3));

    }

​

    for (let i = 0; i < (pollution.list[0].components.o3); i++) {

      noStroke();

      fill(0, 0, 255);

      ellipse(random(width), random(height), random(7));

    }

​

    for (let i = 0; i < (pollution.list[0].components.pm2_5); i++) {

      noStroke();

      fill(0, 255, 0);

      ellipse(random(width), random(height), random(5));

    }

​

    for (let i = 0; i < (pollution.list[0].components.pm10); i++) {

      noStroke();

      fill(255, 0, 0);

      ellipse(random(width), random(height), random(10));

    }

​

    rectMode(CENTER);

    fill(0, 80);

    rect(300, 350, 150, 100, 20);

​

    fill(255);

    text("CO:" + " " + pollution.list[0].components.co, 275, 325);

    text("O3:" + " " + pollution.list[0].components.o3, 275, 345);

    text("PM2.5 :" + " " + pollution.list[0].components.pm2_5, 275, 365);

    text("PM10 :" + " " + pollution.list[0].components.pm10, 275, 385);

    fill(0);

    ellipse(255, 320, 3);

    fill(0, 0, 255);

    ellipse(255, 340, 7);

    fill(0, 255, 0);

    ellipse(255, 360, 5);

    fill(255, 0, 0);

    ellipse(255, 380, 10);

​

    push();

    noStroke();

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(15);

    textFont(font1);

    text("Enter a coordinate to check the air quality", 300, 200);

    pop();

​

    noStroke();

    fill(255);

    push();

    translate(10, 0);

    textAlign(CENTER, CENTER);

    text('latitude', 125, 240);

    text('longitude', 300, 240);

    pop();

​

    push();

    noStroke();

    fill(0);

    textAlign(CENTER, CENTER);

    textSize(15);

    textFont(font1);

    text("Enter a coordinate to check the air quality", 300, 200);

    pop();

​

    noStroke();

    fill(255);

    push();

    translate(10, 0);

    textAlign(CENTER, CENTER);

    text('latitude', 125, 240);

    text('longitude', 300, 240);

    pop();

​

    // ellipse(75, 300, pollution.list[0].components.co);

    // ellipse(150, 300, pollution.list[0].components.no);

    // ellipse(225, 300, pollution.list[0].components.no2);

    // ellipse(300, 300, pollution.list[0].components.o3);

    // ellipse(375, 300, pollution.list[0].components.so2);

    // ellipse(450, 300, pollution.list[0].components.pm2_5);

    // ellipse(525, 300, pollution.list[0].components.pm10);

    // ellipse(600, 300, pollution.list[0].components.nh3);

  }

}