Lesson Overview:

In this lesson you will learn some concepts that are required before you jump into coding.

Check out the entire "Tinkercoding a House with Shape Generators" project on Tinkercad

Step 1: Overview

For a house to be functional there must be a way in. It’s time to create a doorway.

To do this, we will group two objects together in the final shape for that door, we will make that shape a Hole, position it, and then group the shapes. These are the same steps we completed in the previous steps to hollow out the house, but this time we will create the door.

Step 2: What You Should Know Before You Begin

For a house to be functional there must be a way in. It’s time to create a doorway.

Step 3: What Is a Shape Generator Anyway?

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.

Step 4: The Building Blocks

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.

Step 5: Get to the Point!

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.

Step 6: Direction of a Surface or Face: the Surface Normal

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.

Step 7: The Right Hand Rule

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

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.