Key Topics Covered

• Initializing 3D scenes
• Using spheres
• Updating textures
• Setting object speeds
• Highlighting objects

 
 

Introduction

In this tutorial, you will learn to create a spinning Earth:

 
 

Step 1 - Initialize An Empty Scene

First, create a new project, and load an empty scene using the “initialize 3D scene” block.

By default, it will create an empty scene with nothing but a blue background:

 
 

Step 2 - Set the Background Starfield

Next, use the “set sky” block to create a better-looking backdrop:

You should get a starfield with the Sun on the right.

 
 

Step 3 - Add a Big Sphere

Next, add a sphere with a large diameter of 10000 to the scene. Don’t worry about its color yet.

The sphere would look brighter on the side that faces the Sun.

 
 

Step 4 - Add Earth Texture

Now we need to update the sphere’s texture with the Earth. Add the “update texture” block, click the “Please select” input box, then search for “Earth” in the library window.

 
 

Step 5 - Flip the Earth Texture

You might have noticed an issue with the texture: the continents are upside-down. We need to flip the texture vertically to correct this issue. This can be done by changing the vertical repeat count from 1 to -1.

 
 

Step 6 - Make the Earth Spin

To make the Earth object spin, we can use the “set speed” block. Note that the Earth needs to be spinning from “left” to "right, so the “Z-rotation” speed needs to be negative.

Now your Earth object should be spinning slowly.

 
 

Step 7 - Highlight Around the Earth

Lastly, to make the Earth object glow in blue lights, we can create a new highlight layer, then add the sphere to that layer.

Now your Earth object should carry a blue light around it.

 

Next Steps

You can try to use a similar method to build other projects. Here are some example ideas:

• A Different Planet: You can change Earth to other planets like Mars;
• A Spinning Trophy: You can try to make a trophy object spin and shine.

@tyller_

Thank you. We are aware of this and it will be fixed soon.

Introduction

In an earlier tutorial, you learned how to build a 3 by 3 by 3 Rubik’s Cube. However, that cube can not be played. In this tutorial, you will build a game that can be played by multiple people together: they can all use the same “seed”, which gives them the same random state of the cube.

 
This tutorial is fairly long. It will be broken into 2 parts:

1. How to build a cube that the player can play with
2. How to automatically rotate the cube to generate a new puzzle

 
 

Part 1 - The Rubik’s Cube

 
 

Step 1 - Prepare the Sprites

 

Create a new project on the CreatiCode playground, and name it “Playable Rubik’s Cube”. Remove the “Sprite1” with the dog costumes, and rename the “Empty1” sprite as “Cubes”.

 
 

Step 2 - Initialize the Scene

 

As usual, start with a simple scene such as “Empty”, and add the 3D axis. Note that we will make each cube about the size of 1, so the 3D axis length is also very small:

 
 

Step 3 - The"Add Cubes" Block

 

Now let’s define a new block to add the cubes. Make sure you check “Run without screen refresh”, so it will not update the screen until all cubes are added, which will be a bit faster.

 
Also, run this block after initializing the scene:

 
 

Step 4 - Use a 3-layer For-Loop To Add and Move the Cubes

 

This step is already explained in the previous tutorial, so we will quickly go through it. We need to create 3 new variables “x”, “y” and “z”, and use 3 for-loops to make them iterate from -1 to 0 and then to 1. These 3 variables will then be used to place each cube in the corresponding position. For example, the first box will be placed at x of -1, y of -1, and z of -1.

 
In addition, we are using the size of 0.98 instead of 1, so that there is a small gap between the boxes. Otherwise, the 27 boxes will appear to be one big box. Feel free to pick any colors you like.

If you zoom in, you will see them like this:

 
 

Step 5 - Assign the ID 1 to 27 to the Boxes

 

To make it easier for us to refer to these boxes, we will name them using the numbers 1 to 27. We can use a new variable "ID’, set it to 1 initially, and increase it by 1 after we add each box.

 
You can verify they are all added correctly using the object list at the bottom right:

 
Note that the box at the center of the cube has the ID of 14, which is exactly the middle between 1 and 27.

 
 

Step 6 - Fix the Camera

 

Obviously, we need to move the camera much closer to the cube. More importantly, we need to make sure the user won’t be able to rotate or shift the camera, since the user input will be used to control the boxes themselves. We can achieve both goals with the following block:

 
The camera distance is set to 8. The v-angle of 60 will make the camera look down at the cube, so it can see the top face of the cube. The h-angle of 45 ensures that we see 2 side faces symmetrically. Both the key input and point input is set to “No”, so the user can not control the camera using the keyboard or the pointer.

 
When you run this block, the camera will have a fixed view like this:

 
 

Step 7 - The Camera Control Sprite

 

Since the users can’t move the camera by the pointer anymore, we need to provide another way for them to look at different parts of the cube. This logic is fairly self-contained, so we will put it in a new sprite called “Camera Control”.

In the “Cubes” sprite, after adding the boxes, send a message of “add camera controls” to add the camera control:

 
Then in the “Camera Control” sprite, receive this message to handle it:

 
 

Step 8 - Add a Button To Rotate Right

 

First, let’s add a button using the button widget, and place it at the bottom right corner.

 
Since the button is fairly small, it’s better to use an emoji symbol than writing some words on it. You can copy the right arrow emoji here:

The name of the button is “rightbutton”.

 
 

Step 9 - Update Button Style

 

To make the emoji bigger and colorful, we can update its style using this block:

Feel free to adjust its style any way you like. Now the button would look like this:

 
 

Step 10 - 3 More Buttons

 

Please add 3 more buttons by duplicating these 2 blocks. They will rotate the camera left, or up/down, or to the opposite direction. You can copy the 3 emojis from here: ️, and ↺

 
They look like this:

 
 

Step 11 - Rotate the Camera Right

 

