Weather
This example grabs JSON weather data from www.metaweather.com.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// A wind direction vector
let wind;
// Circle position
let position;
function setup() {
createCanvas(720, 200);
// Request the data from metaweather.com
let url = 'https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/2459115/';
loadJSON(url,gotWeather);
// Circle starts in the middle
position = createVector(width/2, height/2);
// wind starts as (0,0)
wind = createVector();
}
function draw() {
background(200);
// This section draws an arrow pointing in the direction of wind
push();
translate(32, height - 32);
// Rotate by the wind's angle
rotate(wind.heading() + PI/2);
noStroke();
fill(255);
ellipse(0, 0, 48, 48);
stroke(45, 123, 182);
strokeWeight(3);
line(0, -16, 0, 16);
noStroke();
fill(45, 123, 182);
triangle(0, -18, -6, -10, 6, -10);
pop();
// Move in the wind's direction
position.add(wind);
stroke(0);
fill(51);
ellipse(position.x, position.y, 16, 16);
if (position.x > width) position.x = 0;
if (position.x < 0) position.x = width;
if (position.y > height) position.y = 0;
if (position.y < 0) position.y = height;
}
function gotWeather(weather) {
let weather_today = weather.consolidated_weather[0]
// Get the angle (convert to radians)
let angle = radians(Number(weather_today.wind_direction));
// Get the wind speed
let windmag = Number(weather_today.wind_speed);
// Display as HTML elements
let temperatureDiv = createDiv(floor(weather_today.the_temp) + '°C');
let windDiv = createDiv("WIND " + windmag + " <small>MPH</small>");
// Make a vector
wind = p5.Vector.fromAngle(angle);
}
