Posts tagged “html5:”
Just spent the evening recreating photoshops multiply blend mode on an image, over a fluid background using HTML5’s canvas element.
Pretty happy with how it turned out, still need some work to make it faster.
Click though and resize your browser to see it in action.
This is amazing!
Radarmatic is a weather radar visualizer. It uses HTML5 and its own API to draw radar images with live data from the National Weather Service.
The white dots on the map represent 155 radar sites across the US. As you drag it around, the radar closest to the center of the map will light up with its most recent data. The colored areas show where precipitation is occurring at varying levels of intensity. Pushing play will animate the last few hours.
The imagery is not pre-generated, but rather drawn in-browser with Javascript. For this reason it can be processor intensive, especially while animating. Safari and Chrome are recommended over Firefox.
I’ve always wanted to do something with radar data. The NWS creates an incredible wealth of information available every day about the physical world around us, but it’s locked away in an obscure binary file format developed long before the web. In order to visualize the data the way I wanted to, much bigger and in crazier colors than I’d ever seen used for weather radar before, I needed to translate it to a format I already understood.
After many hours of research and fumbling around with a hex editor, I wrote a program in C called radar2json to convert the binary product files from the NWS into JSON (and which I’ve open sourced under the MIT license). I built a web service around it that anyone can use.
From a user interface standpoint, I set out to make something that puts as much focus as possible on the imagery itself and drastically reduces the friction of moving through it. Every other interface to radar data I’ve seen so far is scientifically oriented and does a poor job of being tactile and interactive, which I think is important for making a rich impression of what’s happening in our physical environment.
Give it a try and let me know what you think. And keep your eye on the Carolinas in the next 24 hours!
Head over to The Wilderness Downtown right now.
It’s an awesome interactive HTML5 video by Arcade Fire!
So good.
