virtual unreality project (home)

Windspeed at Logan

This one gets its data from weather.gov/ NOAA RSS feed, measuring current windspeed at Boston’s Logan Airport.

Take a look at code if you want to see exactly how this works.

In the original version of this sketch, nothing happened until a visitor moved his or her mouse over the canvas, at which point a plume of smoke would trail to show wind direction and speed. I love the unexpectedness of that interaction, but I eventually became concerned that users’ tendency not to interact with a seemingly blank screen would prevent some people from seeing the visualization at all. I made some adjustments to accommodate both my preferred interactive mouse play, and a more passive viewing experience.

I encountered one major unexpected challenge with this project: retrieving the XML data via my Processing sketch when the sketch was not housed locally on my computer. When the XML was requested through the PDE inside an HTML5 canvas element (using the usual xml = new XMLElement(this, “myURL.xml”); syntax) I got an error back from my server. Turns out, this kind of cross-server data request is a no-no for security reasons (so if the XML had been hosted on my server, it would probably have worked fine).

I got around the problem with a wonderfully simple PHP script written by (and borrowed from) Brad R. at Autumn8.co.za who seems to have created the world’s only comprehensible tutorial for cross domain XML requests using Processing.js. I am deeply grateful, and highly recommend his explanation, here: http://www.autumn8.co.za/posts/loading-cross-domain-xml-into-processing-js Even a PHP noob like myself was eventually able to figure out how this works. Brad’s PHP retrieves the XML data as a String (just text) which can then be re-parsed back into XML that Processing understands. Look through my code to see where and how this happens. After that, the rest of the sketch proceeds normally.

UPDATE! I upgraded my server setting to PHP5, and suddenly the visualization stopped working. XML data was still retrieved, but out of order so the wrong data were ending up in the wrong variables. I discovered that I needed to make a minor adjustment to my PHP code (which actually simplified it) now that I am running PHP5. For those with PHP5 installed, try this:

$weatherdata = file_get_contents('http://www.weather.gov/xml/current_obs/KBOS.xml');
echo $weatherdata; 

I also found, once the PHP XML request was working, that the sketch was somewhat unreliable. Sometimes it would start right up with no problem, other times it would show an empty square, sometimes the upper lefthand text would appear with all values “null.” After hours of tinkering, I determined that the sketch was running into trouble because the Draw() function was starting before the XML had fully loaded (in retrospect, I’m pretty sure I learned about this issue with external data in class… I guess I was asleep that day). I added a Boolean (again, thanks to Autumn8′s demo) to check if the parseXML function was complete before drawing anything to the screen, and the problem seems to be solved.

2 Comments

  1. [...] Hurricane Sandy (10/29/12) I used the Windspeed Visualizer to keep track of rising winds in Boston. We lost power after a couple of hours, so I had to rely on [...]

  2. [...] project is made with processing.js. The code is very similar to what I used for the fist Windspeed Visualizer. The big innovation is my finally figuring out how to use the wind direction (available in [...]

Leave a Reply