CLICK the map to retrieve weather for any location. Use the MENU to select a CITY from a short list.
xxxxxxxxxx
let data = null;
let mapimg, scaler;
let date, ddisplay, tdisplay, localdate;
let description, city, country, temp, baro, humid, feels, windspeed, winddir, sunrise, toffset;
let dirs = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
let cityNames = ['Boston', 'New York', 'Miami', 'Chicago', 'London', 'Tokyo', 'Delhi', 'Shanghai', 'Sao Paulo', 'Mexico City', 'Cairo', 'Dhaka', 'Mumbai', 'Beijing', 'Osaka', ]
let cityIds = [4930956, 5128581, 4164138, 4887398, 2643743, 1850147, 1273294, 1796236, 3448439, 3530597, 360630, 1185241, 1275339, 1816670, 1853909];
let newlon, newlat;
let pos, tpos;
let sel;
let can;
function preload() {
symbol = loadImage('http://openweathermap.org/img/wn/10d@2x.png');
mapimg = loadImage('Equimap.jpg');
}
function setup() {
can = createCanvas(windowWidth, windowHeight);
can.mousePressed(movePointer);
mapimg.resize(width, 0);
scaler = height / 13;
pos = createVector(0, 0);
tpos = createVector(0, 0);
makeDropdown();
fetchWeather(0, 0, 4930956); //Fetch Boston first!
}
function updateData() {
//Grab individual values from JSON data
temp = data.main.temp
feels = data.main.feels_like
baro = data.main.pressure
humid = data.main.humidity
toffset = data.timezone
description = data.weather[0].description
windspeed = data.wind.speed
winddir = data.wind.deg
city = data.name + ', ' + data.sys.country
if (city.includes('undefined')) city = 'None'
newlon = data.coord.lon
newlat = data.coord.lat
tpos.x = map(newlon, -180, 180, 0, mapimg.width);
tpos.y = map(newlat, 90, -90, 0, mapimg.height);
//Get new date object
// date = new Date();
// ddisplay = date.toDateString();
// tdisplay = date.toTimeString().substring(0, 18);
//Convert system time to local time based on timezone offset from API
date = new Date();
localdate = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + 8, date.getMinutes(), date.getSeconds() + toffset);
ddisplay = new Date(localdate).toLocaleDateString()
tdisplay = new Date(localdate).toLocaleTimeString()
}
function drawWeather() {
//Refresh screen draw map, thermometer, compass, and text
background(0);
drawMap();
drawThermometer();
drawCompass();
drawText();
}
function draw() {
if (frameCount > 10) {
pos.lerp(tpos, 0.1);
if (data) drawWeather();
}
}
function drawCompass() {
angleMode(DEGREES);
push();
translate(1.25 * scaler, 1.75 * scaler);
strokeWeight(2);
fill(255, 100);
stroke('red');
ellipse(0, 0, scaler * 1.1, scaler);
rotate(winddir);
line(0, 0, 0, -0.5 * scaler);
line(0, -0.5 * scaler, 0.1 * scaler, -0.35 * scaler);
line(0, -0.5 * scaler, -0.1 * scaler, -0.35 * scaler);
pop();
}
function drawThermometer() {
push();
translate(0, 2.5 * scaler);
fill(255, 50);
stroke(255);
strokeWeight(2);
rect(scaler, 0, scaler / 2, 4 * scaler, scaler / 4);
fill('red');
ellipse(1.25 * scaler, 4 * scaler, scaler, scaler);
let ty = map(temp, 100, 0, scaler, 3 * scaler);
noStroke();
rect(1.02 * scaler, ty, scaler / 2.2, 4 * scaler - ty);
let tlabel = 100;
for (let y = 0.5 * scaler; y < 4 * scaler; y += scaler / 2) {
stroke(255);
line(scaler, y, scaler + (scaler / 2.2), y);
noStroke();
fill(255);
text(tlabel + 10 + '˚F', 1.6 * scaler, y);
tlabel -= 20;
}
noStroke();
pop();
}
function drawMap() {
tint(255, 200);
image(mapimg, 0, 0);
stroke('white');
strokeWeight(1);
noFill();
line(pos.x, pos.y, pos.x, pos.y-scaler/2);
noStroke();
fill('orange');
ellipse(pos.x, pos.y-scaler/2, scaler / 4, scaler / 4);
fill('white');
ellipse(pos.x-scaler/16, pos.y-scaler/2-scaler/16, scaler / 14, scaler / 14);
}
function drawText() {
//Display values from API
push();
translate(pos.x, pos.y);
if (tpos.x > width - 5 * scaler) translate(-5 * scaler, 0);
if (tpos.y > height - 6 * scaler) translate(0, -5.5 * scaler);
fill(0, 100);
rect(0.25 * scaler, -0.25 * scaler, 4.5 * scaler, 6 * scaler, 10);
fill(255);
noStroke();
textAlign(LEFT, CENTER);
textSize(scaler / 3);
text(city, 0.5 * scaler, 0.25 * scaler);
text('Date: ' + ddisplay, 0.5 * scaler, 1 * scaler);
text('Local Time: ' + tdisplay, 0.5 * scaler, 1.5 * scaler);
text('Temperature: ' + temp + '˚F', 0.5 * scaler, 2 * scaler);
text('Feels Like: ' + feels + '˚F', 0.5 * scaler, 2.5 * scaler);
text('Humidity: ' + humid + '%', 0.5 * scaler, 3 * scaler);
text('Barometer: ' + baro + ' mm', 0.5 * scaler, 3.5 * scaler);
text('Conditions: ' + description, 0.5 * scaler, 4 * scaler);
text('Wind Speed: ' + windspeed + ' mph', 0.5 * scaler, 4.5 * scaler);
text('Wind Direction: ' + dirs[floor(map(winddir, 0, 359, 0, 8))], 0.5 * scaler, 5 * scaler);
pop();
}
function keyPressed(){
print(data);
}