Overview
This prompt aims to guide developers in creating an interactive solar system UI using TypeScript. It benefits programmers seeking to enhance their skills in UI development and 2D visualizations.
Prompt Overview
Purpose: This UI aims to visualize a 2D solar system for educational and interactive purposes.
Audience: It is designed for students, educators, and astronomy enthusiasts interested in planetary dynamics.
Distinctive Feature: Users can dynamically adjust planet positions and switch between geocentric and heliocentric perspectives.
Outcome: The project will enhance understanding of planetary motion and reference frames through interactive learning.
Quick Specs
- Media: Text
- Use case: Content Creation, Generation, Planning & Strategy
- Industry: Content & Media Creation, Development Tools & DevOps, Renewable Energy (Solar, Wind, Hydro)
- Techniques: Role/Persona Prompting, Self-Consistency, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
Create a user interface (UI) using TypeScript that displays a 2D solar system visualization.
The UI should allow users to:
– Adjust the positions of planets dynamically.
– Select between geocentric and heliocentric reference systems for the planetary orbits.
**Requirements:**
– Use TypeScript for the implementation.
– Render a 2D solar system clearly showing:
– The sun
– Planets
– Their orbits
– Provide interactive controls to:
– Adjust each planet’s position in real-time.
– Toggle between geocentric (Earth-centered) and heliocentric (Sun-centered) viewing perspectives.
– Ensure smooth and intuitive user interactions for:
– Adjusting positions
– Switching modes.
**Steps:**
1. Set up a TypeScript project with a UI framework or canvas library suitable for 2D rendering.
2. Model the solar system, including:
– The sun
– Planets with appropriate initial positions.
3. Implement rendering logic to:
– Draw orbits and planets on a 2D plane.
4. Provide interactive controls (e.g., sliders or drag handles) to:
– Adjust planet positions individually.
5. Add a toggle control to:
– Switch the reference frame between geocentric and heliocentric systems.
6. Update the rendering dynamically to:
– Reflect position adjustments and system changes.
**Output Format:**
Provide the fully commented TypeScript source code for the UI, including:
– All components
– Rendering logic
– Interaction handlers necessary to fulfill the described functionality.
Screenshot Examples
How to Use This Prompt
- Copy the prompt for your coding task.
- Set up a TypeScript project with a UI framework.
- Model the solar system with the sun and planets.
- Implement rendering logic for orbits and planets.
- Add interactive controls for position adjustments.
- Provide a toggle for geocentric and heliocentric views.
Tips for Best Results
- Set up TypeScript project: Use a framework like React or a canvas library like PixiJS for 2D rendering.
- Model the solar system: Create classes for the sun and planets with properties for position and orbit radius.
- Implement rendering logic: Use the canvas API or a library to draw orbits and planets based on their positions.
- Add interactive controls: Use sliders or buttons to adjust planet positions and toggle between geocentric and heliocentric views.
FAQ
- What is the main purpose of the UI?
To visualize a 2D solar system and allow dynamic adjustments of planet positions. - Which programming language is used for implementation?
TypeScript is used for building the solar system visualization UI. - What two reference systems can users toggle between?
Users can switch between geocentric and heliocentric reference systems for orbits. - What interactive controls are included in the UI?
The UI features sliders for position adjustments and a toggle for reference frame switching.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