When the “rightbutton” is clicked, we should rotate the camera to the right by updating its h-angle. This task appears simple since we just need to set the new h-angle to be the current h-angle minus 90 over a period of 0.2 seconds. Note that when we leave other inputs empty, their existing values will not be affected.

 
However, as we test this button, sometimes it doesn’t work well:

 
The reason is that the “camera h-angle” block always reports a degree value between -180 and 180, so its value will suddenly jump from -135 to 135 when we change it by 90 degrees. How can we fix this issue?

 
 

Step 12 - The “Camera H Angle” Variable

 

The solution is to use a new variable to store the current h-angle value of the camera, and we can make sure this value never “jumps” when we update it each time.

First, we need to set it to the initial h-angle of the camera when the program starts, which is 45.

 
Next, each time we rotate the camera to the right, we need to change its value by 90, and then use the new value to update the camera.

 
Now we get a smooth rotation no matter how many times we rotate the button:

 
 

Step 13 - Handle the Left Rotation

 

To rotate the camera to the left, the code is very similar:

 
 

Step 14 - Toggle Top and Bottom View

 

When the ️ button is clicked, the camera will toggle between looking at the top face and the bottom face. Obviously, we need to change the “v-angle” of the camera. The v-angle starts at 60, and we need to change it to 120 when the ️ button is clicked. And then we need to toggle it back to 60 when the ️ button is clicked again. Essentially the next value for the v-angle is always 180 minus its current value. This can be done using these 2 blocks:

 
You can now test these 3 buttons:

 
 

Step 15 - The Opposite View

 

The ↺ button is supposed to rotate the camera both horizontally and vertically, so the player can quickly review the other 3 faces of the cube. We can combine our solution for the previous 3 buttons: the v-angle of the camera will toggle between 60 and 120, and the h-angle will be calculated using the “Camera H Angle” variable:

 
Here is the result:

 
 

Step 16 - Turn on “Picking” Event

 

Now we are done with the camera controls, and let’s switch back to the “Cubes” sprite, and start working on rotating the boxes themselves.

First, to trigger a rotation, the player will need to start by pressing down the pointer on a cube. We can enable the “picking event” using this block:

 
Note that the event is triggered when the pointer is pressed down, not when it is released, because we want to handle the “swipe” gesture: we will record the pointer position when it is pressed down, and compare that with the pointer position when it is released. That will tell us how the player wants to rotate the boxes.

 
 

Step 17 - Store Some Information

 

When the picking event is triggered, that means the player has just pressed down the mouse pointer (or finger on mobile devices). At this point, we don’t need to rotate any box yet. We just need to store some information about this event, so we can use them later when the pointer is released. Specifically, we should store these 6 values:

 

• start x/y: they will tell us the 2D position of the pointer on the stage where the user has pressed down the pointer
• picked box: this is the name of the box right under the pointer. This box will determine which boxes will be rotated.
• picked point x/y/z: they will tell us the 3D position of the exact point on the picked box that was under the pointer. We can use them to help determine which face of the Rubik’s Cube was clicked.

 
 

Step 18 - Wait for the Pointer Release

 

Now we just need to wait for the pointer release event. When the picking event is triggered, the mouse point must be down, so “mouse down” is true. Therefore, we can simply use the “wait until” block to wait until the mouse is no longer pressed down:

 
 

Step 19 - Calculate Swipe Direction

 

When the mouse pointer is released, we need to determine which way the player wants to rotate the boxes. We can calculate the direction from the point where the pointer is pressed down initially (start x and start y) and the point where the pointer is released (mouse x and mouse y). We will store this information in a variable called “direction”:

 
Now you can try to drag the mouse pointer in a few different directions, and observe the value of the “direction” variable:

 
 

Step 20 - Analysis: Swipe Direction vs Rotation Action

 

Let’s start with the case where the camera looks down at the cube. Overall, there are 8 types of rotation actions we need to handle:

• To keep it simple, we will only allow the player to click on the right side face or the left side face, and we will ignore it if the player clicks on the top or bottom faces.
• On the right face (the yellow region), when the player swipes perfectly, the direction will be about 4° for rotating up, -176° for rotating down, 60° for rotating right, and -120° for rotating left.
• On the left face (the white region), the angles are -4° for rotating up, 176° for rotating down, 120° for rotating right, and -60° for rotating left.
   

 
 

Step 21 - The First Rotation Action

 

To start simple, let’s focus on one rotation action first: suppose the player clicks the right side face, and swipes to the right to rotate horizontally.

We know that the player’s swipe won’t be perfect. Suppose the player swipes to the right/up direction. How do we know if the player wants to swipe up or right? We can find the average angle between 4° and 60°, which is 32°. So if the swipe direction is greater than 32°, we take that as swiping to the right. Similarly, we can find the average angle between 60° and -176° (equivalent to 184°), which is 122°. So if the swiping direction is less than 122°, we claim the player is swiping horizontally.

 
We can express this idea using the following blocks:

 
 

Step 22 - Swipe to the Left

 

Similarly, when the player swipes to the left, we can use a similar range: the average of 4° and -120° is -58°, and the average of -120° and -176° is -148°.

 

So we can add another if-else block for this scenario:

 
 

Step 23 - The “Horizontal Rotation” Block

 

Now let’s define the block that’ll carry out the horizontal rotation. It should take one input parameter “angle”, which controls how many degrees to rotate (90° or -90°) .

 
Once this new block is defined, we can place it in our if-else branches:

 
 

Step 24 - Which Z Layer to Rotate

 

Each time we make a move on the Rubik’s Cube, we are rotating 9 out of the 27 boxes. For horizontal rotation, we need to know which of the 3 layers needs to be rotated. We can determine that based on the Z position of the cube the player has picked. Therefore, we can select the box named “picked box”, and read its z position.

 
Now if you try to drag different boxes on the right face, their Z positions will be printed out, which should be -1, 0 or 1.

 
 

Step 25 - Select by Z

 

Now we know the Z layer of the 9 boxes we want to rotate horizontally, we need to select all of them and set the center box (ID = 13) to be the parent of all of them. This way, if we rotate the center box around the Z axis, all 9 boxes will be rotated around the Z axis.

