How Dark Sky Works
Posted on by Adam GrossmanA lot of people have been wondering how our weather prediction app, Dark Sky, works. In this post I’ll try to shed some light on what goes on under the hood.
A lot of people have been wondering how our weather prediction app, Dark Sky, works. In this post I’ll try to shed some light on what goes on under the hood.
What does it say about the human race as a tool-building species that we still — after centuries of technological progress — have no means of objectively quantifying a person’s face reduction aptitude?
This will not stand. Jack and I knew we had to do something. So we built Tiny Face, the world’s first mobile app for scientifically determining one’s face reduction percentage.
Mankind has been broadcasting radio waves into deep space for about a hundred years now — since the days of Marconi.
That, of course, means there is an ever-expanding bubble announcing Humanity’s presence to anyone listening in the Milky Way. This bubble is astronomically large (literally), and currently spans approximately 200 light years across.
But how big is this, really, compared to the size of the Galaxy in which we live (which is, itself, just one of countless billions of galaxies in the observable universe)?
Turns out, canvas kinda sucks for developing full-screen animations on the iPhone and iPad. Without hardware acceleration and a more efficient clearing mechanism, it just doesn’t cut the mustard.
But all hope is not lost... CSS 3D transforms to the rescue!
Over the next several months, Jack and I will be building a series of fun little interactive online games for a client. In years past, these type of (animation-heavy) games would have undoubtedly been built in Flash. Our client, however, is forward-thinking enough to let us try ditching Flash and implementing them all with HTML / CSS / JS (a.k.a. “HTML5”).
Now, when it comes to building rich, graphical, animated games in HTML5, the obvious first step is to investigate Canvas. We’ve done so, and we’ve come to a couple conclusions…
I wanted a reasonably sized photographic image with a 24-bit alpha channel. So I used a JPEG for what JPEGs are good for and a PNG for what PNGs are good for...
I combined them using an HTML5 canvas element and then inserted into the DOM. The results look the same as using a normal 24-bit PNG but are one-half to one-sixth the size. In one case we got a 573KB 24-bit PNG down to a 49KB JPEG with a 4KB PNG alpha-mask!