Introduction: Setting Up Parameters for the House

By

The following information is a single lesson in a larger Tinkercad project. Check out this and more projects on Tinkercad.

Return to Previous Lesson: Manual Design vs. Program Design

Lesson Overview:

Now we're going to set up the parameters for the house.

Step 1: Create a Shape Generator

With the pseudo code developed, the shape generator can be created to hold the code.

Instructions

  1. Navigate to the Shape Generators section of the browser on the right side of the Tinkercad interface.
  2. Expand the Shape Generators section, then expand the “Your Shape Generators” section.
  3. Select “New Shape Generator” and pick the Empty option from the list.
  4. A shape generator code window will appear in the lower left corner of the Tinkercad screen.
  5. Continue to the next step.

Step 2: Preparing to Code

Again, after creating the empty shape generator some code will be pre-populated for you. At the top of the code window you will see a set of libraries pre populated into the code.

Instructions

  1. For this project, we will leave all this section of code alone.
  2. Continue to the next step.

Step 3: Defining Parameters

The next section of pre-polulated code provides an example of how to create parameters that can be used to control your designs with common fields or sliders. In this example sliders with a range values will be used to control the size of our house. The template code for parameters is temporarily commented out and will be used as we move along in the coding process.

At this point, it is important to consider how you will want to be able to change your house once the code is completed because these parameters will provide that control.

Instructions

  1. There are several general ways that a house might change, but here are four examples we will use in this scenario: - House Length (L) - House Width (W) - Wall Height (H) - Roof Height (RH)
  2. These will become the parameters defined to control the house with sliders. We don’t have to use the parameters in the initial writing of the code, but it is critical that we define those parameters early and keep them in mind through-out this process.
  3. As you can see in the template code above, the parameters are defines as a series of name and value pairs. These parameters use JSON syntax to define an array (or list) of objects and we can define those parameters now.
  4. To get started, change the template code by removing all the orange text except for the line that defines the parameters. Change the template code shown above to match the image shown here. Note: The next instruction includes all the text so it can easily be copied and pasted into the interface.
  5. // Template Code: params = [ { "id": "House_Length", "displayName": "House Length", "type": "length", "rangeMin": 10, "rangeMax": 100, "default": 10 }, { "id": "House_Width", "displayName": "House Width", "type": "length", "rangeMin": 10, "rangeMax": 100, "default": 10 }, { "id": "Wall_Height", "displayName": "Wall Height", "type": "length", "rangeMin": 1, "rangeMax": 30, "default": 10 }, { "id": "Roof_Height", "displayName": "Roof Height", "type": "length", "rangeMin": 2, "rangeMax": 6, "default": 4 } ];
  6. Params = [ ]; (line 20 and 49) is the definition of the parameters array. Nested within the sqaure brackets of the array are sets of curly brackets { } seperated by commas, which define each object in the array.
  7. Nested in each set of curly brackets are the name and value pairs that define each parameter. Each of the parameters shown will use the slider functionality to control the size of the objects created in the code.
  8. Continue to the next step.

Step 4: Function Setup

In the cube shape generator example, we only created a single shape and because of that could use the default function that was provided. That function was considered a synchronous function.

The steps that follow will combine multiple pieces of geometry and that will require the use of an asynchronous function, but the template code for an empty shape generator is configured for a synchronous function, so we need to make a change to the function definition line of the code.

Instructions

  1. Replace the line of code that says: function process(params) { with the following code: function shapeGeneratorEvaluate(params, callback) {
  2. Continue to the next step.

Step 5: Process the Parameters

Once the function is configured, the parameters can be read into the function for use throughout the remaining coding activities. The code shown below will read the parameter values set in the Tinkercad interface into variables that will be used when building objects.

Instructions

  1. Using the image above as a guide, begin creating variables that read the appropriate parameter values into those variable. Copy and Paste (Using Control+C and Control+V) the following line just below the function definition in the code window: var L = params.House_Length; This will read the House_Length parameter value from the user interface into the variable L.
  2. Continue by adding the remaining variables using the following text: var W = params.House_Width; var H - params.Wall_Height; var RH = params.Roof_Height;
  3. Continue to the next lesson.

In the next lesson you will learn to code the house.

Next Lesson:Coding the House