Since this process will go through all 27 boxes, it might be slow. Therefore, we will define another custom block named “select by z”. It will take the z layer as the input, and select all boxes with the same z position. We need to make this block “Run without screen refresh”, so it runs faster.

 
 

Step 26 - Select Boxes by Z Position

 

The goal of “select by z” is to go through all 27 boxes (with ID of 1 to 27), and select the 9 of them that have the same Z position as the input argument. That can be done using the following for-loop:

 
Note that whenever we select a box as the “sprite object”, the “z position” block tells us the z position of that box, so we just need to check if “z position” is the same as the input argument “z”.

 
 

Step 27 - Set the Center Box as the Parent

 

To make all 9 boxes in a layer rotate around the Z-axis, we need to assign a parent to all of them. Then we just need to rotate the parent. The best choice is the box at the center, with an ID of 14. This box will never be visible to the user, which means we can rotate it any way we need.

 
That completes our “select by z” block.

 
 

Step 28 - Use the “select by z” Block

 

Now we go back to work on the “Horizontal Rotation” block. We will first select 9 boxes by the z position of the box the player has picked using the “select by z” block.

 
 

Step 29 - Rotate the Center Box Horizontally

 

After the “select by z” block, the center box is the parent of the 9 boxes. So we can select the center box (using its ID of 14), and then rotate it over a period of 0.2 seconds. After the rotation, we will unlink all its children, so in the future, we can use the center box to rotate some other boxes. We also need to reset the rotation of the center box.

 
Now we are done with the “Horizontal Rotation” block. To illustrate how it works, here is an example with some boxes set to transparent:

 
As shown, when we swipe the mouse pointer, the center box rotates together with all 9 boxes, and then it resets back to the initial rotation by itself.

 
 

Step 30 - Swiping Up or Down

 

Now let’s go back to the logic of “when an object from this sprite is picked”. We already handle the case for swiping right or left. Now let’s add the conditions for swiping up and down.

As shown, if the direction of the pointer is between -58° and 32°, the player is trying to swipe upwards:

 
In our code, we need another if-else block:

 
 

Step 31 - Define “select by x” and “select by y” blocks

 

When we rotate the boxes vertically, depending on the camera position and the box picked, we may need to rotate the boxes around the X or the Y axis. So we need to be able to select 9 boxes based on a given x position or y position. To prepare for that, let’s first define 2 new blocks of “select by x” and “select by y”. They are very similar to the “select by z” block. Make sure you check the “Run without screen refresh” option.

 
 

Step 32 - Decide Whether to Rotate around X or Y Axis

 

There are a few ways to determine if we need to rotate around the X or the Y axis. One method is to make use of the picked point’s position.

First, let’s observe the x and y position of the picked point as we rotate the camera around the cube:

 
As shown, since we are clicking on a side face, either the x or the y position of the picked point is 1.49 or -1.49. For example, if the box’s x position is 1, and its size is 0.98, then its face is 0.49 units from its center, so its face is at x of 1.49.

So how do we know whether to rotate around the X axis or Y axis? Let’s look at one example first:

 
In this case, we are clicking a side face that’s facing the position X-axis, and the picked point has an x position of 1.49. If we rotate vertically, it must be around the Y-axis, and the 9 boxes must all have the same y position.

We can implement this logic like this:

 
This is very similar to the “Horizontal Rotation” block, with a few differences:

• We check the x position of the picked point to make sure the player is swiping on the side face that faces the positive x direction. Note that we can’t simply check if “picked point x = 1.49”, since sometimes the picked point x variable may give us a value like 1.489999. So it is safer to compare it with a slightly smaller value like 1.48.
• We are selecting all other boxes with the same y position as the picked box, and setting the center box as their parents
• We are rotating the center box around the Y axis.

 
 

Step 33 - Use the “Vertical Rotation” Block

 

Now we can go back to the “when an object from this sprite picked” block, and make use of the “Vertical Rotation” block for swiping up or down:

 
And it should be working now when we swipe the side face in the positive X direction:

 

 
 

Step 34 - Swiping the Negative X Face

 

Now let’s continue to implement the “Vertical Rotation” block. For the case when the player swipes the face that is in the negative X direction (picked point x is close to -1.49), the logic is almost the same, except that we need to rotate in the opposite direction:

 
And now we can test that as well:

 
 

Step 35 - Swiping the Positive or Negative Y Faces

 

When the player swipes on the positive or negative Y faces, we need to select 9 boxes with the same x position, and rotate all of them around the X axis:

 
As highlighted, the rotation angle needs to be reverted because the X and Y axis rotation works slightly differently.

By now, the vertical rotation works for all 4 side faces when we swipe on the right half of the stage:

 
 

Step 36 - Swiping the Left Half of the Stage

 

When the player swipes on the left side face of the cube in the stage, the logic is the same. We will look at the direction of the swipe, and decide which way to rotate and by how much. As shown below, the boundaries between the 4 directions are drawn in yellow:

 
We can duplicate the logic for “start x > 0” and update the conditions. We also need to update the rotation angles for some cases through trial and error:

 
By now the player can swipe on the left half of the stage as well:

 
 

Step 37 - Camera Looking Up

 

So far we have only handled the case when the camera is looking down, at a v-angle of 60. When the v-angle is 120, the swiping directions will be different:

 
However, since the camera v-angle is also symmetric between 60° and 120° (horizontal view angle is 90°), we find that the directions between the left side and right side switch with each other.

Therefore, all that we have to do is to add an extra condition like this:

 
This new condition says that

• if the v-angle is 60, do the following when the player swipes on the right half of the stage;
• Or if the v-angle is 120, do the following when the player swipes on the left half

The other opposite cases will all be covered by the “else” branch, which doesn’t need to be changed. By now, we are finally done with all the user input handling:

 
 

Part 2 - Random Puzzle Generator

 
 

Step 38 - Add the “Randomizer” Sprite

 

Now let’s add a new sprite called “Randomizer”. It will be used to generate a random puzzle.

First, when the green flag is clicked, it should add a new button to the stage. The text on the button is “Randomize”.

 
The button will look like this:

 
 

