This project is the result of experimenting with OpenAI’s ChatGPT to develop a tool for visualizing the phases of the Moon. It is licensed under the MIT License. See the LICENSE file for details. The project source code is hosted on GitHub at https://github.com/dcrastro/phases.
To use the tool, navigate to https://dcrastro.github.io/phases/phases.html. You can drag the scene around and zoom in/out using pointer gestures, adjust the Moon’s position in its orbit using the slider, and switch to the geocentric view with the toggle.
For those interested, here is how my interaction with ChatGPT for making this tool started. More details are available on request. First, a disclaimer:
The following conversation was generated using OpenAI’s ChatGPT. Any responses are generated by the model and should be taken in the context of a machine learning model.
Me:
Let’s develop a web-based tool to visualize in three dimensions how, as seen from the Earth, the Moon goes through phases due to illumination from the Sun. I would like the user to be able to adjust the position of the Moon in its orbit around the Earth, rotate and zoom the scene, and change where on Earth the viewer is. The Sun should illuminate the Moon in this visualization, so ray tracing may be needed, unless there is a better way. What do you think?
ChatGPT:
This sounds like a great project! Here’s a high-level outline to get you started on developing this web-based 3D visualization tool:
Choose a 3D rendering library: You’ll need a 3D rendering library to handle the drawing and visualization of the Earth, Moon, and Sun. Some popular options for web-based applications include three.js, Babylon.js, and A-Frame. For this project, I’d recommend using three.js as it has a large community and extensive documentation.
Set up the scene: Create a new HTML file and import the chosen 3D library. Set up a basic scene with a camera, a WebGL renderer, and a control system for rotating and zooming the scene. Use the OrbitControls from three.js to enable easy camera manipulation.
Create the Earth, Moon, and Sun models: Import 3D models or create simple geometries (such as spheres) to represent the Earth, Moon, and Sun. Apply appropriate textures to make them visually distinct. Scale the objects according to their relative sizes, but keep in mind that you may need to exaggerate the distances and sizes for better visualization.
Position the Moon and Sun: Place the Moon and Sun at their relative positions around the Earth. You can use an approximation of the Moon’s elliptical orbit and the Earth’s axial tilt for more accurate positioning.
Implement Sun illumination: Use three.js’s built-in lighting system, such as a DirectionalLight, to simulate the Sun’s illumination on the Moon. You won’t need ray tracing for this, as the built-in lighting system should suffice for the purpose of this visualization.
Implement Moon phase adjustment: Create a slider or another control interface that allows the user to adjust the position of the Moon in its orbit around the Earth. As the Moon moves, the lighting and the phase should update accordingly.
Implement viewer location change: Create a control interface that allows the user to change their location on Earth. This could be done through a dropdown menu of major cities or a world map. Adjust the camera’s position and angle based on the user’s location.
Add UI controls: Create UI controls for all user interactions like zooming, rotating, changing viewer location, and adjusting the Moon’s position. Make sure these controls are intuitive and easy to use.
Optimize performance: As web-based applications can sometimes struggle with performance, optimize the application by using lower polygon models, limiting the number of lights, and using efficient code.
Testing and deployment: Test the application on various devices and browsers to ensure proper functionality. Once the application is complete, deploy it to a web server for public access.
With these steps, you should be able to create a functional and visually appealing web-based 3D visualization tool for the Moon’s phases as seen from the Earth.
Me: (I then asked for javascript code examples with the basic functionality described, which we then collaboratively updated to construct the scene we wanted. ChatGPT provided suggestions for object textures and template code for the HTML page and style file. I asked ChatGPT to help me with the orientation display in the bottom-right of the viewer as well. Finally, I got instructions for adding a license and hosting the page on GitHub. Amazing!)