· 6 years ago · Mar 05, 2020, 07:06 PM
1
2// This sketch pulls JSON demo data (not live) from openweathermap.org
3// But you can get a free API key from them and work with real live weather data.
4// However, I'm only using weather for this demo because it is easy to understand the data.
5// If you are actually planning to use weather data in an art project, you will be challenged to
6// make it interesting.
7// Anyway, here's the URL of the sample data:
8// https://samples.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric&appid=b6907d289e10d714a6e88b30761fae22"
9
10JSONObject news;
11JSONArray cities;
12JSONObject city, main;
13String cityname;
14float temp;
15int xpos;
16
17
18void setup() {
19 // size (600, 600);
20 size (800, 800);
21 background (0);
22
23 stroke (255, 0, 0);
24 line (0, 200, width, 200);
25 textSize(12);
26 fill (255, 0, 0);
27 text ("0 Celsius", 30, 195);
28
29 news = loadJSONObject("https://samples.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric&appid=b6907d289e10d714a6e88b30761fae22");
30 cities = news.getJSONArray("list");
31 fill(255,255,0);
32 for (int i = 0; i <= news.size(); i++) {
33 // This JSON page has a nested hierarchy, with strings and floats available at various levels.
34 // I will use "getJSOObject" to parse the hierarchy down as far as I need to.
35 city = cities.getJSONObject(i);
36 main = city.getJSONObject("main");
37
38 // Now I use "getFloat" and "getString" to parse the actual data.
39 temp = main.getFloat("temp");
40 cityname = city.getString("name");
41 println("the temp in " + cityname + " is " + temp);
42
43 xpos = (i+1) * 150;
44 textSize(18);
45 textAlign(LEFT);
46 text (cityname, xpos, 50);
47
48 rectMode(CORNER);
49
50 // Here's how I decided to layout the graphics.
51 // start drawing from y = 200.
52 // bars are 70 pixels wide.
53 // Now choose an appropriate scaling factor for your data.
54 // This is often a matter of judgment.
55 // I decided that 100 degrees C would be the maximum, and thus fill the height of the screen.
56 // (Hopefully, no city will be anywhere near that hot! I could make it less..)
57 // Then I use the "map" function to scale the possible data range to the screen space.
58 // In Processing's coordinate system higher "Y" values are lower on the screen, but I'd like the opposite in my visualization.
59 // So I multiply "height" by -1. in the output range.
60
61 float graphtemp = map(temp, 0, 100, 0, height * -1.);
62 rect (xpos, 200, 70, (graphtemp));
63 // you could also map the temperature to color ranges, or any other thing.
64
65 }
66
67}
68
69void draw(){}