Step 39 - Ask for a Seed Number

 

When the player clicks the “Randomize” button, we will ask the player to input a “seed number”. This number will be used to generate a random formation of the cube. One thing special is that given the same seed number, the random numbers it generates are the same. This makes it possible for 2 players to use the same seed number on their own computers and get the same puzzle, so that they can complete who will solve it first.

We can add the following blocks to the “Randomizer” sprite. We will show a label that says “Specify a seed number:”, so the player knows who they need to input. We use the “ask and wait” block to take the player’s answer. Note that the input is empty here, since for 3D projects, the words input here won’t be displayed anyway. Lastly, when we get the number from the player, we will remove the label widget.

 
 

Step 40 - Generate 40 Random Numbers

 

Given the seed number, we will use it to generate 40 random numbers between 0 and 1, and store them in a list variable called “numbers”:

 
You can try to run this a few times, and confirm that when the seed number is the same (such as 22), the random numbers in the list are always the same from previous runs.

 
 

Step 41 - The “randomize” Message

 

After the random numbers are ready, we will send a message of “randomize” from the Randomizer sprite.

 
 

Step 42 - Go Through the Random Numbers

 

We will handle that message in the “Cubes” sprite. That’s because to rotate the boxes, we have to select them, and they are all created from the Cubes sprite. We can use a variable “i” to go through the list of random numbers, and change the boxes based on each number’s value:

 
 

Step 43 - The “Z Rotation” Block

 

Now we need to define some new blocks to make it easy to rotate the boxes. First, we will define a new block called “Z Rotation”. It will take one input argument “z”, and it will rotate 9 boxes with that z position. As you can see, this block is very similar to the “Horizontal Rotation” block, except we can easily specify which z layer to rotate.

 
You can test it using z values of -1, 0 or 1:

 
 

Step 44 - The “X Rotation” and “Y Rotation” Blocks

 

Similarly, we can define 2 more blocks to rotate around the X or Y axis:

 
 

Step 45 - Map Each Random Number to An Action

 

Now we have defined 3 blocks to rotate the cube around the 3 Axes. That means we can take any of these 9 actions:

1. X Rotation (-1)
2. X Rotation (0)
3. X Rotation (1)
4. Y Rotation (-1)
5. Y Rotation (0)
6. Y Rotation (1)
7. Z Rotation (-1)
8. Z Rotation (0)
9. Z Rotation (1)

 
We need to find a way to map each random number to one of these actions, and make sure for the same random number, the action is the same.

We know the random numbers are all between 0 and 1. A simple solution is to multiply each number by 10, then round it to a whole number. Then if the number is between 1 to 9, we will take the corresponding action. This way, random numbers are converted to random actions.

For example, we can start with the action 1 like this. Whenever the “action” is 1, we will rotate the 9 boxes at X of -1.

 
 

Step 46 - Add All Actions

 

The other actions are very similar:

 
Now our randomization code is also complete. You can test it out. Using the same seed 2 times (such as 22) will give you the same random result:

 
 

Step 47 - Add a Skybox

 

Now let’s use a better-looking skybox as the background, and hide the 3D axis. Note that we also need to re-configure the camera’s visible range, since the skybox is far away.

 
Here is a final demo of the game:

 
 

Next Steps

 

Congratulations on completing such a fairly complex project. There are still many more enhancements that can be made based on this project. Here are some ideas worth exploring:

• Timer: You can add a timer to show how many seconds have passed since the player starts the game
• Reversing the Random Moves: you can add another button to automatically take the opposite of the 40 random moves backwards. This will restore the cube back to the initial state step by step. It will make a very cool animation video.
• Saving Game State: You can add a “save” button to save the current position/rotation of all 27 boxes using the “save private data” block, and another button to “load” the data and restore the position/rotation of these boxes.
• Recording of a Solution: Whenever the player makes a move, you can save that move in a list or table. Then when the player has solved the puzzle, you can replay the entire process.
• Tutorial on how to solve a puzzle: You can create a series of tutorials that teach how to solve a puzzle, such as how to move a particular box to a target position. You can set the cube to any position and ask the player to practice solving it.
• AI to solve a puzzle automatically: You can work on an algorithm that solves any puzzle. To enable that, you would first need to provide information on the colors of the 9 squares on each of the 6 faces. That information can be derived given the position and rotation of each of the 27 boxes.

Introduction

 
Tables have a very simple structure, and they are perfect for practicing how to control the size, shape, and position of objects. In this tutorial, you will learn to build a few tables of different structures and shapes.

 
 

Step 1 - Start with an Empty Project

 

On the CreatiCode playground, log in to your account, then create a new project named “3D Tables”. Remove the “Sprite1” with the dog costume, and we will write code in the “Empty1” sprite.

 
 

Step 2 - Initialize a 3D Scene

 

You can pick a very simple scene as the background, such as the ‘Grass Land’ or ‘Classroom’, so long as it has a ground or floor to place the table.

 
 

Step 3 - Add the 3D Axis

 

If you are not very familiar with the 3D coordinate system, it will be very helpful to add the 3D axis during development:

 
As shown, by default, the X axis points to the right, the Y axis points forward, and the Z axis points up.

 
 

Step 4 - Add a Square Tabletop

 

Next, we will start with the tabletop. To keep it simple, let’s use a white box with a square face. The width and length will be 200 (X and Y dimensions), and the thickness (Z dimension) will be 10:

 
The center point of this box will have a z position of 0, so half of the box is above ground, and half is below:

 
Note that we are giving the box the name “tabletop”. This is optional, but there are 2 benefits:

1. For anyone reading our code (maybe our future selves), the name helps tell what this box is used for;
2. In the sprite info pane, we can clearly see that the tabletop is the selected “sprite object”, and its position/scale/size information is also displayed.

 
 

Step 5 - Move the Tabletop Higher

 

Now let’s move the tabletop above the ground. Let’s set its z position to 100, which means its center will be 100 units above ground.

 
Note that since the tabletop has a thickness of 10, its bottom face is 5 units below its center point. That means the bottom face is actually 95 units above the ground, and the top face is 105 units above the ground.

 
 

