3D - A Painting in a Frame (Difficulty: 2)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will create a program that displays a famous painting in a frame like this, so that the user can appreciate it from different angles and distances:

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 - A Flat Box

We first need to add a big flat box to serve as our “canvas”. It will be a square shape in the X and Z directions (size of 1000 each), but very thin in the Z direction (size of 1). The color won’t matter, since we will paint over the box.

This is what you’ll get. You need to zoom out the camera to view it.

Step 3 - Find a Painting Image Online

Next, you need to find an image online for the painting you would like to show.

First, open a search engine like Google, and search by the painting’s name or artist. Switch to the “images”, and browse through the list like this:

Once you have picked a painting you like, select it, then right-click on the image preview, and select “copy image address”. This will copy the URL of that image into your computer’s clipboard.

In this tutorial, we are using the following URL for “Wheatfield with Crows” by Van Gogh:

https://upload.wikimedia.org/wikipedia/commons/b/ba/Vincent_van_Gogh_-Wheatfield_with_crows-_Google_Art_Project.jpg

Note that in most cases, you can use these images for free only for learning purposes. If you are building a project for commercial use, then you need to get a proper license for using the image.

Share an Image Yourself

Very often, you can find an image online, but it is not easy to get the URL for that image. As an alternative, you can share that image yourself on the CreatiCode platform through these steps:

Download the image file onto your computer.
On the CreatiCode platform, on the “My Stuff” page, click “My Files” on the left
On the new page, click the “+ Share a New File” button on the top right, and select the image file you downloaded, then confirm to upload and share this file
After the image has been shared, find its name in the list of files, and then click the “copy file URL” button below that file name. Now the URL will be stored in your clipboard, and you can proceed to step 4 below

Step 4 - Use the Image as a Texture

Next, let’s use that image as the texture of the box, using the “add texture with shared file” block. Since our box is 1000 by 1000, you need to set the “unit size” of the texture to 1000 as well, so that the image will fit onto the box face exactly. Also, you need to delete the URL in the block’s input, and paste the new URL you copied in step 3.

Now your box should be covered with the painting you selected:

Step 5 - Adjust the Height

Most paintings are not square-shaped. In other words, the ratio between the width and height (called “aspect ratio”) is not 1. We can fix this by scaling the box.

For this example, the painting’s height is slightly smaller than half of its width. Therefore, we need to scale down the box to 48% in the Z direction like this:

Now the box’s width is still 1000, but its height is only 480. It looks much closer to the original painting now.

Step 6 - Add a Picture Frame

Next, let’s add a picture frame around the painting, using a rectangle tube. Suppose the thickness of the frame border is 20, then the 2 borders on the left and right adds 40 units in total. We know the painting itself is 1000 by 480, so the rectangle tube has to be 1040 by 520.

We also need to rotate the frame, since by default it will face up.

Now we get a frame around the painting:

Step 7 - Apply a Wooden Texture to the Frame

To make the picture frame look more realistic, we can apply a texture to it, such as “Marble06”. You can also play with the texture size to get different visual effects. For example, if we use a texture size of 3000, the texture image will be more stretched out.

This is how it looks after applying the texture:

Step 8 - Add the Description

We can add a description that includes the painting’s name and artist, using a 3D text object. Its width should roughly match the width of the painting, which is 1000. Also, the description needs to be moved below the painting. Since the height of the painting is 480, the bottom edge of it would be at a Z-position of -240. Also, the frame border is 20, so the text needs to be below the Z-position of -260.

The description will look like this:

Step 9 - Move the Camera to the Front

Since the description is facing the front direction (positive Y direction), we need to rotate the text by 180 degrees, or move the camera to the front. In this case, it is better to move the camera, since we need to move the camera to a good view distance to show the entire painting as well.

Now the user gets a good view of the painting when they click the green flag, no need to rotate or zoom the camera:

Step 10 - A Starfield Background

To enhance the viewing experience, we can add a beautiful background, using the “set sky” block. It should be inserted at the beginning of the program, since it will take some time to load the background image, and setting the sky would move the camera further away as well.

Also, it’s a good time to hide the 3D axis now as we are mostly done with the development:

Now we get a good background that also changes as we move the camera.

Step 11 - Camera Animation

To produce a more fun viewing experience, we can start the camera at a different position, then move it to the front view position through animation.

Here is the final demo:

Creative Ideas

Here are some fun ideas you can try to modify this project:

Multiple Paintings: you can try to create a gallery of multiple paintings and arrange them in the 3D space
Description Text: you can add more descriptive text on the painting or around it. For example, the user can click a button to show the description, then click it again to hide it.
Thick Text: you can try to use the “add 3D thick text” block for the description, which supports more font styles.