Recently the satellite DSCOVR started sending back multiple images of Earth per day and Nasa has begun sharing them online as they have come in. This is momentous. Although many don’t realize it, there are few photos of Earth as a whole from afar. The images, found at epic.gsfc.nasa.gov, are spectacular.

It’s such a surreal thing to try to put ourselves in context to an image of the earth. I’ve been trying to think of ways to make these images relatable. I decided to try to create something like a livestream from Earth.

The idea is that you are in space looking down at the Earth and seeing a live image. (The image isn’t really live, but it’s close.) As you look at your monitor, you get a news feed of happenings on the planet. I considered using the Twitter API to create this feed, but decided to use the New York Times article API to make it more curated and manageable.

I ran into so, so many challenges with this project, and it is not even close to done. Here are a few of the challenges:

Nasa doesn’t actually have an API for these images. They do have a JSON file, but it is not ideal for others to use. A friend helped me navigate their data, but it took a lot of work, and trial and error.

Also, The New York Times API just gives names for the location of articles, rather than longitude and latitude coordinates. I spent a fair amount of time working with the MapBox GeoCoding API. It was very helpful in turning country names into coordinates, but their search returned surprising results. For example, India Avenue was returned before India the country for the search term “India.” I solved this by restricting search results to countries for now, but this will throw things off in the longrun because NYT does use city names as locations from time to time.

Interestingly, I couldn’t call the NYT URL using loadJSON in preload. I had to use load JSON with a callback in setup. I wonder if this is a problem with p5?

I also had an issue running a loop within a function from a loop. The i variable was being reset each time I was going into the loop within a function. It put the program in an infinite loop and crashed the editor and website. I fixed this by changing i to z in the loop within the function.

I also had an issue with loading text on the canvas, which I don’t fully understand. I first put the article headlines on the canvas so I could position them and put movement on them easily. But, I was getting a terrible pixilation. I tried turning of the pixel scaling, this didn’t help. It did help somewhat when I scaled it to 4, but it still wasn’t great. I then moved all the text into DOM elements, where the text was much more clear. Eventually, though, I moved the text back into the canvas, and surprisingly the issue with the pixilation went away.

The most challenging element was placing the article markers and text on the globe. They are currently in range, but still somewhat off. I will try to find a library or API that has tackled this problem.

Finally, I added the “Sounds of Earth” from Nasa as background music to help the user imagine they are on a spacecraft far, far from Earth. It’s a bit cheesy, but fun.

Next steps will be to add a way to mute the music, better place the markers and text, make headlines into links, and allow users to see past images with the article overlays.

See the current working version here: http://lmj.io/projects/icm/hello_world/