Step 6 - Add a Pedestal

 

For the simplest table structure, we only need one pedestal to support the tabletop. We can use a wooden-color box, with a width/length of 50, and a height of 100. Note that the height matches the Z position of the tabletop.

 
The pedestal will be centered at the Z position of 0 as well, so only half of its height is above the ground:

 
 

Step 7 - Move the Pedestal Above Ground

 

To move the pedestal above ground, we need some simple calculations. We want its bottom face to be at the Z position of 0, and its top face should be at Z of 100, so its center should be at Z of 50, which is half of the height.

 
Now the table is completed:

 
 

Step 8 - Transparent Tabletop

 

 
If you are sensitive with numbers, you may have noticed a small issue: the top face of the pedestal is at Z of 100, but the bottom face of the tabletop is at 95. That means the top of the pedestal is actually “plugged” into the tabletop. This is OK since it is hidden inside the tabletop and no one would see it. In most 3D projects, we only care whether things “look right”, and objects often overlap with each other in hidden places.

To illustrate this, we simply need to set the tabletop to semi-transparent:

 
And we will see that the top of the pedestal is at the center of the tabletop:

 
 

Step 9 - A Cylinder Pedestal

 

We can easily change the pedestal to a cylinder. We can use 50 for its diameter, and keep the same height of 100.

 
This is how it looks:

 
 

Step 10 - A Frustum-Shaped Pedestal

 

You may have seen tables with a frustum-shaped pedestal, where the top and bottom diameter of the cylinder is different. For example, we can change the bottom diameter to 100:

 
Now the table looks like this:

 
 

Step 11 - Change the Pedestal to A Leg

 

Next, let’s change the table to have 4 legs. Let’s still use a thin and tall box for the first leg named “leg1”:

 

 
 

Step 12 - Move the Leg to the Right-Front Corner

 

Since we will have 4 legs, each leg should support one of the 4 corners of the table. We will need to do some calculations for the X and Y positions of the first leg.

If we look at the table from the top, we can see that it is a square of 200 by 200. Since its center is at X = 0 and Y = 0, that means its top right corner is at X = 100 and Y = 100. We can place the first leg inside the corner, like X = 80 and Y = 80.

 
Now we plugin these 2 numbers into the “move to” block:

 
We can see the leg is moved to the right-front corner:

 
 

Step 13 - Another Leg

 

Now let’s add another leg on the left. We can duplicate the bottom 2 blocks. Since the legs are symmetric, the X position of the second leg will be opposite of 80, which is -80.

 
When we run this code, something strange happens, as we will only see one leg on the left. Can you guess why?

 
 

Step 14 - Name the Second Leg Differently

 

It turns out the problem comes from the name of the legs. When we add the second leg, but give it the same name of “leg1”, the 3D engine finds that there is already an existing object named “leg1” from the same sprite. Therefore, to ensure every object in this sprite has a different name, the 3D engine will automatically remove the existing leg before adding the new leg.

To fix this issue, we can rename the second leg as “leg2” or leave the name blank, so it will be named automatically.

 
Now we get 2 legs correctly:

 
 

Step 15 - Add 2 More Legs

 

We can follow the same approach to add 2 more legs on the back. Note that their Y position will be opposite of 80, which is -80.

 
And now we get a complete table with 4 legs:

 
 

Step 16 - A Longer Table

 

Next, let’s make a long table, so its top is not a square, but a rectangle of 400 x 200. We just need to modify the X size of the tabletop:

 
Now the table looks like this:

 
 

Step 17 - Move the First Leg to the Right

 

It looks like the 4 legs can not support this longer table well. We need to move them further apart. Let’s still start with the first leg on the right front. As shown below, the table’s right front corner has moved from (100, 100) to (200, 100), by a distance of 100. So it makes sense to also move the leg by 100, which means its X position will change from 80 to 180:

 
We just need to change one number in our code:

 
Now the leg is moved to a better position:

 
 

Step 18 - Move the Other 3 Legs

 

Now we just need to make a similar change for all the other 3 legs. Their X position will become 180 or -180:

 
The table looks much better supported now:

 
 

Step 19 - Add a Basketball

 

Lastly, let’s place a basketball on the table. First, add a “Basket Ball” model to the scene:

 
As shown, unlike boxes, the basketball model will appear above the ground when its Z position is 0. This is one of the key differences between simple shapes (boxes, spheres, cylinders, etc) and models/avatars.

 

 
 

Step 20 - Move the Basketball Onto the Table

 

To place the basketball on the table, we need to set its Z position to be the same as the tabletop, which is 100:

 
This is what we get:

 
Do you notice any issues? How to fix it?

 
 

Step 21 - Move the Basketball Above the Tabletop

 

There is one small issue. As discussed earlier, the tabletop’s center is at Z of 100, and because its thickness is 10, its top surface is at Z of 105. Since the bottom of the basketball is at Z of 100, the bottom slice of the basketball is inside the table.

Therefore, to make sure the basketball is placed on the tabletop, we need to set its Z position to 105, not 100:

 
Now we get a complete basketball on the table:

 
 

Creative Ideas

 

In this tutorial, you learned how to set the size and position of objects correctly. There are many shapes and models you can use on the CreatiCode platform, and you can use them to build almost any object. Here are some ideas for your consideration:

• Chair
• School Bus
• House
• Castle
• 3D Maze

@tyller_

That project is not shared?

@tyller_

Here is a simple test, which shows it works fine:

https://play.creaticode.com/projects/6557b9204561efe0d0cf1c0f

can you please create an example to show the error?

Thanks

Introduction

 
So far, we have been using ChatGPT’s existing knowledge and reasoning capability in our projects. For example, when we ask ChatGPT a medical question, we do not need to teach ChatGPT anything, since it has already been trained with a lot of medical knowledge and questions.

However, ChatGPT’s knowledge may not be enough in many applications.

