3D - 3D Art with Random Boxes (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will build a 3D world using a lot of boxes, and you will learn how to make use of randomness in creating 3D art.

Step 1 - Create a New Project

First, please create a new project on the CreatiCode playground, remove Sprite1, and add the following blocks to the Empty1 sprite:

An empty 3D scene will be created.

Step 2 - Add 10 Boxes Repeatedly

Next, let’s use a repeat loop to add 10 boxes. You can pick any color for the boxes.

Note that since the boxes are all overlapping, it would appear you only have one box:

Step 3 - Move Boxes to Random Positions

To separate the boxes, we can move them to random X/Y/Z positions, using the “pick random” block.

The value of the X position of each box will be a random number between -300 and 300, and the same for the Y and Z positions:

Step 4 - Random Box Shapes

Next, let’s change each box to a random shape. Since the shape of a box is controlled by its width/height/depth, we can set all 3 numbers randomly.

Note that the size of the box should not be negative in any dimension, so we are making them random numbers between 10 and 100.

Step 5 - Random Box Colors

Now let’s make the box colors random as well. To do that, we can not use the color picker dropdown to set the color. Instead, we need to use the color calculator block. In this example, we’ll make the color and saturation random, and keep the brightness at 100.

As a result, every time we would get boxes of different colors. Since we are setting the “color” value to be random between 1 and 30, the resulting colors will be randomly selected between red and green.

Step 6 - More Boxes

Now let’s try to use more boxes, and expand the range of colors and position values:

You’ll find the result more interesting, but it will also take longer to run:

Step 7 - Speed Up

To speed up the program, a very common solution is to avoid screen refreshes: instead of updating the computer screen after adding each box, we can just wait until all boxes are added, then refresh the screen only once.

To do that, make a new block called “add boxes”, and check “Run without screen refresh”:

Next, move the repeat loop into the definition of “add boxes”:

Now our program will run at least 10 times faster!

Step 8 - Set a Sky Background

Lastly, to make our scene look really nice, we can add a star-like sky. Note that we would also need to move the camera closer after setting the sky to a starfield:

And here is the final demo:

Next Steps

Try to apply the new techniques you learned to build some new artwork. Here are some ideas:

Different Shapes: instead of using only boxes, why not try other shapes?
Different Angles: you can rotate the shapes randomly as well, right?
Shapes on the ground: you can try to place the shapes all on the ground, such as on the gra*s land.