Overview

In this project students will be introduced to computer programming as they use a Tinkercad Shape Generator and JavaScript to create a 3D house using code.

After the house has been created it can be placed on the Tinkercad workplane and its size can be changed by activating sliders linked to variables in the Shape Generator code.

Tinkercad is a cloud based Computer Aided Design (CAD) program that allows you to create and store 3D designs all within a standard web browser like Google Chrome.

When building in Tinkercad shapes are typically limited to the predefined shapes provided by default in the program. Basic geometric shapes are scaled, stretched, subtracted, and combined to create more complex designs. Shape generators provide an interface for creating custom Tinkercad shapes using JavaScript.

In this project, you will first use a Tinkercad Shape Generator to create a simple shape that already exists, a cube. Then you will learn how to extend that knowledge to create a configurable house whose size can be changed by controlling sliders, like those shown below, in Tinkercad.

General Knowledge of Tinkercad

If you are not already familiar with Tinkercad, it is recommended that you first complete the following projects before completing this project:

1. Let's Learn Tinkercad
2. Build a Tinkercad House

It is important to gain a fundamental understanding of how to create Tinkercad objects in order to understand the coding work behind the objects.

General knowledge of JavaScript

In this project JavaScript will be used to generate 3D objects within Tinkercad. While knowledge of JavaScript is not required for this project, it will be helpful to have a general knowledge of JavaScript syntax, variables, arrays, and functions before starting this project. Even without this knowledge you should still be able to complete the project if instructions are followed.

Tinkercad provides many generic geometric shapes that can be combined in any way to create more complex models.

If there is a shape you need that is not provided, or a series of shapes you combine frequently, Shape Generators allow you to use JavaScript to write code to automate the creation of new model shapes in Tinkercad.

In the first activity, we will use a Tinkercad Shape Generator to create a shape that already exists: a cube.

This is a shape that will be needed for the configurable house. It also provides some training on core concepts that will be critical moving forward.

Look closely at a cube. You will see it is defined by 8 specific points, each with an X, Y, and Z coordinate on the Cartesian coordinate system. The 8 points that define the cube also define the 6 faces that make up the shape of the cube. Each of those faces is made of a series of 4 points that define the boundary of the face.

In order to properly define this cube shape with code, each of the 6 faces will need to be generated using the 8 points that define the cube. The goal is to define the faces in a way that creates a closed, or water tight object.

Because we need to create a water tight object, each of the faces will share points with other faces on the cube. The images below show an example of this.

In the zoomed view, you will see 3 points as black dots and the bottom corner of the blue cube. The bottom corner of the blue cube is located at (0, 0, 0) on the Cartesian coordinate system. When we define each of the 3 faces seen in the image, a corner from each will share that location and the points will essentially be stacked on top of one another to make the corner of the blue cube, represented by the red dot.

The final building block that is critical before beginning to code is to understand that each face has “direction”, meaning it has a top side and a bottom side (because it can be flipped over). The primary direction of the face is called the Normal side of the surface or face, indicated by the arrow in each image. The order in which you define the points that make up the face determines the “direction” or the surface normal

When building faces with code and working toward a water tight object, the normal side of each surface should be pointing away from the center of the object you are creating. In the image to the below you can see that the arrows defining the normal surface are all pointing away from the center. The Right Hand Rule can be used to help guide you in defining the points in the correct order.

If you pretend to grab the normal arrow with your right hand, with your thumb sticking out as shown in the image above, your thumb will point in the “normal” direction and the curve of your fingers will define the direction you must define the points that make up the face.

We will start with point A in each example, but the 2nd, 3rd, and 4th points will change order depending on which direction the normal should point.

To create the face in the normal orientation seen on the left, the points would be defined in the order A, B, C, D or a counter clockwise fashion.

To create the face in the normal orientation seen on the right, the points would be defined in the order A, D, C, B or a clockwise fashion.

Instructions

1. If the points defining the face are created in the wrong order, an error message similar to the one shown below will appear near your model in the graphics window indicating a problem.

In the next lesson you will learn to code a cube.

Next Lesson: Coding A Cube