I started this little project because it was hard for me to understand how moon phases work, so I decided to visualize them. I am not an astronomer but I know that the animation is not faithful to the reality, but I hope that it will help you to understand a little more how the moon phases work.
I am not an expert programmer, and probably the way I wrote the code is not the best one in the world, but I am very proud about the final result because I had fun and I learned a lot writing it.
You can find the files of the program in the folder moon-phases-complete.
I have also done a smaller version of the moon phases animation that you can find in the repo under the folder moon-phases-small and clicking this link.
For the animation I used:
To run this project, you can:
- click on this link
- open it with the web editor of p5.js so that you can also modify the code
- use a live server (if you use VSCode you can use this extension, or you can install brackets which is a text editor with the live server functionality built in)
- use another method, there are a lot...
If you have some issues understanding what the semicircles you are looking at represent, I will explain in the next lines:
- the biggest yellowish semicirle represent the illuminated half of the earth, the other half is dark, so you can't see it
- the smaller semicircle orbiting around the earth is the moon
- the circle on the right is the view of the moon from the earth, this is the part to look at to see the phases of the moon