• First, ChatGPT doesn’t know about events that have happened after its knowledge cut-off date (time of its latest training data).
• Also, ChatGPT only remembers the probability of which word will come next, and it doesn’t remember the exact content of any source. Suppose we want ChatGPT to answer questions solely based on a specific medical book, then it will likely fail or hallucinate (make guesses).

In this tutorial, you will learn a very useful skill: how to teach ChatGPT some new knowledge. Specifically, you will build a chatbot that can answer questions about CreatiCode. Because CreatiCode is fairly new at the time of writing (November 2023), ChatGPT does not know anything about CreatiCode. We will teach ChatGPT some new knowledge about CreatiCode, so that it can help answer questions about CreatiCode based on this knowledge.

 
 

Semantic Search

 
Before we start coding, let me explain the key method we will be using: semantic search. ‘Semantic’ means ‘meaning’, so ‘semantic search’ means to “search by meaning”.

For example, suppose I have a list of 5 questions about a book:

• What’s the name of the book?
• How many pages are in the book?
• What’s the book called?
• How much does the book cost?
• Where can I buy this book?

Now I have a new question “What’s the price of the book?”, and I want to find which of the 5 questions is similar to this new question.

If we use a traditional search method, we would need to find which existing question has the most number of common words as the new question. Obviously, these 2 questions share the most number of common words (5 out of 6):

• What’s the name of the book?
• What’s the price of the book?

 
However, because of the development of large language models, now we have a brand new tool called ‘semantic search’, which allows us to search this way: which of the 5 known questions has the most similar meaning as the new question? And using semantic search, we will get a much better answer: ‘How much does the book cost?’

Essentially ‘semantic search’ allows us to find sentences that are most similar in meaning, even if the words in these sentences are very different. As you shall see below, this will be very useful for our project.

---

 
 

[Advanced Topic] How Does Semantic Search Work?

 
If you are curious about how semantic search works, here is a simplified explanation.

Let’s still use the example above. For each of the 5 questions, we will first convert them to a vector, which is like an arrow on the XY axis:

• What’s the name of the book? -> (x = 0.9, y = 0.1)
• How many pages are in the book? -> (x = 0.3, y = 0.8)
• What’s the book called? -> (x = 0.4, y = 0.2)
• How much does the book cost? -> (x = 0.5, y = 0.5)
• Where can I buy this book? -> (x = 0.15, y = 0.9)

We can illustrate these 5 arrows like this:

 
Now, when we get a query question “What’s the price of the book?”, it will also be mapped to a vector, such as (x=0.45, y=0.4). We can draw this new vector as an arrow as well:

 
Next, we just need to compare all 5 blue arrows, and find the one that has the smallest angle from the red arrow. As shown, the arrow for “How much does the book cost?” has the smallest angle from the red arrow, which means these 2 arrows have the most similar directions. So we can use that question as the search result.

 
The process of mapping a sentence to a vector is called “embedding”, because it is like placing each sentence as a stone onto a wall at the right place. In reality, the vectors usually have thousands of dimensions, and the best embedding models can work really well in measuring the similarity between 2 pieces of text.

 
 

Step 1 - Starting Project

Now let’s get started with our QA Bot project. We will use the following project as the starting point. Please open it in your account and remix it:

https://play.creaticode.com/projects/65544f377f7509db74c436c7

 
 

Step 2 - Populate the ‘data’ Table

 
In the project, a table ‘data’ has already been defined. It has 2 columns named ‘key’ and ‘answer’. Our first task is to populate this table with some questions and answers. The idea is that we will provide some standard questions and answers to ChatGPT as new knowledge so that it can answer other questions based on these answers.

 
To save time, a CSV file has been prepared that contains the questions and answers. Please download it here:

https://ccdn.creaticode.com/public/data.csv

 
After you have downloaded the data.csv file, import it to your data table. You can right-click on the data table in the stage, select ‘import’, then find the data.csv file on your computer.

 
After the data is imported, you can put your mouse over any cell to review its content. For each row, the ‘key’ column is a question, and the ‘answer’ column is the corresponding answer.

 
If you are building another project, you can prepare the questions and answers using Google Sheets or Excel, and then export the table as a CSV file. Then you can upload the file into the ‘data’ table. Note that it is important that the first column is named ‘key’, since that’ll be the column we search by. You can have any number of columns after the ‘key’ column.

 
 

Step 3 - Create a Semantic Database

 

Next, we will build a ‘semantic database’ using the data from the table. Please drag this block into the editor by itself, make sure the ‘data’ table is selected from the dropdown, and then click on it to run it.

 
You will not notice anything changes, but behind the scenes, the following have happened:

• The data in the table have been sent to the CreatiCode server.
• A ‘semantic database’ has been created based on the data, which will be used for semantic search.

Note that at the point of writing, each project can only have one semantic database. If you run the ‘create semantic database’ block multiple times, the later runs will remove any existing semantic database first. That should be enough for most applications.

In addition, for all users with no subscription, there is currently a limit that the ‘data’ table can have at most 100 rows of data. For users with subscriptions, the limit is 1000 rows. If you are building an application that requires a higher limit, please reach out to info@creaticode.com

 
 

Step 4 - Review the Chat Sprite

 

Now we will build a chatbot that will utilize this semantic database. Before we start coding, please quickly review the existing blocks in the ‘Chat’ sprite. They serve these 2 basic functions:

• When the project starts, send an initial request to ChatGPT and display its response;
• Whenever the user enters some input, display that input, then send it to ChatGPT, and then display the response as well.

 
 

Step 5 - Test Question

 

Now we are going to verify that ChatGPT doesn’t know much about CreatiCode with a question: How much does creaticode cost?

 
As shown, ChatGPT doesn’t know the answer. We will need to “teach” it, and then we will ask the same question again.

 
 

Step 6 - Run a Semantic Search

 

To teach ChatGPT more about CreatiCode, the basic idea is the following: Given a user question, we will first search among the questions that we have prepared to find a few questions that are similar, then we tell ChatGPT to answer the user question based on the search result.

