Introduction
The Sun is the center of the solar system, but many people do not know that the Sun itself is traveling across space at a very fast speed (about 137 miles per second!).
In this tutorial, you will learn to build a simulation of the solar system as it moves in space. It will be a good practice on a few key techniques, such as parenting, transformer node, glow layer and trail mesh.
sunmove4.gif
Step 1 - Create a new project
Log into the CreatiCode playground, and create a new project. Remove the “Sprite1”, and rename the “Empty1” sprite to “Scene”. This sprite will be used as the starting point.
Step 2 - Initialize a scene with a starfield background
There is no 3D scene for the space. However, we can achieve that in 2 steps:
Initialize an “Empty” scene first;
Set the sky type to one of the starfield choices.
We can also add a 3D axis temporarily as we develop the program.
Here is the code:
4e4e3ec0-bd1d-422d-ad59-f3bb34566e8f-image.png
This is what the stage looks like.
1fcfb8d9-61be-4580-b65b-3b0bf654a5f1-image.png
Note that the 3D axis looks quite small for now, since when the sky type is set to the starfield, the camera is zoomed out by default. This won’t be an issue, since we will add a new camera to replace it later.
Step 3 - Send 3 messages
The rest of the program will take 3 steps:
Add the Sun
Add planets (Earth and Mars)
Make them move
We can easily sequence these events using 3 messages like this:
96e16eba-2e46-4b14-b5f2-f5cb0361b0c2-image.png
Make sure you use “broadcast and wait” for the first 2 messages, so these 3 steps are taken one at a time.
Step 4 - Add the Sun sprite
Next, add a new empty sprite, and rename it to “Sun”. In that sprite, when it receives the “add sun” message, add a yellow sphere to represent the Sun:
511d9cbc-2f90-4348-90af-39107d7eb768-image.png
Note that we are giving it the name of “sun”, so that we can select it later.
Step 5 - Add the Follow Camera
Since the Sun will be moving in the scene, we will use a “follow camera” to follow the Sun:
de795a44-a236-4984-bfa8-2831ba7a142d-image.png
You can adjust the distance and angle of the camera as you wish. Set its direction lock to “free” so that the user can drag the pointer to change the view angle.
f70a5028-3ad7-4a46-b88c-838381006a84-image.png
Step 6 - Make the Sun glow
To make the Sun glow some yellow lights, we need to set its emission color to yellow (by default, it is black), and then add it to a “glow layer”.:
6feea55d-d246-4db8-bfbd-109f21e006d5-image.png
Now there is some glowing yellow light around the Sun:
87869c46-76bf-49df-80b6-e2630d160d64-image.png
Step 7 - Add the Sun’s trail
To clearly show that the Sun is moving, we will give it a “tail” using the trail mesh:
452522b5-2c9f-4f8c-af34-c31c5ce352d4-image.png
The trail has the same color, and it is added to the default glow layer as well. We will see its effect once the Sun starts to move.
Step 8 - Make the Sun start moving
To test what we have so far, we can make the Sun move forward when it receives the “start” message. Don’t worry about the planets for now. Add this to the Sun sprite:
86474c2b-634d-4256-b137-e451c32c0cef-image.png
Note that we need to select the “sun” object first before setting it speed. This is because the active “sprite object” in this sprite is the trail of the sun, not the sun object, as we added the trail object after adding the sun object.
After this step, the Sun will be moving when we run the project, leaving a trail behind it:
sunmove.gif
Step 9 - Add the Earth sprite
Now let’s work on the Earth. Add a new sprite and name it “Earth”. In this sprite, when it receives the “add planets” message, add a smaller blue sphere and move it to the right along the X axis for 200 units:
faed6d39-fe4f-46c6-8675-ca6a8264c853-image.png
Step 10 - Make the Earth move and orbit
Now we arrive at the most challenging question of the project: how to make the Earth moves together with the Sun, and also orbit around it?
An immediate answer is to use parenting. If we make the sun object the parent of the earth object, then as the sun moves, the earth object will move as well. Also, if we make the sun object spin around itself, the earth object will orbit around it.
However, there is one issue with this solution: the orbit speed of the earth object is determined by the spinning speed of the sun, so if we add the Mars later, it would orbit around the sun at the same speed.
The solution is to add another intermediate object to help with the orbiting movement. Let’s call it “earthparent”. So the “sun” will be the parent of “earthparent”, and “earthparent” will be the parent of the “earth” object:
7817b952-945f-4e30-bbd3-8b4cfe2d0917-image.png
After this step, the sun will make the earthparent and the earth move with it (we will add the orbiting behavior later).
Step 11 - Add trail to earth
We will apply the same code as the sun to make the earth object glow and add a trail to it:
d2b8967e-be97-4c0d-913c-9a13fc34b553-image.png
Now we can clearly see both of the sun and the earth moving:
sunmove2.gif
Step 12 - Make earth orbit
To make the earth object orbit, we just need to rotate the “earthparent” object:
15b9b767-ff52-4d8c-a320-ae99f24fe108-image.png
Note that they are moving along the Y axis, so the rotation should be around the Y axis as well:
sunmove3.gif
Step 13 - Add the Mars
Since the code for Mars will be very similar, we will first duplicate the Earth sprite to a new sprite named “Mars”. Then we have to make a few changes:
26670cf9-1351-4692-890d-54341227b385-image.png
Names: mars and marsparent
Color: blue to orange
Size: Mars’s diameter is about half that of Earth
Distance: Mars’s distance to the Sun is about 1.5 times that of Earth
Orbit Speed: Mars’s orbiting speed is about half of that of Earth.
With all these changes, now we have a complete simulation:
sunmove4.gif
Enhancements
For some extra practice, here are some ideas to enhance this project:
Add other planets in the solar system: Make sure you get their size/distance/orbit speed correctly relative to the Earth.
Make the Sun orbit: The Sun actually doesn’t travel in a straight line. It also orbits in a very big circle path. You can illustrate this by adding a new parent object to the Sun itself.
Add the Moon: You can add the Moon of Earth that orbits around the Earth.
Toggle camera views: You can allow the user to pick which object the camera should follow. Be prepared for some seriously dizzying results!
