AI-Powered Solar System Animation: Customizable and Interactive

Leave a Comment / AI Reviews Hub / By

As an astronomy enthusiast, I have always wanted to create an animated trajectory map of the solar system that not only moves but also allows me to set parameters. However, without coding skills, achieving this seemed quite challenging… With the advent of AI, can it help me? After some tinkering, I have finally created this animated page. The screenshot is compressed and not very clear, but you can view it by copying this URL: https://lxblog.com/qianwen/share?shareId=3dc1e1dd-5933-40e5-9f01-1ef2a3ca3542&type=codePreview
How was it done? Simply send this Prompt to AI. Create a dynamic solar system model that displays the Sun and the planets orbiting it, including Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and Neptune. Each planet should have its own orbit and rotation animation. Earth should have a Moon orbiting it. The background should be a dark space with stars, which should have varying levels of transparency and sizes.

Requirements: Use the element to draw the solar system model, with a canvas size of 600px wide and 800px high, centered display. The background should use an elliptical radial gradient, transitioning from dark blue (#1C2837) to black (#050608). Add 150 stars to the background, randomly generated, with star sizes ranging from 0.5px to 1px, and random transparency ranging from 0.5 to 1. The images of the Sun and planets will be loaded via CDN, using the following image resources: Sun: https://img.

alicdn.com/imgextra/i1/O1CN01oVLbLx22VlN34KDQs_!!6000000007126-2-tps-800-800.png Mercury: https://img.alicdn.com/imgextra/i2/O1CN01UjgqIB1SrRxQfrflh_!!6000000002300-2-tps-800-800.png Venus: https://img.alicdn.com/imgextra/i3/O1CN01JGEgLU1dfxnVvp91R_!!6000000003764-2-tps-800-800.
PNG Earth: Image

Moon: Image

Mars: Image

Jupiter: Image

Saturn: Image

Uranus: Image

Neptune: Image

The size of each planet and the Sun’s image should be scaled according to the actual size of the planets. The Sun is 60px in size, and other planets are scaled proportionally: Mercury: 5px, Venus: 8px, Earth: 10px, Mars: 7px, Jupiter: 12px, Saturn: 24px, Uranus: 9px, Neptune: 8px.

Each planet and the Moon should move smoothly and rotate on their orbits. Use requestAnimationFrame for smooth animation.

Each planet should orbit the sun along an elliptical path with the following radii: Mercury: 60px, Venus: 90px, Earth: 120px, Mars: 150px, Jupiter: 180px, Saturn: 210px, Uranus: 240px, Neptune: 270px. Additionally, a moon should be depicted orbiting the Earth with a radius of 10px and an orbital radius of 10px around the Earth. Each planet’s rotation speed varies, calculated based on its orbital radius and the Math.

cos and Math.sin methods to determine the planet’s position, simulating the trajectory of planetary motion. Ensure that each planet’s motion is periodic with different cycles: Mercury: fast speed, shortest period, calculated using angle * 4. Venus: medium speed, slightly longer period, calculated using angle * 3. Earth: longer period, calculated using angle * 2. Mars: calculated using angle * 1.5. Jupiter: calculated using angle * 1.

Saturn: calculated using angle * 0.8. Uranus: calculated using angle * 0.5. Neptune: calculated using angle * 0.4. When drawing the planets, the ctx.drawImage() method should be used to place the images at the appropriate positions on the orbits, and the size of the planetary images can be adjusted proportionally. The ctx.beginPath() and ctx.arc() methods should be used to draw the orbits of each planet, which should be dashed lines with a transparency of 0.

2. In the top right corner of the page, there is a line of text ‘Woyin AI Test Page’, in Song font, size 10, right-aligned. Code structure: HTML part: use the canvas element and set its width and height to 600px × 800px. Add inline styles to set the background, font, etc. JavaScript part: load all planetary and sun images, and ensure that all images are loaded before starting to draw. Use an array called stars to store randomly generated stars and draw them.

Use the drawSolarSystem() method to draw all elements, including the sun, planets, orbits, and moon. The requestAnimationFrame() method is used to achieve smooth animation. Note from the author: ‘Jing Shui Liu Shen’, I have made minor adjustments. The AI will write code based on your instructions and generate a preview page.

The page can be shared and downloaded. It supports more than 10 languages such as Python, Java, C#, C++, PHP, C, VB, Lua, Rust, and Swift. Tongyi has launched the ‘Code Mode’ feature. At first glance, doesn’t it seem familiar? Yes, isn’t it similar to Claude’s Artifacts and ChatGPT 4o’s canva? It can visualize program development (especially web applications) and assist in writing code, which has been recognized by many developers.

Through Artifacts or canva, applications can be easily created, and viewed, edited, and updated in real time. Of course, Artifacts not only supports visualization in application development but also in other content generation, such as long text organization, SVG output, chart and flowchart output, etc. Tongyi’s ‘Code Mode’ is actually more like 4o’s canva, only focusing on the field of code writing.

Now, finally, there is a domestic AI that supports this function, which is great! Previously, we introduced the god-level Prompt ‘New Interpretation of Chinese’, written by Teacher Li Jigang in the very ancient Lisp language, and it works best when used with Claude. Later, Teacher Yunzhong Jiangshu ‘Sinicized’ this prompt word and converted it into a structured prompt word in Markdown language (the most suitable language for ordinary people to write).

First, let the AI generate html code, and then copy the code to a preview website for viewing. The process is rather roundabout. At that time, I also asked Teacher Yunzhong Jiangshu, ‘Is there a simpler way?’ And now it has come. I sent the Prompt to Tongyi to try. It’s great that it can directly generate a preview. Then I thought, if I directly copy this code and connect to the large model API, wouldn’t a venomous-tongued AI like ‘talking substitute’ be created? A few days ago, I introduced Doubao’s SeedEdit model to everyone, which can easily P pictures with one sentence.

Now, writing code and building websites are also the same, generating with one sentence. For example, for the company’s annual meeting, if the administrative staff wants to make a lottery page, there is no need to trouble the developers. Just give Tongyi one sentence. Want to play Tetris? Build one by yourself. You don’t have to endure those small websites full of spam ads anymore. By the way, I played the game made by AI on the test page and got more than 1000 points.

Here is the page I have already made. You can directly use it to play. Press the Q and W keys to rotate, and use the arrow keys to move left and right. https://lxblog.com/qianwen/share?shareId=ceafad0e-723a-42cd-8fd8-8022206ee2cb&type=codePreview If you want your children to learn Chinese idioms and don’t want to miss the Chinese characters, pinyin, and explanations (including English translations), just send this Prompt to Tongyi, and it can generate posters with one key.

Please generate an HTML webpage to create a 400*600 poster with the following requirements: 1. The title should be an idiom, such as ‘Bai Ju Guo Xi’, in bold. Underneath is its Chinese pinyin, in bold Song font.

2. Deconstruct the idiom, describe it with 3-4 emojis, each approximately 200*200 pixels, 40 pixels away from the title.

3. Below the emojis is a basic explanation of the idiom, explained in 20-50 characters; underneath the explanation, attach its English translation.

4. At the bottom is a sentence made using the idiom, separated by a short line.

5. The overall background should be chosen from the Morandi color palette, with some patterns and meanders around the card, simple, fresh, and artistic.

6. The layout should be clear and breathable, elements should not overlap each other, everything should be centered and aligned, with a margin of at least 40 pixels on all sides. Personal resume webpages are also available with one-click direct output. All content supports customization or can be generated by large models. For code and prompt details: https://lxblog.com/qianwen/share?shareId=c29910e0-5710-4f2c-8b2d-2d3f7c3082b9&type=codePreview In the application square of Tongyi, the official provides multiple application templates that can be directly called with one-click generation.

Finally, what do you think is the most valuable thing brought to us by this wave of AI? I believe it is empowerment, technological empowerment, making ‘everyone can xx’ a reality. In the past, coding, building websites, and developing applications were only mastered by programmers, but now AI has further lowered the threshold for application development. With a certain programming foundation plus AI, you can create fun and useful applications.

This is the empowerment brought by technology. In the past few months, more and more developers have been experimenting with various applications on Claude and OpenAI, some of which have become hits. For example, the open-source project ChatNio by 15-year-old high school student zmh sold for millions. Now, China AI has also come with this feature, adding more strength to empowerment. Previously, there was a picture circulating within the AI industry, Tongyi was ‘mocked’ for being last in advertising investment, Tongyi operations shouted ‘wronged’ online, saying there were not so many because they ‘spent money on product development, computing power support, and improving user experience.

‘ My friend mio (the person in charge of the Super Rebar AI) said: ‘I don’t know who is the first in terms of model capability; but in terms of abstraction and creativity, Tongyi can definitely be ranked first.
In the realm of operations and product development, Tongyi undoubtedly possesses exceptional skills. For instance, the coding pattern introduced this time is genuinely beneficial to me. This is sufficient.

Must Read

Leave a Comment

Your email address will not be published. Required fields are marked *