// These days - due to cold weather in Delhi, there's lot of smog. Visibility in general is very low. Reasons include - pollution, smoke, fog.

// This project, shows a Delhi people - what they should do before they step out on the roads and why. 

​

var url1 = "https://api.openweathermap.org/data/2.5/weather?q=Delhi&APPID=6a798f5b7cb6d1a8914f2a0eb9dbfa44&units=metric"; // endpoint URL declared

​

let noida;

let delhi;

let font1;

​

function preload() {

​

  font1 = loadFont('Exo-ExtraBold.ttf');

  smog = loadImage('smog.jpg');

  haze = loadImage('delhi-pollution-afp.jpg');

  mist = loadImage('DRIVING_IN_THE_MIST.jpg');

  novision = loadImage('Lidar-Fog.jpg');

 indiagate = loadImage('5621259188_e74d63cb05_b_20180302140149.jpg');

greend = loadImage('5c3566cb220000f608e013ed.jpeg');

  hindi = loadImage('Screenshot 2020-12-14 at 19.43.20.png');

}

​

function setup() {

  createCanvas(600, 600);

  loadJSON(url1, getData); //loading current weather for New Delhi 

  setTimeout(Alert, 10000);

}

​

function draw() {

  // Visibility alert and pollution alert.

textSize(20);

  fill(230,230,0);

  textFont(font1);

  text('* ALERT *',260,420) 

}

​

function getData(data) {  

  //if conditions in relation to Delhi weather

  //Alerts change to specifics, when temperature & visibility changes

​

   textFont(font1);

  //low visibility , smog - fog + smoke = pollution & global warming

  if (data.visibility >= 500 || data.visibility < 1000) {

    image(smog, 0, 0, width + 200, height);

    fill(0,0,0,120);

    rect(50,400,500,195);

    textSize(18);

    fill(255, 0, 0);

    text('SMOG', 300, 80);

    textAlign(CENTER);

    text('1. Turn-off the engine of your vehicle while standing at the\ntraffic lights to reduce Pollution.', 300, 440);

   text('2. Turn-on the headlights of your vehicle while driving or\nif you slow down, turn your \nindicators on to avoid accidents in misty weather.', 300, 490);

    if(data.main.temp <=10){

    text('3. Due to the low temperature and mist, do not stop abruptly\n without  giving road signals.', 300, 565);

    }

  }

//low visibility, but still can see things

  if (data.visibility >= 1001 || data.visibility <= 2000) {

    image(mist, 0, 0, width , height);

    textSize(18);

    fill(0,0,0,120);

    rect(50,400,500,195);

    fill(255, 0, 0);

    text('MIST', 300, 80);

     textAlign(CENTER)

    text('1. Turn-off the engine of your vehicle while standing at \nthe traffic lights to reduce Pollution.', 300, 440);

   text('2. Turn-on the headlights of your vehicle while driving or\nif you slow down, turn your \nindicators on to avoid accidents in misty weather.', 300, 490);

    if(data.main.temp <= 10){

    text('3. Due to relatively low temperature and mist, do not stop abruptly\n without  giving road signals.', 300, 565);

    }

  }

//fine visibility

  if (data.visibility <= 2001 || data.visibility <= 5000) {

    image(haze, 0, 0, width + 200, height);

    fill(0,0,0,120);

    rect(40,400,530,195);

    textSize(18);

    fill(255, 0, 0);

    text('HAZE', 300, 80);

    textAlign(CENTER)

  text('1. Turn-off the engine of your vehicle while standing at the\ntraffic lights to reduce Pollution.', 300, 440);

    text('2. Turn-on the headlights of your vehicle while driving or\nif you slow down, turn your \nindicators on to avoid accidents in misty weather.', 300, 490);

    if(data.main.temp <=10){

    text('3. Due to the low temperature and haze, do not stop abruptly\n without  giving road signals.', 300, 565);

    }

   }

//almost zero visibility

  if (data.visibility == 200 || data.visibility < 500) {

    image(novision, 0, 0, width + 200, height);

    fill(0,0,0,120);

    rect(40,400,545,195);

    textSize(16);

    fill(255, 0, 0);

    text('EXTREME FOG', 300, 80);

    text('1. Due to very low visibility today it is risky to drive a vehicle, kindly\n avoid using vehicles today.', 300, 440);

    text('2. Turn-off the engine of your vehicle while standing at \nthe traffic lights to reduce Pollution.', 300, 477);

   text('3. Turn-on the headlights of your vehicle while driving or if you\n      slow down, turn your indicators on to avoid accidents in misty weather.', 300, 523); 

    if(data.main.temp <=10){

    text('4. The temperature is slightly low, so please do not stop abruptly\n without giving road signals.', 300, 570);     

    }

  }

//weather description

  textSize(32);

  fill(0);

  textFont(font1);

  text('NEW DELHI, INDIA ', 310, 60);

  textAlign(LEFT);

  delhi = data;

  print(delhi);

  textFont(font1);

  translate(-40, 10);

  fill(0, 0, 255);

  textSize(30);

  text('Temperature: ' + data.main.temp + '•C', 160, 100);

  text('Feels Like: ' + data.main.feels_like + '•C', 160, 140);

  text('Minimum Temperature: ' + data.main.temp_min + '•C', 160, 180);

  text('Maximum Temperature: ' + data.main.temp_max + '•C', 160, 220);

  text('Humidity: ' + data.main.humidity + '%', 160, 260);

  text('Pressure: ' + data.main.pressure + 'hPa', 160, 300);

  text('Visibility: ' + data.visibility + 'm', 160, 340);

  text('Wind Speed: WNW ' + data.wind.speed + ' mph', 160, 380);

​

}

​

function Alert() {

  translate(0,40);

  background(90, 185, 120);

  image(greend, 0, -40, 600, 450);

  tint(255,200);

  image(indiagate, 0, -40, 600,450);

  push();

  textSize(18);

  fill(0);

  textFont(font1);

 //delhi information

   textAlign(CENTER);

    text('SAVE EARTH. SAVE YOURSELF.', 300, 440);

    text('New Delhi, capital city of India is one of the most populated city in the\n whole world. Almost 45% of the Delhi air pollution is due to\n vehicular emissions.', 300, 465);

   text('KEEP YOUR CITY GREEN AND CLEAN.', 300, 535); 

  image(hindi, 100, 390, 400,30); //meaning - I will make pollution free delhi.

   pop();

}