xxxxxxxxxx
// Air Pollution Data Visualization
let api = "https://api.openweathermap.org/data/2.5/air_pollution?lat=";
let and = "&lon=";
let apiKey = "&appid=82a00f09723acbbb4e9ba8dd7cf99fa1";
let pollution;
let lat;
let lon;
let button;
let myarray=['Seoul','NewYork','Paris', 'Beijing', 'London', 'Tokyo', 'Sidney','Milano']
let myarrayLat=[37.5665,40.7128,48.8566,39.9042,51.5072,35.6762,-33.8688,45.4642]
let myarrayLon=[126.9780,74.0060,2.3522,116.4074,0.1276,139.6503,156.2093,9.1900]
// let a=10
// let b=8
function preload() {
img2 = loadImage('Nose Breathing.jpg')
}
function setup() {
createCanvas(600, 600);
frameRate(1);
lat = createInput('0');
lat.position(250, 535);
lat.size(70,15)
lon = createInput('0');
lon.position(410, 535);
lon.size(70,15)
button = createButton('enter');
button.position(530, 535);
for (let p = 0; p < 8; p++) {
myarray[p]= createButton(myarray[p])
myarray[p].position(75*p+2, 565)
myarray[p].size(70,25)
myarray[p].style("background-color", "#000000")
myarray[p].style("font-family", "Helvetica");
myarray[p].style("color", "#ffffff");
myarray[p].show();
console.log(myarray[0])
}
// buttonSeoul = createButton('Seoul');
// buttonSeoul.position(10*p+10, 560);
// buttonSeoul.size(70,25)
// buttonSeoul.style("background-color", "#000000")
// buttonSeoul.style("font-family", "Helvetica");
// buttonSeoul.style("color", "#ffffff");
button.mousePressed(pollutionInfo);
myarray[0].mousePressed(pollutionInfo_Seoul);
myarray[1].mousePressed(pollutionInfo_NewYork);
myarray[2].mousePressed(pollutionInfo_Paris);
myarray[3].mousePressed(pollutionInfo_Beijing);
myarray[4].mousePressed(pollutionInfo_London);
myarray[5].mousePressed(pollutionInfo_Tokyo);
myarray[6].mousePressed(pollutionInfo_Sidney);
myarray[7].mousePressed(pollutionInfo_Milano);
}
//display City
// function mousePressed() {
// for (let p = 0; p < 8; p++) {
// if (mouseX>75*p+2&&mouseX<75*p+2+70&&mouseY>565&&mouseY<585){
// text(myarray[p],250,100)
// }
// }
// }
// API Info for enter button
function pollutionInfo() {
let url = api + lat.value() + and + lon.value() + apiKey;
loadJSON(url, gotData);
}
function pollutionInfo_Seoul(){
// push()
// textAlign(CENTER,CENTER)
// fill(150);
// textSize(25)
// text('SEOUL',300,100)
// pop();
let url = api + myarrayLat[0] + and + myarrayLon[0] + apiKey;
loadJSON(url, gotData);
// for (let p = 0; p < 8; p++) {
// if(p==0){
// myarray[p].style("background-color", "#ff0000");}
// else {myarray[p].style("background-color", "000000");}
// }
}
function pollutionInfo_NewYork(){
let url = api + myarrayLat[1] + and + myarrayLon[1] + apiKey;
loadJSON(url, gotData);
// for (let p = 0; p < 8; p++) {
// if(p==1){
// myarray[p].style("background-color", "#ff0000");}
// else {myarray[p].style("background-color", "000000");}
// }
}
function pollutionInfo_Paris(){
let url = api + myarrayLat[2] + and + myarrayLon[2] + apiKey;
loadJSON(url, gotData);}
function pollutionInfo_Beijing(){
let url = api + myarrayLat[3] + and + myarrayLon[3] + apiKey;
loadJSON(url, gotData);}
function pollutionInfo_London(){
let url = api + myarrayLat[4] + and + myarrayLon[4] + apiKey;
loadJSON(url, gotData);}
function pollutionInfo_Tokyo(){
let url = api + myarrayLat[5] + and + myarrayLon[5] + apiKey;
loadJSON(url, gotData);}
function pollutionInfo_Sidney(){
let url = api + myarrayLat[6] + and + myarrayLon[6] + apiKey;
loadJSON(url, gotData);}
function pollutionInfo_Milano(){
let url = api + myarrayLat[7] + and + myarrayLon[7] + apiKey;
loadJSON(url, gotData);}
// get data
function gotData(data) {
print(data);
pollution = data;
}
function draw() {
background(0);
image(img2,0,0,random(600,630),random(600,650));
push();
noStroke();
fill(230);
//textAlign(CENTER, CENTER);
textSize(15);
text("Enter Your Coordinates.", 10,550);
pop();
noStroke();
fill(255);
push();
//translate(10, 0);
//textAlign(CENTER, CENTER);
textSize(15)
text('Latitude:',190, 550);
text('Longitude:',338, 550);
pop();
push();
textAlign(CENTER, CENTER);
fill(250)
textSize(40)
textStyle(BOLD);
text('Dark Breathing', 300, 50);
fill(0)
textSize(40)
text("Dark Breathing", 301, 51);
pop();
// if (weather) {
// ellipse(200, 300, weather.main.temp, weather.main.temp);
// ellipse(400, 300, weather.main.humidity, weather.main.humidity);
// }
// DATA VISUALIZATION
if (pollution) {
for (let i = 0; i < (pollution.list[0].components.co); i++) {
noStroke();
fill(134, 46, 163,60);//purple
ellipse(random(width), random(height), random(60));
}
for (let i = 0; i < (pollution.list[0].components.o3); i++) {
noStroke();
fill(102, 51, 0,90);//brown
ellipse(random(width), random(height), random(30));
}
for (let i = 0; i < (pollution.list[0].components.no2); i++) {
noStroke();
fill(0, 128, 43,70);// green
ellipse(random(width), random(height), random(40));
}
for (let i = 0; i < (pollution.list[0].components.pm2_5); i++) {
noStroke();
fill(255, 153, 51, 90);//Orange
ellipse(random(width), random(height), random(10));
}
for (let i = 0; i < (pollution.list[0].components.so2); i++) {
noStroke();
fill(230,0,0,80);//red
ellipse(random(width), random(height), random(50));
}
for (let i = 0; i < (pollution.list[0].components.nh3); i++) {
noStroke();
fill(255, 0, 255,80);//pink
ellipse(random(width), random(height), random(60));
}
for (let i = 0; i < (pollution.list[0].components.no); i++) {
noStroke();
fill(126, 255, 26,100);//light green
ellipse(random(width), random(height), random(20));
}
for (let i = 0; i < (pollution.list[0].components.pm10); i++) {
noStroke();
fill(255, 255, 71,80);//yellow
ellipse(random(width), random(height), random(50));
}
//air quality info
rectMode(CENTER);
fill(0, 150);
rect(510, 260, 160, 200, 10);
// push()
// textAlign(CENTER,CENTER)
// fill(150);
// textSize(25)
// text('SEOUL',300,100)
// pop();
fill(255);
textSize(15)
text("CO:" + " " + pollution.list[0].components.co, 480, 195);
text("O3:" + " " + pollution.list[0].components.o3, 480, 215);
text("PM2.5 :" + " " + pollution.list[0].components.pm2_5, 480, 235);
text("PM10 :" + " " + pollution.list[0].components.pm10, 480, 255);
text("NO :" + " " + pollution.list[0].components.no, 480, 275);
text("NO2 :" + " " + pollution.list[0].components.no2, 480, 295);
text("SO2 :" + " " + pollution.list[0].components.so2, 480, 315);
text("NH3 :" + " " + pollution.list[0].components.nh3, 480, 335);
fill(134, 46, 163);//purple
ellipse(460, 190,15);
fill(153, 77, 0); //brown
ellipse(460, 210,15);
fill(255, 153, 51);//orange
ellipse(460, 230,15);
fill(255, 255, 77); //yellow
ellipse(460, 250,15);
fill(126, 255, 26);// light green no
ellipse(460, 270,15);
fill(0, 128, 43);// green no2
ellipse(460, 290,15);
fill(230, 0, 0);//red so2
ellipse(460, 310,15);
fill(255, 0, 255); //nh3 pink
ellipse(460, 330,15);
push();
noStroke();
fill(230);
//textAlign(CENTER, CENTER);
textSize(15);
// textFont(font1);
text("Enter Your Coordinates.", 10, 550);
pop();
noStroke();
fill(255);
push();
//translate(10, 0);
//textAlign(CENTER, CENTER);
textSize(15)
text('Latitude:', 190, 550);
text('Longitude:',338, 550);
pop();
push();
noStroke();
fill(255);
// textAlign(CENTER, CENTER);
textSize(15);
// textFont(font1);
text("Enter Your Coordinates.", 10, 550);
pop();
noStroke();
fill(255);
push();
//translate(10, 0);
//textAlign(CENTER, CENTER);
textSize(15)
text('Latitude:', 190, 550);
text('Longitude:',338, 550);
pop();
push();
textAlign(CENTER, CENTER);
fill(250)
textSize(40)
textStyle(BOLD);
text('Dark Breathing', 300, 50);
fill(0)
textSize(40)
text("Dark Breathing", 301, 51);
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);
}
}