· 6 years ago · Jan 15, 2020, 08:08 PM
1/*
2Einführung JSON
3Zugriff auf API
4Auslesen von Werten
5Current
6https://api.weatherstack.com/current?access_key=2580abcd35aaf3945f989be3f68aa54c&query=Rotkreuz
7Forecast
8https://api.weatherstack.com/forecast?access_key=2580abcd35aaf3945f989be3f68aa54c&query=New York&forecast_days=7
9
10Dokumentation
11https://weatherstack.com/documentation
12 */
13
14let key='2580abcd35aaf3945f989be3f68aa54c'; // digital ideation key. persönlicher Gebrauch! 3 Monate gültig
15
16//for the sun function
17let angleA = 4;
18let speedA = 3;
19let speedB = 0;
20let radius = 10;
21let angle = 0;
22
23//for the rain function
24let swarm = [];
25let run = [];
26let w=0;
27let amount = 590;
28
29
30let tempNoiseX = 25;
31let tempNoiseY = 2;
32let tempTilesNumber = 25;
33let spining = 0;
34
35let winddir;
36let temperature = 0;
37
38let tempState = 1;
39
40//for the cloud
41let cloudcover;
42
43
44
45let rainIntensity;
46let sunnyweather;
47
48let isItDay;
49let cityName ="Rotkreuz";
50
51let dataLoaded = false;
52
53function preload(){
54
55}
56
57function setup() {
58 createCanvas(700, 700);
59//background(random(150,200));
60background(178,178,220,100)
61
62let url = 'https://api.weatherstack.com/current?access_key='+key+'&query='+ cityName;
63loadJSON(url, gotWeather);
64
65drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(temperature));
66//drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(30));
67
68input = createInput();
69input.position(5, 5);
70
71button = createButton('submit');
72button.position(input.x + input.width, 5);
73button.mousePressed(getCityName);
74
75
76
77//for the rain
78for (let i = 0; i < amount; i++) {
79 swarm[i] = random(0, 700);
80 run[i] = random(4,6);
81 }
82}
83
84function getCityName() {
85 cityName = input.value();
86 drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(temperature));
87 let url = 'https://api.weatherstack.com/current?access_key='+key+'&query='+cityName;
88 loadJSON(url, gotWeather)
89}
90
91function draw() {
92 //background(random(150,200));
93 //drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(temperature));
94
95 if (!dataLoaded)
96 return;
97
98
99 if (rainIntensity > 0.2)
100 {
101 drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(temperature));
102 getRainIntensity()
103 }
104
105 if (weather_descriptions.includes("Sunny"))
106 {
107 sunnyWeather()
108 }
109
110 if (weather_descriptions.includes("Snow"))
111 {
112 drawTemperature(tempNoiseX, tempNoiseY, tempTilesNumber, getColor(temperature));
113 getSnow()
114 }
115
116 if (isItDay.includes("no"))
117 {
118 isDay()
119 }
120
121 if (cloudcover > 15) {
122 drawCloud({x : width / 2, y : height / 2});
123
124 }
125
126 drawWind(getWindDir(winddir));
127 //drawWind(getWindDir("E"));
128
129 //drawCloud({x : width / 2, y : height / 2});
130
131}
132
133function getWindDir(winddir)
134{
135 let direction = {x : 0, y : 0};
136 if (winddir.includes("N"))
137 {
138 direction.x = width/2;
139 direction.y = 40;
140 }
141 else if (winddir.includes("S"))
142 {
143 direction.x = width/2;
144 direction.y = 660;
145 }
146
147 if (winddir.includes("W"))
148 {
149 direction.x = 40;
150 direction.y = 350;
151 }
152 else if (winddir.includes("E"))
153 {
154 direction.y = width/2;
155 direction.x = 660;
156 }
157 return direction;
158}
159
160/*
161Return an array corresponding to the values rgb depending on the specified temperature
162*/
163function getColor(temperature)
164{
165 return temperature > 30 ? [201, 46, 98] :
166 temperature > 25 ? [65, 167, 166] :
167 temperature > 20 ? [253, 188,180] :
168 temperature > 15 ? [162, 143, 151] :
169 temperature > 10 ? [236, 232, 228] :
170 temperature > 5 ? [150, 200, 217] :
171 temperature > 0 ? [139, 139, 175] :
172
173 [139, 139, 175];
174
175 // if (temperature > 30)
176 // {
177 // return [255, 17, 0];
178 // }
179 // else
180 // {
181 // if (temperature > 20)
182 // {
183 // return [255, 98, 0];
184 // }
185 // else
186 // {
187 // if (temperature > 10)
188 // {
189 // return [219, 186, 75];
190 // }
191 // else {
192 // return [95, 102, 237];
193 // }
194 // }
195 // }
196}
197
198function drawTemperature(noiseX, noiseY, tiles, color) {
199 ellipseMode(CENTER);
200
201 let xOff = noiseX;
202 let yOff = noiseY;
203
204 rect(width,height,900,900)
205 //Deux dimensions avec deux arguments
206 for(let j=0; j<=tiles;j++){
207 for(let i=0; i<=tiles;i++){
208 let colorNoise = noise(yOff, xOff)*100;
209 fill(color[0] + colorNoise, color[1] + colorNoise, color[2] + colorNoise);
210
211 //color[3] + colorNoise), color[4] + colorNoise, color[5] + colorNoise,
212 // color[6] + colorNoise, color[7] + colorNoise;
213 noStroke();
214
215 rect(i*width/tiles,j*height/tiles,width/tiles, height/tiles);
216 //ellipse(i*width/10,j*height/30,width/tiles, height/0.2);
217
218 ellipse(i*width/tiles,j*height/tiles,width/tiles, height/tiles);
219
220 fill(color[0] + colorNoise-10, color[1] + colorNoise-10, color[2] + colorNoise)
221 //fill(255,200);
222 ellipse(i*width/tiles,j*height/tiles,(width/tiles)/1.5, (height/tiles)/1.5);
223
224 fill(color[0] + colorNoise-30, color[1] + colorNoise-30, color[2] + colorNoise)
225
226 ellipse(i*width/tiles,j*height/tiles,(width/tiles)/3, (height/tiles)/3);
227
228
229 xOff+=0.6;
230
231
232 }
233 }
234
235
236
237};
238
239function drawWind(direction)
240{
241 let center = {x : 0, y : 0};
242 //let length = 200;
243 //strokeWeight(10);
244 //stroke(206, 27, 27);
245 //line (center.x, center.y, center.x + direction.x * length, center.y + direction.y * length);
246noStroke();
247 fill(255);
248 //rect (center.x + direction.x, center.y + direction.y, 20,20);
249ellipse (center.x + direction.x, center.y + direction.y, 30,30);
250 //drawCloud({x: center.x + direction.x, y: center.y + direction.y}, getRainIntensity(rainIntensity));
251 //* length, center.y + direction.y * length);
252}
253
254/*function getRainIntensity(rainIntensity)
255{
256 let max = 3;
257 return Math.min(rainIntensity, max);
258} */
259
260function getRainIntensity(rainIntensity)
261{
262 push();
263translate(width/2-85,height/2-20)
264 randomSeed(300);
265 for (let i = 0; i < swarm.length; i++) {
266 let x = random(0, width-450);
267
268 fill(random(20,50),110,random(200,200));
269 rect(x, swarm[i], random(2),6);
270 swarm[i] += run[i];
271 if (swarm[i] - w > height+100) {
272 swarm[i] = - w;
273
274 }
275 }
276 pop();
277 }
278
279
280 function getSnow()
281 {
282
283push();
284 randomSeed(300);
285 for (let i = 0; i < swarm.length; i++) {
286 let x = random(0, width);
287
288 fill(255);
289 circle(x, swarm[i], random(1,6));
290 swarm[i] += run[i];
291 if (swarm[i] - w > height+100) {
292 swarm[i] = - w;
293
294 }
295 }
296pop();
297 }
298
299
300function sunnyWeather()
301{
302 let a = map(sin(radians(angle)), -10, 1, 0, 255);
303let Ay = radius+100 * sin(radians(angleA)+10);
304 let Ax = radius-200 * cos(radians(angleA)+10);
305
306push();
307 translate(width/2, height/2);
308
309 // Point
310
311 fill(255,247,123,100);
312 angleA += speedA;
313
314 //rotate(PI / 3.5);
315 rotate(angleA);
316
317 stroke(255);
318 strokeWeight(2);
319 //ellipse (Ax, Ay, Ax, Ay);
320// triangle(Ax, 30, Ay, Ax, 6, Ax-10);
321 triangle(Ax, Ay, 30, 10, Ax+20, Ay+20);
322
323 fill(253,188,250,100);
324 stroke(150,200,217);
325 strokeWeight(2);
326 //ellipse (Ax, Ay, Ax, Ay);
327// triangle(Ax, 30, Ay, Ax, 6, Ax-10);
328 triangle(Ax-10, Ay-10, 30, 10, Ax-30, Ay-30);
329
330fill(256,219,184,100);
331 rect(0,0,0.3,50);
332pop();
333 }
334
335 function isDay()
336 {
337 //Black above the canva
338 fill(0,10);
339 noStroke();
340rect(0, 0, 700, 700);
341
342 for (let a = random(700); a < width; a += 700) {
343 for (let b = random(700); b < height; b += 700) {
344
345 // stars
346
347fill(random(255,100));
348 ellipse(a, b, (random(5)), 5);
349
350
351
352}
353}
354//text("like this",200,20)
355 }
356
357
358
359
360
361function gotWeather(weather) {
362 console.log(weather);
363 winddir=weather.current.wind_dir;
364 temperature=weather.current.temperature;
365 cloudcover=weather.current.cloudcover;
366 rainIntensity = weather.current.precip;
367 dataLoaded = true;
368 weather_descriptions = weather.current.weather_descriptions[0].split(" ");
369 isItDay = weather.current.is_day;
370
371}