We will need to use semantic search since we want to find questions that have similar meaning as the user question, so their answers will provide the most relevant information for answering the user question.

To do that, we need to add the “search semantic database” block when we get the user question. Let’s add this block by itself for now to test it first.

 
In this new block, the first 3 inputs are specified:

1. Query: The first input specifies what we are searching for. In this case, we are searching for the test question “How much does Creaticode cost?”.
2. Number of Results: The second input specifies how many items will be returned by the search, such as 3. The search results will be ranked by how similar they are to the query, so we will get the top 3 questions that are the most similar to the user input
3. Result Table: The third input specifies the table for storing the result items. Each item returned will be stored as one row in this table.

 
Now let’s run this block by itself by clicking on it. To review the results, we need to look at the ‘result’ table. Since the stage window is occupied by the chat widget, we need to remove that widget as well, using the “remove all widgets” block:

 
After we run both the “search semantic database” and the “remove all widgets” blocks, add the “result” table to the stage, and hide the “data” table:

 
You should now see that the “result” table contains 3 rows. The first column “score” represents how similar that item is to the query. It is usually between 0 and 1. The second and third columns are “key” and “answer”, which are the questions and answers we added to the semantic database earlier. This is working well since the first row is the question “Is CreatiCode free to use?”, which is strongly related to our query of “How much does Creaticode cost?”

 
Note: if you get an empty “result” table, that means you did not successfully create the semantic database in step 3, so please try that step again.

 
 

Step 7 - Search with the User Input

 

Now let’s add the “search semantic database” block to our program, so it uses the user input as the query. Let’s also detach the ChatGPT block below it, since we need to improve our prompt before we can send it to ChatGPT.

 
After this change, whatever the user says, will be used to run a search, and the result will be stored in the “result” table.

 
 

Step 8 - Reading the First Row from the “result” Table

 

Next, we will extract the data from the “result” table, and embed them in the request that we send to ChatGPT. First, create 2 variables named “key” and “answer”, and try to read the content of the first row from the result table like this:

 
Click on these 2 blocks to run them, and you can check these 2 variables’ values on the stage:

 

 
 

Step 9 - Reading All Rows from the “result” Table

 

Next, let’s read all rows out of the result table. We can use a ‘for-loop’, which sets an index variable to go from 1 to the total number of rows like this:

 
In our case, the row count is 3 for the “result” table, so this for-loop will run 3 iterations.

 
 

Step 10 - Join All Questions and Answers into A Reference

 

As we go through each row of the result table, we can use the “join” block to join the content of that row into a “reference” variable. The reference variable will start as “”, and we will append new content from each row to this variable. We will use the “\n” character to join the questions and answers, which adds a new line between them. After the loop finishes, we can print out the reference to review its value.

 

If you run this stack of blocks, the reference should be printed out in the console panel like this:

 
 

Step 11 - Compose a New Request to ChatGPT Using the Reference

 

Now we are ready to create a new request to ChatGPT with this new reference information. The basic idea is to say the following to ChatGPT: Hey, ChatGPT, we need you to answer this question, and by the way, here is some information you can use as reference.

More specifically, we need to compose a “request” using 3 parts: the user’s input, a “[REFERENCE]” tag to indicate the reference section, and the reference we have retrieved above.

 
Now if we run the program, we can see the following request being printed in the console panel:

 
 

Step 12 - Get ChatGPT’s Response

 

Now let’s send the value of the “request” variable to ChatGPT and display its response:

 
This is what you should get from ChatGPT:

 
This is clearly a significant improvement compared to our initial test result at step 5. ChatGPT appears to be very knowledgeable about CreatiCode.

 
 

Step 13 - Make ChatGPT’s Response More Specific.

 

Currently, we are just using a very simple request, and there is a lot of room to improve it. The most obvious problem with the current response is that it is not specific enough. Clearly, ChatGPT is using all 3 question/answer pairs in our reference to compose the answer for the user.

Can you try to change our instruction in the request, so that ChatGPT will only provide a specific and direct answer like this?

 
Don’t look at the answer below before you spend some time on this challenge. This is a very good exercise on how to fine-tune the prompt to get the desired response from ChatGPT.

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

Have you found a solution? Don’t look at the answer if not!

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 
 
 
 
 
 
 

 
 

Step 14 - The Solution to Make ChatGPT’s Response More Specific

 

OK. If you have figured out what to say in the prompt, great job! This is not an easy task, since ChatGPT can be pretty ‘stubborn’ and would insist on using all the information in the reference.

Here is one solution to make ChatGPT more specific. We will compose the request like this:

user input:
how much does creaticode cost?

Instruction: below are some common questions/answers, but they may not be what the user is asking. can you compose a concise answer that only responds to the user's question?
Is CreatiCode free to use?
Most of the features are free
Who is CreatiCode's target user?
CreatiCode is a simple language for learners of all ages
can I write 3D programs on CreatiCode?
Yes 

 
As you can see, we are making these 2 changes:

1. We divide up the request into 2 sections “user input” vs “instruction”.
2. In the instruction, we explicitly tell ChatGPT some of the questions/answers may not be what the user is asking, and we are asking it to compose an answer that ONLY responds to the user question.

 
To compose this new request, we can modify the code this way:

 
Specifically, this is the third part of the request that you can copy to your code:

\nInstruction: below are some common questions/answers, but they may not be what the user is asking. can you compose a concise answer that only responds to the user's question?

 
Now please try to test your program again.

 
 

Step 15 - Improve Our Reference Questions/Answers

 

Besides updating the prompt, we can also improve the questions/answers in our semantic database.

For example, currently in our database, we have this pair of question/answer:

Q: Is CreatiCode free to use?
A: Most of the features are free

 
The answer is a bit vague, and ChatGPT won’t be able to provide a better answer beyond what we provide it.

As an example, let’s try to improve the answer to the following:

Most of the features are free to use. However, for non-paying users, there is a rate limit to some of the premium blocks, such as the ChatGPT block or the text-to-speech block.

