AM to PM is a visualization of local time all around the world using PubNub and the Wolpfram Spoken API to query the current local time of countries around the world. Click on a country to see the local time visualized as a lit up sky with colors indicating the time of day.
My first idea was to create a project under the theme of wildlife potentially wildlife conservation however I was unable to find a suitable wildlife data api to query. I tried querying Wolfram alpha but the results returned using the spoken API were very unpredictable and I wasn’t able to predict what kind of response I would get. eg. When I asked “How big is a lion?” I was able to get the response
The typical length of a lion is about 9.8 feet
however when I queried “How big is a buffalo?” I got the response
The area of Buffalo, New York is about 40.4 square miles
This showed me that the spoken API would not be beneficial for my purpose. It returned conversational answers that are more suited to an app where voice is being used as a feature. I decided to then limit my queries to countries and their local time using the query ” local time country name” e.g “local time Kenya” returns
The answer is 7:14:48 P.M. EAT, Tuesday, February 5, 2019
To work with this response, I split the response at each ” ” and then find the position of the string ‘is’, once this string is found, I then get the next index i.e response[i+1] to get the time (7:14:48) and response[i+2] to get the string ‘A.M.’ or ‘P.M.’.
The time variable is then split at each “:” where I use the hour value and “A.M.” boolean check to determine what color sky to display. Each sky color varies per hour with dark black – blue – purple skies for night time, purple – pink skies for sunrise – blue skies for mornings – yellow skies for midday – orange skies for evening and purplish – orange skies for sunsets.
I would like to expand my project to query more climate data perhaps using the Wolfram Full Details API which I was not able to get working for this project. I didn’t query this data with the spoken API as i wasn’t able to predict what response I would get for each country, hard coding an algorithm like I had done to extract the time with the “local time” query becomes much more difficult with my larger dataset of 244 countries due to the varied responses e.g:
“Current weather in Kenya” returns
The weather in Kenya is mostly clear, with light winds and a temperature of 73 degrees Fahrenheit
“Current weather in United States” returns
The weather in the United States ranges from fog to overcast, with light winds and a temperature of 20 degrees Fahrenheit
Code / Process – Challenges & Experience:
Initial idea was to work with wild animals – couldn’t find data
I wanted to map the mouse position to latitudes and longitudes but i scrapped this idea because: 1. would end up making too many api calls 2. found that giving (lat, long) values to wolfram didn’t return expected results. Wolfram just reinterpreted the value and can’t return a country based on a latitude and longitude. One can’t query what country is a specific latitude.
I thought of using the getLocation() geolocation function to get GPS co-ordinates but went against it as this would tie me to the country linked to my IP address and I wanted my sketch to be able to change dynamically to show data on various countries. I ended up translating latitude,longitude values from Google Developer’s dataset countries.csv, using this data I translated the lat-long to x-y screen co-ordinates using the Mercator map projection function. Below is an example of how the co-ordinates translated to 2D space.
After determining that the translation function was working correctly, I created a Country class, generating new countries from a .csv file and saving them in an array when the sketch was loaded. Each Country object had the following attributes : lat, long, country code, country name, x co-ordinate, and y co-ordinate.
In my Country.translate() function, I put the code to translate from mercator lat,long to 2D x-y co-ordinates. In the Country.display(), I placed code to draw a circle at a specific x,y co-ordinate.
Upon drawing the dots for the countries I realized that they were skewed off the map as the x,y values corresponded to a Cartesian plane. To fix this I used the map function to map the x and y values to the screen coordinates.
Mapping the x-values to between 0 and screen width.
The final x,y values mapped to the screen’s width & height.
The next step was to make each country dot clickable so that when a user clicked on a country dot, its country name would be passed to Pubnub to query the wolfram api.
I then created a Country.clickCheck() function that is triggered on mouseClicked() to check which dot has been clicked. (see image above). This is done by checking the mousex,y location against a designated area around the x,y coordinate of the country dot. Upon finding a country that has been clicked, the country name, which is saved in a global variable that is constantly updated each time a user successfully clicks on a country, is passed to the Pubnub Wolphram Alpha query.
I also updated my code so that when a country is clicked, it is highlighted by a black dot to make the visualization more meaningful.
Kenya’s sky at 8:00:43 P.M EAT on Tuesday, February 5, 2019
Aesthetic choices made:
To experiment with a new way of asking a question, once I had constrained my project to local time and countries, I wanted to keep away from asking the user to type in a country. So i settled on a visualization of a map taking advantage of the affordances of a map. I wanted to keep it abstract so instead of country shapes, I created Country objects that were visually represented on a 2D map and unexpectedly, just by looking at the dots you can almost tell which continent is which. My goal was to keep it aesthetically pleasing but still informational. I am toying with the idea of printing the time values but I think the colors are pretty easy to interpret.
Possible future expansions:
I’d like to explore, adding more APIs to this project.
Link to code: here
Natural Logarithm in p5 : here and here
Mercator Map projection: Lat,Long -> x,y screen co-ordinates: here
Working with / Reading from CSV files: here