How to Draw a Day/Night World Map

Actually, there is nothing too hard, especially if you have a good astronomical algorithm library. Nowadays we could do this using only plain JavaScript and a HTML5 canvas.

The algorithm is the following:
  1. Find the current equatorial coordinates of the Sun, the hour angle and declination (thus we automatically get the latitude and longitude of the subsolar point).
  2. Map each pixel of the Earth map to the corresponding geographic coordinates using map projection transformations (actually it's convenient to have angle values in equatorial coordinate form for the following calculations).
  3. For each pixel of the map check whether it distant from the subsolar point farther than 90 degrees (because the shadow edge is a great circle).
  4. If so, convert RGB values of the pixel to HSV color representation and decrease the Value channel by two (or get the same pixel from a night version of the map), then put processed pixel data back using reverse HSV to RGB conversion.
  5. That's all.
    Implementation details:
    1. To find estimate subsolar point coordinates it's only necessary to correct the current UTC time with the equation of time (to get the hour angle) and find the position of the Sun on the ecliptic using the amount of time since the vernal eqinox (to find the declination). It's also possible to use this approximate algorithm. But there are more precise algorithms which have deal with Earth axial precessions and nutations, Earth elliptical motion and other periodic theories, which are described in the book Astronomical Algorithms by Jean Meeus. Nevertheless, it's very hard to implement and debug them properly, so we will use existing JavaScript implementation by Henning Umland.
    2. Because we use equirectangular map projection, there is no need for pixel to spherical coordinate conversion - the longitude and latitude are mapped directly to the cartesian coordinates. We only need to adjust the origin of the map.
    3. To find the angular distance between the subsolar point and the pixel being processed we need to use the spherical law of cosines in application to the angular coordinates of the corresponding points.
    4. Because HTML5 canvas has ability to draw semitransparent rectangles we do not need to mess with HSV color representation, and it's also possible to apply some optimizations to the algorithm. As we know that a projection of the sunlight shadow on the Earth map is a sine-like figure (unambiguous mapping), we only need to find the first top or bottom pixel (depends on the current season) of the shadow for a given pixel column and draw one pixel wide semitransparent rectangle to the opposite map edge.
    5. The Sunlight World Map HML5 Demo and a Windows Desktop Gadget are available at GitHub.



    ¹ Make sure that daylight saving time settings are configured properly on your system

    No comments:

    Post a Comment