Abstract Weather Forecast | Skillshare Projects

Abstract Weather Forecast


Okay, I'm playing with the idea of an an abstract weather forecast display.  I'm checking in code as I go.


The idea is that the display is built from blocks of grids of squares.  The squares' fill colors are pulled from an HColorPool that contains colors that represent "sunny," "cloudy," and whatnot.  I'll populate the HColorPool with proportions of those colors that reflect the "chance of" different types of weather.

For instance, a day that's "mostly cloudy" I'll draw a block from an HColorPool that is mostly a grey color, and the rest blue sky, with maybe some sun color in there just to be interesting.

Next:  (20130916)

I might have lucked out, the "XML Data" section of http://processing.org/tutorials/data/ uses the yahoo weather rss format as an example.  I might be able to collect my weather data without needing a third-party library.

Yahoo Weather API:  (20130917)

Okay, got it.  The Yahoo weather API is a cinch.  I've got a function in my code called fetchForecastCodes() that queries Yahoo and gets a forecast for a given location.  They return all sorts of interesting stuff, but each day's forecast includes a "code" number that maps to those "friendly" descriptions like "cloudy," and "light drizzle."  The list is here: http://developer.yahoo.com/weather/#codes

Making a Block:

Once fetchForecastCodes() has returned an array of five days' forecast "codes," I can run those through my convertCodeToProportion() function.  That takes a day's "code" and returns an array of integers to be used as the proportion of colors in my HColorPool.

For instance.  If I fetch a forecast with fetchForcastCodes(), and the first day's "code" is 26, that corresponds to "cloudy."  I pass that to convertCodeToProportion() and it gives me back an array of { 0, 10, 90, 0, 0 }.  When that gets plugged in to my fill colors' HColorPool() it results in 0 sunny, 10 blue sky, 90 cloud, 0 rain, 0 meteor colors to the pool.  The block draws with those proportions.

Putting the "Fore" in the Forecast:

When I fetched the forecast codes for the first five days, day one is right now.  So I've got today, tomorrow, and the next three days.  So all I do is iterate five times, passing in each day's code, and moving over 128 pixels each time, and I get a nice row of blocks.

Try it Yourself:

All the code is up on github.  Pull requests are heartily encouraged!



Please sign in or sign up to comment.