Computational APIs – Moon Phases, When?

“When will the moon look like that? The answer is…”

Website Experience



This web page was born through my burning desire to know more things about The Moon and using Wolfram Alpha API to provide more information about it. I had initially wanted to dive into largest moons in the solar system (in which the earth’s moon is 5th largest) because I wanted to create an interactive version of a similar poster I have on my wall. Another option was to continue within the realm of outer space and also thought of creating an information page about the Earth’s moon, which would focus on coding a fact page (Moon Phase 101), but alas, dealing with the way the answers are given through Wolfram led me to other options. As a result, I created a page to tell me when the moon phases are happening according to real time. The web page became less about information about the actual phases themselves but more of giving the answers about “when will the moon look like that certain shape?”

My goal for this experiment was simply to how to send a query string to an API such as Wolfram’s with a single click of the image and receive the feedback through text. I also wanted to pay attention to the overall look of the MVP page and allow some refinement on the design.



I started with using the example Nick showed in class about sending a query string to Wolfram through an input box. Since I was interested in creating a web page in the theme of the galaxy, I began by asking about the type of information that might be used. I asked questions about the different moons in the solar system and selected a few to ask as a string to Wolfram Alpha.

process-questions-02 process-questions-01


I did not expect these answers as they were specific to telling information about size, when I wanted a random fact about the moons themselves. Once I changed from using “What” to just treating the input box like a google search bar, it finally gave me a larger variety of answers. Using “tell me about” also generated a different answer, albeit long.

I realized that when working with Wolfram, you had to be clearer in what you ask for. If you use words that refer to a size, Wolfram will give you the answer relating to that. I would assume that if I wanted to ask about characteristics of the moon, I would need to have known about that information to ask it. Wolfram would not give me facts that I would not know how to ask. This contradicts the purpose of the web page, as I wanted to use it to provide more facts rather than having to search them on google before hand. Perhaps I wanted one single query that can provide different answers, but that would not be possible in this case.


Knowing this, I proceeded to change the focus to the earth’s moon. What I found amusing was when I sent the question with a “What” I received an answer that would be a response to “When.” It was only until I asked about the shape itself (“crescent”) that I would get information of the shape, which would serve the concept of “Moon Phase 101.” However, this would not work for the other shapes as Wolfram couldn’t understand the input to the names of the other phases. “What is a waning” “What is a Waxing” and “What is a full moon” would still give me the time in which the moon would be at that state in the month. I found this intriguing in terms of understanding the capabilities and limits of Wolfram Alpha. For the final page, I decided to create a page based on the answers that would imply “when” the moon will be at a certain shape, which allowed for visual association of the shape to when the phase occurs at the time of the month.


The p5.js aspect to this was quite simple, as I created the illusion of space in the background through randomly scattered circles that would change each time it refreshes.


I then found a free resource online on with the different moon phases and edited them accordingly.


The final challenges to this page were preloading these images and using the mouseClicked or touchStarted function that would sendtheMessage of the question string through pubnub to Wolfram.

Resizing the vector images and dividing them by 2 and arranging them accordingly on the page
The vector images arranged according to different x and y positions on the webpage. Used a reference from a previous p5 coordinate example to pinpoint all the locations.

In approaching the clicking/touch mechanism, I tried to use classes within functions to call upon the range on the images, which when activated, gives text feedback. I consulted this process with Maria and got a sense of it, but was not able to execute it. I believe in future projects or applications where it is needed, I would be able to utilize classes and perhaps create a “cleaner” javascript file.


Since it did not work, I consulted Omid and was reminded that the easiest way to complete this simple action was just to set the range within an if function. It was nice to be reminded that sometimes the simplest things are just truly, achieved through simple means.


Testing the clicking/touching of the moons and printing them on console

Each of the images would call the word to the phase itself, as shown above with “new moon.” Other phases would also send information pertaining to the shape itself, such as “waning gibbous” or “waxing crescent” and in turn, giving feedback of when it will next happen in the span of a month.


Next Steps

To further enhance the page, I would perhaps find out a way to prevent the overlapping of the response given when the images of the phases are touched. The answer is generated in the middle of the page but I would then need to find a way so that every time it is clicked, the text from the previous session disappears and is replaced with the new one. This would need experimentation with the styling of the text through readIncoming function on the basic Pubnub code and perhaps separating the strings or placing a text background if possible. I also would like to explore other types of api to enhance the page in terms of information and usage. It would be a great opportunity for me to use this theme as practice into diving deeper into css and p5.js for future web browser projects.


“9.8: Random Circles with No Overlap – P5.js Tutorial.” YouTube, 15 Mar. 2016,

“Hand Drawn Polka Dot Phrases.” Freepik,

“Moon Phase and Libration, 2019 Moon: NASA Science.” Moon: NASA Science, 19 Dec. 2018,

“P5.js | Reference.” P5.js | Home,

“Top 10 Largest Moons In The Solar System.” THE LATEST SCIENCE SPACE HI-TECH NEWS, 29 Jan. 2018,

“Top 4 Keys to Understanding Moon Phases |” EarthSky – Earth, Space, Human World, Tonight, 25 Jan. 2019,

Leave a Reply