click on tag icon on the top right of the p5 embed to see the source code
☁️ 10/30/2022 - Weather API
This sketch allows user to see the weather at different cities that they desire on this little island. sources: openweather API & Giphy API
DESIGN & PROBLEMS
Surprisingly, I encounter a lot of problems with this sketch. It is generally because my two midterms are also due in this week. However, the main design and functions are still finished at the end. only the visuals and more advanced functions are not fully completed. The initial, design is as shown in the diagram below.
Initially I wanted to make a little tool of data visualization that shows the weather of different dates in the history of any location the user input.
The little island is a visual representition of what will happen to the location they inputed (ex. New York). For example, if the weather API say raining, it will start raining on the island. The weather API inforamtion will also be shown on the HTML UI that sits on top canvas. However, I wasn't able to finish this part because it will take too long and especially I don't have as much time as I usually do since I have midterms. Therefore, I linked Giphy API into the sketch and let it search the description, such as raining, and set the returned gif image as the background. This way it is a faster way to reimagine the weather without writing a database of numerous different weather visuals.
In the final sketch, everything worked beside setting the giphy api image as background. I'm not sure weather if I'm too naive on the use of gif. It seems like the p5 library doesn't read gif pixels as regular image, so everytime I use loadImage(gif). It will just say gif is undefined. I still couldn't wrap my mind around this. By logic the following code should work, but it keeps giving errors.
//fetching giphy image data
funtion giphyFetch(){
gifUrl = api + apiKey + "&q=" + query;
loadJSON(gifUrl, gotData);
}