3
$\begingroup$

I am querying an API (weatherbit) which returns a moon phase number which looks like this:

0.9594168

For the 16 days I look at the numbers vary from 0.006 to 0.99. I have 8 "moon phase" icons for the full, crescent, gibbous, etc. phases. Filenames are the phase names.

How can I map the moon phase number to the phase names so I can use images with those names appropriately.

Final Update: Use moon_phase_lunation (instead of moon phase number) only

Here is the final js-react code which seems to be working well so far:

import React from 'react';
const Moon = ( data ) => {
  const lunation = Number(data.moon_phase_lunation);
  let imageToUse;
  if (lunation <= .06) imageToUse = 'new';
  if (lunation > 0.06 && lunation <= .19) imageToUse = 'waxing_crescent';
  if (lunation > 0.19 && lunation <= .31) imageToUse = 'third_quarter';
  if (lunation > 0.31 && lunation <= .44) imageToUse = 'waxing_gibbous';
  if (lunation > 0.44 && lunation <= .56) imageToUse = 'full';
  if (lunation > 0.56 && lunation <= .69) imageToUse = 'waning_gibbous';
  if (lunation > 0.69 && lunation <= .81) imageToUse = 'first_quarter';
  if (lunation > 0.81 && lunation <= .94) imageToUse = 'waning_crescent';
  if (lunation > 0.94 ) imageToUse = 'new';
  const imageURL = `/moonIcons/${imageToUse}.png`;
  return (
    <>
      <img src= { imageURL } width="20px" height="20px" />
    </>
  );
};

export default Moon;
$\endgroup$
5
  • $\begingroup$ Could you provide a link to the API you're using? Another number might help you distinguish waxing and waning phases. $\endgroup$ – Mike G Dec 13 '20 at 17:42
  • 1
    $\begingroup$ they also give "moon_phase_lunation" which for one value just checked was 0.95, but sure what values are used for that. url is rapidapi.com/weatherbit/api/weather and then 16 day forecast $\endgroup$ – Michael Durrant Dec 13 '20 at 18:12
  • $\begingroup$ Different but related question, you may find the question and answer posts and the comments under them illuminating (pun intended) Mapping illumination to moon phase (font) icon $\endgroup$ – uhoh Dec 13 '20 at 23:46
  • $\begingroup$ Looks good, but I think you have first and third quarters swapped. $\endgroup$ – Mike G Dec 14 '20 at 16:17
  • 1
    $\begingroup$ Yeah that kept confusing me. Ui looks right so maybe I got images right but names for those swapped. $\endgroup$ – Michael Durrant Dec 14 '20 at 16:21
6
$\begingroup$

The WeatherBit 16-day forecast documentation gives these output field descriptions:

  • moon_phase: Moon phase illumination fraction (0-1)
  • moon_phase_lunation: Moon lunation fraction (0 = New moon, 0.50 = Full Moon, 0.75 = Last quarter moon)

The illuminated fraction doesn't help you distinguish waxing and waning phases, so moon_phase_lunation is the value to use. One possible mapping is:

0.0 ๐ŸŒ‘ 0.06 ๐ŸŒ’ 0.19 ๐ŸŒ“ 0.31 ๐ŸŒ” 0.44 ๐ŸŒ• 0.56 ๐ŸŒ– 0.69 ๐ŸŒ— 0.81 ๐ŸŒ˜ 0.94 ๐ŸŒ‘ 1.0

$\endgroup$
4
  • $\begingroup$ Ah, that's great. bonus thanks for using the character codes. i also considered them but found them too yellow for me. luckily my backgfround is non-white so actual white moon work and look better to me $\endgroup$ – Michael Durrant Dec 13 '20 at 19:57
  • $\begingroup$ then ii considered some sort of blacfk and whote overlay but that seemed silly too $\endgroup$ – Michael Durrant Dec 13 '20 at 19:57
  • $\begingroup$ i also figured the change was a sine(/) wave which your numbers reflect so that is helpful $\endgroup$ – Michael Durrant Dec 13 '20 at 19:58
  • $\begingroup$ I expect that $\text{moon_phase} \approx \frac{1 - \cos 2 \pi ~ \text{moon_phase_lunation}}{2}$ $\endgroup$ – Mike G Dec 13 '20 at 20:07
4
$\begingroup$

It looks to me like these numbers from 0 to 1 are the amount of the moon showing, so a number near 0 is a new moon and a number near 1 is the full moon. Try

Min value Max value Phase name
0 0.05 New Moon
0.05 0.45 Waxing/Waning crescent
0.45 0.55 First/Third Quarter
0.55 0.95 Waxing/Waning gibbous
0.95 1.0 Full

If the numbers are going up, then use Waxing and First. If the numbers are going down, use Waning and Third. If it ends up that the numbers are instead the amount of moon in shadow, just reverse the order in the first two columns above.

$\endgroup$
4
  • $\begingroup$ Yeah I was thinking about seeing if numebr is increasing or decreasing. However that's a bit tricky programming that. I am now hoiping the lumation will help as shown. seeing if u have thoughts on that approach and use $\endgroup$ – Michael Durrant Dec 13 '20 at 19:46
  • $\begingroup$ I am not familiar with 'lumation', but it sure looks like your code is working correctly now! $\endgroup$ – Connor Garcia Dec 13 '20 at 19:48
  • 3
    $\begingroup$ It's not lumation, it's lunation. As in moon. $\endgroup$ – hobbs Dec 14 '20 at 6:40
  • 1
    $\begingroup$ Yes, lunation is the term, thanks $\endgroup$ – Michael Durrant Dec 14 '20 at 13:14

Your Answer

By clicking โ€œPost Your Answerโ€, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.