Coding the House

Return to Previous Lesson: Creating the Walls of the House

Lesson Overview:

In this lesson you will learn how to combine multiple shapes to create an arched doorway shape.

Check out the entire project on Tinkercad

The size of the inner block essentially defines the thickness of the walls. To create a wall 1mm thick, the inner block will need to be reduced by 2mm in length and 2mm in width. This can done easily with simple math. As seen below we create a new mesh called inner_mesh and simply subtract 2 from every L and W value used when creating the outer_mesh.

Note: The image below shows the result of subtracting the inner_mesh (which we will build in this step) from the outer_mesh (which we created in the previous step). The code for the subtraction will happen later in the coding process.

Instructions

1. Because we want to create the new block slightly smaller than the original block we can start with a copy of the outer_mesh code from the first block. Instead of making the block the exact same size we will subtract 2 from each of the L and W values. The code to create the inner_mesh shape can be copied from the next step and pasted into the code window just below.
2. var inner_mesh = new Mesh3D();
   inner_mesh.quad([0 , 0 , 0], [0 , W - 2, 0], [L - 2, W - 2, 0], [L - 2, 0 , 0]); //box bottom
   inner_mesh.quad([0 , 0 , 0], [L - 2, 0 , 0], [L - 2, 0 , H], [0 , 0 , H]); //box front
   inner_mesh.quad([L - 2, 0 , 0], [L - 2, W - 2, 0], [L - 2, W - 2, H], [L - 2, 0 , H]); //box right
   inner_mesh.quad([0 , 0 , 0], [0 , 0 , H], [0 , W - 2, H], [0 , W - 2, 0]); //box left
   inner_mesh.quad([0 , W - 2, 0], [0 , W - 2, H], [L - 2, W - 2, H], [L - 2, W - 2, 0] ); //box back
   inner_mesh.quad([0 , 0 , H], [L - 2, 0 , H], [L - 2, W - 2, H], [0 , W - 2, H]); //box top
3. Continue to the next step.

The roof is created in a similar fashion to both the inner and outer mesh, but with a triangular twist. The roof is made of 3 rectangular or quad faces and the 2 ends of the roof are triangles. Each is reflected in the lines of code shown below.

In order to create an over hang on the roof we need to make it slightly larger than the outer mesh. This can be accomplished by adding 2mm to the length and width.

The unique item in this code is the calculation that locates the points that define the peak of each triangle. To perfectly center the peak point we must use the following formula (W + 2)/2 this adds 2mm to the overall width of the roof to create the overhangs, then divides that value in half to locate the exact center of the roof.

Instructions

1. To create the roof we will need to define each of the faces shown in the image below.
2. In the image below you will see that each line of code is defining one of the faces of the roof. There are 3 quads and 2 triangles. The next instruction includes the code that can be copied and pasted into the code interfaces.
3. var roof_mesh = new Mesh3D();
   roof_mesh.quad([0, 0 , 0], [0 , W + 2 , 0 ], [L + 2, W + 2 , 0 ], [L + 2, 0 , 0 ]); //roof bottom
   roof_mesh.quad([0, 0 , 0], [L + 2, 0 , 0 ], [L + 2, (W + 2)/2, RH], [0 , (W + 2)/2, RH]); //roof top right roof_mesh.quad([0, W + 2, 0], [0 , (W + 2)/2, RH], [L + 2, (W + 2)/2, RH], [L + 2, W + 2 , 0 ]); //roof top left roof_mesh.triangle([0 , 0, 0], [0 , (W + 2)/2, RH], [0 , W + 2 , 0 ]); //roof left tri
   roof_mesh.triangle([L + 2, 0, 0], [L + 2, W + 2 , 0 ], [L + 2, (W + 2)/2, RH]); //roof right tri
4. Continue to the next step.

Congratulations! You now have all the shapes you need to create the house. Since you are in the middle of coding, you can't see these shapes yet, but take a minute and review the image below.

On the left you can see what the shapes would look like if we stopped here. To make it easier to generate the shapes we started then all at the 0, 0, 0 position, so every shape currently shares a corner point with all the other shapes.

If you were building manually, without code, you would group the large and small block first to hollow out the walls, then you would group the walls with the roof. The orange shape on the right is what that final grouping would look like.....wait.....that doesn't look right.

That is because we need to position the shapes before we begin to combine them.

We will do that in the next lesson.

Note: The image below will not be seen when you are creating this section of code. They were created after the shape generator program was written as a way to show the results of adding these transforms to the code.

Instructions

1. Continue to the next step.

In the next lesson you will learn how to complete the house.

Next Lesson: Completing the House