3D - Rubik's Cube (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, we’ll build a Rubik’s cube. Here is a preview:

Step 1 - An “Empty” Scene with 3D Axes

Please create a new project, remove the Sprite1, and add these blocks in the “Empty1” sprite. You can find the “initialize 3D scene” and the “show 3D axis” blocks in the “3D Scene” category.

As shown, the X-axis points to the right, the Y-axis points forward (into the screen), and the Z-axis points up. You can drag your mouse on the stage to rotate the camera around it:

Step 2 - Add A Box

It’s time to add the first box of your Rubik’s cube. You can find the “add 6-colored box” block in the “3D Object” category, and then update the color of the 6 faces to anything you like. You can keep the size in all 3 dimensions at 100 for now.

The box will be added at the position of (x=0, y=0, z=0), which means its center point will be at the root of the 3D axis. You can check it by zooming the camera into the box.

Step 3 - Add Another Box to the Right

Now let’s add another box. This time we would need to move it to a different position, so that it does not overlap with the first box.

As shown, you can first duplicate the “add 6-colored box” block, then set the new box’s X position to 100.

Note that although we have 2 boxes, they look like one wider box because there is no gap between them.

Step 4 - Reduce the Size of the Boxes

To show a small gap between the boxes, we can either reduce the box size, or increase the distance between the boxes. For example, we can reduce the box size from 100 to 98:

Now we get a nice gap between the 2 boxes:

Step 5 - Add the Third Box

The third box will be very similar to the second box, except it needs to be placed on the left, with an X position of -100:

Step 6 - Use A For-Loop

Although it is pretty easy to duplicate the blocks for more boxes, there are faster ways to write the program. For example, we can use a “for-loop”.

You need to define a new variable “x”, and use the for-loop to make x go from -100 to 100, at a step size of 100. This way, x will start as -100, then change to 0, then 100.

Now we can reorganize our program to use the variable x to create and move boxes:

Now we get the same result, but the program is much easier to change. For example, to change the box color and size, you only need to do it in one block:

Step 7 - 3 Rows of Boxes

Now we have worked out one row of 3 boxes, we will work on 3 rows (9 boxes) next. These rows will be positioned in different Y positions: -100, 0 and 100.

You need to define a new variable “y”, and add a new for-loop to set y to -100, 0 and 100:

Now we can place the new for-loop outside the existing for-loop, and move the boxes using both the x and the y variables:

Step 8 - Print out the X and Y Variables

Since the program runs very quickly, it might be hard to grasp what’s happening. You can use a very handy tool to help you understand the sequence of events: printing logs.

To do that, add the “print ( ) to console” block inside your for-loop, and then add a “join” block to read out the x and y variables.

Step 9 - 3 Layers of Boxes

For the last step, we are going to create 3 layers of boxes (27 of them). They will be stacked vertically, so their Z positions will be -100, 0 and 100.

The change is very similar, as we just need another for-loop for a new variable “z”. To move the box to a Z position, you need to use the “set z” block.

Step 10 - 5 by 5 by 5

Because we are using for-loops, it is very easy to change the range of the variables. For example, we can make the 3 variables go from -200 to 200, so each of them will take on 5 values (-200, -100, 0, 100, 200).

Here is the 5-layer cube:

Creative Ideas

There are many ways you can enhance this basic cube project. Here are some ideas for your inspiration:

Other Shapes: a Rubik’s cube doesn’t have to use boxes, right? You can try some other shapes, like spheres or cylinders.
Random Rotations: each box can be facing a different direction randomly. You can use the “rotate to” block to make some random rotations when you add each box.
Other Shapes: besides cubes, you can also use for-loops to stack the boxes in other ways, such as a pyramid or a Christmas tree.