To make this change, you can remove all widgets from the stage, update the content of the “data” table (not the “result” table), and then run the “create semantic database” block by itself again.

 
Now we can test it again. You will see that ChatGPT provides an updated answer based on our new answer:

 
In addition, we can verify that the reference information we provide to ChatGPT indeed contains the updated answer:

 
 

Retrieval Augmentation Generation (RAG)

 

Now you have learned a very powerful technique: we first retrieve some reference information using semantic search, then use that information in our request to ChatGPT. This is often called “Retrieval Augmentation Generation”, or RAG for short. That’s because we are using the information we have retrieved to augment ChatGPT’s response generation.

This project is just a simple example of how to use RAG to enhance ChatGPT’s response. There are many more things you can achieve with this technique.

 
 

Build Your Own QA Bot

 

Now try to build another QA Bot for something you know well and ChatGPT doesn’t.

For example, you can create a QA bot about a person you know well, or about a particular place like a restaurant or a park, or an organization like a school club or a community group, or about an object like a book or an electronic device.

You should first test it to make sure ChatGPT doesn’t already know about the subject, otherwise it is not easy to show how much new knowledge you have taught ChatGPT.

As you may have guessed, the most important factor for a successful QA bot is high-quality input data. It will take a lot of work to prepare such data. It might be a good idea to work as a team on this project.

Introduction

 
When we use ChatGPT to help us with various tasks, we often need to fine-tune our prompt to get the desired response from ChatGPT. In fact, a core skill of prompt engineering is to make ChatGPT say what we want it to say in the format we prefer.

In this tutorial, we will build a simple game for “prompt challenge”: the player needs to say something to ChatGPT to make it respond with ‘this is easy’. Of course, this game would be too easy if the player can say anything, so we will add 2 constraints on what the player can say: the player can not use the words ‘this’, ‘is’ and ‘easy’ in his prompt.

 
 

Step 1 - Start with an Empty Project

 

On the CreatiCode playground, log in to your account, then create a new project named “prompt challenge”. Remove the “Sprite1” with the dog, and we will write code in the “Empty1” sprite.

 
 

Step 2 - Add a Chat Window

 

This game will be played as a chat between the player and ChatGPT. So let’s add a chat window that occupies the entire stage:

 
Note that the “input rows” is 2, which will show 2 rows of user input at the bottom.

 
 

Step 3 - Say the Requirement

 

Next, we will tell the player the desired output and the requirement for the input. We will add that to the chat history, and pretend it is coming from ChatGPT. The exact words are the following:

Make me say 'this is easy', but do not use any of these 3 words

 
We can use the “append to chat” block to add this:

 
Now if we click the green flag, this requirement will show up right away:

 
 

Step 4 - Display Player Input

 

When the player inputs some words in the chat window and presses Enter, we will store it in a variable called “input”, and also add that input to the chat window.

 
This is what you should get now:

 
Of course, since we haven’t sent it out to ChatGPT, we won’t get any response yet.

 
 

Step 5 - Check Player Input

 

Before we send the player input to ChatGPT, we should verify if that input is valid. Our rule is that this input should not contain these 3 words: “this”, “is” and “easy”. So if the input contains any of them, it is invalid. We can use 2 “or” blocks to combine 3 conditions, where each condition checks if the input contains one of the 3 words:

 
 

Step 6 - Reject Player Input

 

If any of the 3 conditions are true, we only need to tell the player to try again, and we won’t need to do anything else:

 
You can test it by inputting some invalid input that contains one of these words. Note that you can try multiple times, since each time it will trigger the “when widget chat1 clicked” block again.

 
 

Step 7 - Send Player Input to ChatGPT

 

When the player input doesn’t contain those 3 words, we will send it to ChatGPT to see if we can get the required output back:

 
We will store the response from ChatGPT in the “response” variable. Since the response will be fairly short, we will simply use the “waiting” mode to wait for the entire response to come back. We will make this a “new chat” session each time the player says something because we don’t need ChatGPT to remember what the player said before. It only needs to respond to what the player is currently saying.

 
 

Step 8 - Display ChatGPT’s Response

 

Once we get the response from ChatGPT, we can append it to the chat history as well:

 
 

Step 9 - Check ChatGPT’s Response

 

Now it’s time to check whether ChatGPT is saying exactly ‘this is easy’:

 
Note that we can simply use the equal operator. It will report true even if the case of the 2 sides are different. Also, this if-else block should be added inside the ‘else’ branch of the previosu ‘if-else’ block, since we only need to test the response if the player input is valid.

 
 

Step 10 - Tell the Player the Result

 

Lastly, we can either congratulate the player for passing the test or ask the player to try again:

 
Now the game is ready for playing. Please try to play it yourself and find a solution. There are many ways to solve this puzzle. For a hint, one solution is to make use of the ‘opposite’ word.

 
 

Create Your Own Prompt Challenge Game

 

If you would like to player more, search for “Prompt Challenge” on the explore page. They will help you practice how to control ChatGPT’s output.

In addition, try to think of a new challenge yourself. You will need to specify the desired output from ChatGPT and any constraints on the player input. Note that both the output and the requirement need to be easy to verify. Ideally, you should consider and prevent all possible ways the player may “hack” your challenge.

@tyller_

This issue has been resolved. We will post a new tutorial on how to use the cloud blocks to build a simple chat room in a few days.

@tyller_

We do not have the same rules as Scratch, since our target users are more mature than Scratch’s target users, and we do not want to overly restrict user creativity. However, our platform is solely designed for education purposes.

Currently, we rely on a simple system:

• If any project is found to be used for any inappropriate purpose, through our review or through user reporting, the project will be hidden or removed.
• If any user is found to conduct any inappropriate behavior, through our review or through user reporting, that user account will be restrained or removed.

This rule can be further improved/modified based on user feedback.

@tyller_

We are working on this issue. Will post a working example ASAP.

CreatiCode

@tyller_

You can use them to specify the “where” conditions for database queries. See this project for an example:

https://play.creaticode.com/projects/65414e9c5e00b4f660052d37

CreatiCode