3D - A Carpet (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, we’ll build a carpet. Here is a preview:

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

Please create a new project, remove the dog sprite, 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 Cylinder

Our carpet will be round-shaped, so let’s add a very thin cylinder. You can pick any color or size you like:

Now you should get a round carpet like this:

Step 3 - Increase the number of “sides”

You have probably noticed that the edge of the cylinder is not very smooth. This is because we only use 32 side faces, so we can see the edges between them when we zoom in.

To improve the result, we can increase the number of sides to a larger number, such as 128.

Now the cylinder’s edge looks much smoother:

Step 4 - Scale the cylinder in the X dimension

Now we need to change our carpet to an oval shape. We can use the “update scale” block to stretch the cylinder to 150% of its current size along the X dimension.

Now we get an oval carpet:

Step 5 - Update the Texture

Our carpet looks like something made of plastic. To give it a more realistic look, we need to update its texture. You can use the “Carpet” texture, or try some other texture you like.

Now the carpet looks like a real one:

Step 6 - Update the Color

We lost the original color of the cylinder when we add a texture to it. To get the color back, we can use the “update color” block:

This change will give us a colored carpet:

Step 7 - A Second Layer

Next, let’s add a smaller cylinder with a different color. You can right-click to duplicate the 4 blocks used for the first part, and then change the size and color of it:

Step 8 - Fix the display issue

There is a minor issue with our carpet. The inner cylinder does not display clearly. This is because the top faces of the 2 cylinders are overlapping, so the 3D engine tries to show both cylinders at the same time. In case you are curious, this is called the “z-fighting” problem.

An easy fix is to make the inner cylinder slightly thicker, so that its top face covers the outer cylinder. For example, a height of 4.5 would be enough, and most people would not notice the difference unless they look really closely.

Step 9 - The “add layer” block

Before we add more layers to our carpet, it is a good time to “refactor” our program to avoid duplicate blocks.

As you can observe, there is a clear pattern that every layer would take the same set of 4 blocks, and we need to set different sizes and colors for them. So we can start by making a new block called “add layer”, and make it accept 3 inputs of “size”, “height” and “color”:

Next, we can move the 4 blocks for one layer into this new block’s definition, and then drag the 3 input blocks to the correct place.

Lastly, we can start to use this new block to add the 2 layers. Note that for the “color” input, we need to use the color block, which allows you to set the color value using numbers (instead of sliders).

Step 10 - Add a Third Layer

With the new “add layer” block we have made, it is very easy to add another layer that’s smaller and thicker:

Step 11 - Change the Texture

It is also very easy to change the carpet. We only need to change the blocks in the “add layer” stack. For example, here is how to create a carpet made of floor tiles.

Here is the complete program for your reference:

Creative Ideas

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

Other Shapes: other shapes can be used for the carpet as well, such as spheres, capsules and tubes.
More layers: you can add many more layers to the carpet, using a repeat-loop or a for-loop.
Pyramid: when you stack many layers of boxes, you will get a pyramid shape.