Embed Size (px)
Citation preview
1
Autodesk TinkerCoding Badge Guide (Version 2/23/15)
Abstract: Tinkercad Shape Generators: Building a Configurable House with
JavaScript
The Tinkercad Shape Generator allows you to design and create objects that do
not exist by default in the Tinkercad interface. Gain basic knowledge of how to
use the JavaScript coding interface within Tinkercad to design a configurable
house whose size and shape can be controlled with slider controls after the
object has been placed into a Tinkercad design. For Activity 3, you will be able to
personalize your Tinkercad house shape or create an entirely new shape/design
from scratch on your own. To claim your virtual badge, upload your
creation from Activity 3. After you claim your virtual TinkerCoding badge, please
see your dojo leader for your TinkerCoding laptop badge sticker (while supplies
last).
Authors: John Helfen & Lynn Austin
2
Table of Contents
Getting Started with Tinkercoding ...................................................................................................... 3 Overview ................................................................................................................................................... 3 Pre-Requisites ........................................................................................................................................... 4
General Knowledge of Tinkercad ..................................................................................................... 4 An active account on the Tinkercad site .......................................................................................... 4 General knowledge of JavaScript ..................................................................................................... 4
What is a Shape Generator? ..................................................................................................................... 4 The Building Blocks ................................................................................................................................... 5 Direction of a Surface or Face: The Surface Normal ................................................................................. 7 The Right Hand Rule .................................................................................................................................. 7
Activity 1: Follow Along & Do: Creating a Cube ................................................................................... 8 Step 1 - Shape Generator Creation ........................................................................................................... 8
Preparing to Code ............................................................................................................................ 9 Step 2 - The Cube Code ............................................................................................................................. 9 Step 3: The Results .................................................................................................................................. 10
Activity 2: Follow Along & Do: Creating a Configurable House ........................................................... 11 Pseudo Code - Manual Design vs. Program Design ................................................................................ 12 Step 1 - Shape Generator Creation ......................................................................................................... 12
Preparing to Code .......................................................................................................................... 13 Step 2: Defining Parameters ................................................................................................................... 13 Step 3: Function Setup ............................................................................................................................ 15
Processing Parameters ................................................................................................................... 15 Step 4: Building from the Pseudo Code .................................................................................................. 16
Create a block that represents the outer walls of the house ........................................................ 16 Create a smaller block to hollow out the inside of the larger block .............................................. 16 Create a roof block that can be placed on top of the house ......................................................... 18 Position the inner block in the center of the outer block .............................................................. 18 Position the roof centered on the top of the walls ....................................................................... 19 Hollow out the house and combine the roof to the walls ............................................................. 19 Additional Learning ........................................................................................................................ 22
Activity 3: Use Code to Personalize Your House or Create a New Design ............................................ 24 Try It Yourself .......................................................................................................................................... 24
Activity 4: Show Your Work .............................................................................................................. 25 Show Your Leader/Mentor Your Work ................................................................................................... 25
Activity 5: Get Your Virtual TinkerCoding Badge: Share Your Work! .................................................. 25 How to Get Your Virtual Badge ............................................................................................................... 25
Activity 6: Get Your TinkerCoding Laptop Badge Sticker! ................................................................... 26 How to Get Your Laptop Badge Sticker ................................................................................................... 26
3
Getting Started with Tinkercoding Overview
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 or Mozilla Firefox.
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. Next 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 the Tinkercad interface.
See a video overview of this project.
4
Pre-Requisites
General Knowledge of Tinkercad
If you are not already familiar with Tinkercad, it is recommended that you
first complete the six Tinkercad Basics tutorials and/or complete the
Tinkercad Badge project before attempting to do this TinkerCoding Badge
project. It is important to gain a fundamental understanding of how to
create Tinkercad objects in order to understand the coding work behind the
objects.
Complete the Tinkercad Basics tutorials in the Learn section on
www.tinkercad.com/learn or complete the Tinkercad Badge project available on
www.autodesk.com/coderdojo which includes completion of the basic tutorials as part of the badge
requirements.
An active account on the Tinkercad site
If you don’t have a Tinkercad account, you’ll need to create one.
Creating an account on Tinkercad (www.tinkercad.com) is fast and
easy.
Note: Tinkercad is currently available for those who are 13 years of age or older.
General knowledge of JavaScript
This project does not require advanced knowledge of JavaScript, but it will be helpful to have a general
knowledge of JavaScript syntax, variables, arrays, and functions before starting this project. In this
project JavaScript will be used to generate 3D objects within the Tinkercad interface.
What is a Shape Generator?
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 a user to use JavaScript to write code to automate the creation of
new model shapes in the Tinkercad environment.
5
The Building Blocks
In the first project for this badge, 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.
6
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.
(0, 0, 0)
7
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
right 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.
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 above 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 above on the right, the points would be defined in the
order A D C B or a clockwise fasion.
Note: If the points defining the face are created
in the wrong order, an error message will
appear near your model in the graphics window
indicating a problem.
A
D
C
B
A
D
C
8
Activity 1: Follow Along & Do: Creating a Cube
The image to the right provides the needed information to
create our first 3D object…the cube. We have discussed all
of the building blocks like points, faces, and the order of
point definition. We are now ready to begin!
The Code
As you prepare to begin coding your own Shape Generator
it is important to review the application programing
interface (API) documentation at:
http://api.tinkercad.com. This documentation will provide
additional information and examples that can be quite
helpful when starting to code in Tinkercad. Take a few
moments to review that information now before moving on to Step 1- Shape Generator Creation below.
Step 1 - Shape Generator Creation
To begin, a shape generator must be created to hold the code.
1. Create a new design by selecting the “Create new design”
button from within the Tinkercad dashboard.
2. Navigate to the Shape Generators section of the browser on
the right side of the Tinkercad interface.
3. Expand the Shape Generators section, and then expand the “Your
Shape Generators” section.
4. Select “New Shape Generator” and pick the Empty option from the
list.
A shape generator code window (see image below) will appear in the lower
left corner of the Tinkercad interface.
See a video showing how to create a shape
generator.
9
Preparing to Code
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.
Next you will see several lines of
commented code seen in an orange
font. This code shows an example of
how to create parameters, but we won’t
be doing that just yet; parameters will
be covered in the next project.
Finally, you will see the main function of
the shape generator. This is where we
will place the code to create our first
cube. The only change we must make is to replace the line that says “Plugin.warning(“This shape script is
empty.”);” with code that will generate a cube.
Step 2 - The Cube Code
Within the function you will see that a new Mesh3D variable called mesh has already been defined. To
create the cube we must create the 6 faces that make us the sides of the cube, this is done by adding
quads in the mesh variable. While creating the quads that make up cube, the order in which they are
created is not important, but the order in which the points are define for each quad is critical to
direction of the surface normal and the overall success of the shape generator.
Note: refer to The Right Hand Rule section above to refresh on the right hand rule. The order in which the points are defined is
critical to creating a water tight solid. The surface normal of each face should point away from the center of the object being
created.
Each of the quads that are added to the mesh are defined by an array of four points each defined by their X, Y, and Z locations. Replace the “Plugin.warning(“This shape script is empty.”);” line of code from the default code generator with the six rows of code shown above. Each line of the code above will generate one of the faces that make up the cube. When complete the code will look like the image below. After adding the code to the shape generator, click save in the upper right corner of the coding window.
10
Step 3: The Results
After saving the shape generator an image of what the code generates will be shown
on in the “Your Shape Generators” section of the browser. If no image is generated,
this is an indication that something is incorrect in the code.
If you do see the shape then you have successfully created your first shape
generator and you can simply drag and drop that onto the Tinkercad workplane to
begin using it in a design.
Note: The color of the cube in your shape generator window may be different from the yellow shown in
the image to the right. This is normal and color can of the block can be changed after the shape is added
to the Tinkercad workplane.
See a video showing how to create a cube with code.
11
Activity 2: Follow Along & Do: Creating a Configurable House
Building a simple house manually in Tinkercad takes only a few steps, but if you are repeating those
steps over and over it can become time consuming. Below are images that show the manual process for
creating a house that were followed in the Tinkercad Badge.
Create an outer block that represents the outside of the house
Create an inner block to remove the center of the house structure
Subtract the inner block from the outer block
Place a roof on the structure
When creating code to generate this type of house we will generally follow similar steps, but will also
add the ability to configure, or change, the size of the house through a series of sliders that were
referenced earlier.
See a video showing how a house is created
manually.
12
Pseudo Code - Manual Design vs. Program Design
Design and coding have many similarities in the way by which you visualize how to get your ideas out of
your head and into the computer. When determining how best to build a house manually in Tinkercad, it
is helpful to visualize the components that make up the overall shape and
also to consider how each item will be combined and in what order;
essentially pseudo code for manual design.
The pseudo code for this design would look like this:
1. Create a block that represents the outer walls of the house. (the red
block in the image) 2. Create a block smaller than the red block that can be used to hollow
out the inside of the red block. (the transparent block in the image)
3. Create a roof block that can be placed on top of the house. (the green
block in the image) 4. Position the transparent block in the center of the red block.
5. Position the roof centered on the top of the red block.
6. Hallow the house by subtracting the inner block from the outer block
and combine the roof to the walls.
As you can see, this pseudo code could be used for either the manual design
or for the program to create the configurable house.
Step 1 - Shape Generator Creation
With the pseudo code developed, the shape generator can be created to hold the code.
1. Create a new design by selecting the “Create new design”
button from within the Tinkercad dashboard.
2. Navigate to the Shape Generators section of the browser on
the right side of the Tinkercad interface.
3. Expand the Shape Generators section; then expand the “Your
Shape Generators” section.
4. Select “New Shape Generator” and pick the Empty option from the list.
A shape generator code window (image below) will appear in the lower left corner of the Tinkercad
interface.
13
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. For this
example, we will leave all this section of code alone.
Step 2: 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 the
parameters will provide that control.
14
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)
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.
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 of objects and we can define those
parameters now.
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 to the
right.
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.
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.
See a video showing how to set up parameters
15
Step 3: 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.
See a video of show to setup the function
Processing 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.
See a video showing how to process parameters.
Change from
this
To this
16
Step 4: Building from the Pseudo Code
We will start creating code from the pseudo code created earlier.
The image to the right can be used as reference when looking at
the code to generate each of the mesh objects below.
In this example, the X value will be our house length (L), the Y
value will be the house width (W), and the Z value will be the wall
height (H) . The image to the right should look familiar, it shows
the solid that was created in the previous project (Creating a
Cube) and is the exact same shape that would be created if the
house parameters were set to the following values:
House_Length (L) = 15
House_Width (W) = 10
Wall_Height (H) = 10
Create a block that represents the outer walls of the house
This section of code will define each of the faces of the outer mesh.
Each face of the mesh is defined by an array of 4 points.
Note: refer to The Right Hand Rule section above to refresh on the right hand rule. The order in which
the points are defined is critical to creating a water tight solid. The surface normal of each face
should point away from the center of the object being created.
See a video explaining the outer mesh code.
Create a smaller block to hollow out the inside of the larger block
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
17
new mesh called inner_mesh and simply subtract 2 from every L and W value used when creating the
outer_mesh.
Note: The image to the right shows the result of subtracting the inner_mesh from the outer_mesh. The code for the subtraction
will happen later in the coding process.
See a video explaining the inner mesh code.
18
Create a roof block that can be placed on top of the house
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.
See a video explaining the roof mesh code.
Position the inner block in the center of the outer block
In order to simplify the creation of the three shapes that make up the
house, each was created using (0, 0, 0) as the base point. If we were
to complete our code at this point all the shapes would be stacked on
top of each other like the orange shape shown in the image below.
The colored blocks are also shown for comparison to the manual
design pseudo code seen earlier in the document.
At this point we need to properly position each shape to ensure we
get the correct final shape. We will start positioning shapes by
moving the inner_mesh to be centered in the outer_mesh. Moving
shapes can be done with a 3D translation matrix or a Matrix3D object
in the shape generator. The code to transform the inner_mesh shape
is shown below. The Matrix3D object defines how the object should
move in 3D space and passed to the transform function to perform
the move.
19
The image with the blue and orange shapes displays a before and after of what adding the above code
to the program. As you can see in the blue shape above the transform of the inner_mesh object caused
the larger block to be hollowed out. All that remains now is to add a transform to the roof object in
order to position it properly on top of the walls.
Note: The images in this section 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.
Note: Video showing position is available at the end of the next section.
Position the roof centered on the top of the walls
Just like the inner_mesh above we need to create another Matrix3D object and transform the roof. The
code below shows how to move the roof into position using both hard coded numbers and the H height
variable to complete the transform of the roof.
See a video showing how to move objects.
Hollow out the house and combine the roof to the walls
We’re going to now hollow the house by subtracting the inner block from the outer block and combine
the roof to the walls.
The final step in the coding process is to combine the objects that we created and positioned in the
proper order. The Tinkercad API requires that every shape generator return a solid object. The subtract
function is set up in a way that allows the subtraction of one or many objects from another using the
first parameter of the function, in this case it is the inner mesh we created. The second parameter is a
function that MUST return a solid object. This function can also take other actions, in this case a unite
action, before returning that solid object.
We can use the function in the second parameter to unite the roof to the walls of the house before
returning the solid created from the mesh.
20
See a video showing how to combine all the mesh
objects.
21
Final Code
22
Additional Learning
As you prepare for personalizing your work, take moment to review this additional
code that shows how to create a chair using a Shape Generator. In this code the
clone capability is introduced along with a closing function that simply combines all
mesh objects included in an array.
Note: Complete code for a configurable chair is shown on the next page.
23
24
Activity 3: Use Code to Personalize Your House or Create a New Design
In Activity 3, it’s time to put your skills to the test by branching out on your own and personalizing your
design. The skills learned in the previous badge activities have prepared you to brave this new world on
your own.
What code can you build to modify your configurable house or chair? If you’re not inspired to
personalize the configurable house, use the knowledge you gained throughout this project to create
and design something you are interested in. What other configurable objects can you create? Get
creative and go for it!
Try It Yourself
In this activity, no instructions are provided. Instead, we’ve given ideas and inspirational suggestions
below on ways to enhance your house, but it is up to you to make it your own. Get creative and go for it!
Again, you don’t have to personalize the configurable house shape we’ve been working on in this
project. Feel free to start from scratch and create an entirely new design! Once you have completed
this activity, you may go on to Activity 4: Show Your Work.
How you can enhance your configurable code:
Doors
Window
New rooms
Furniture
Lights
Garage
Automatically add floors as the
walls get taller
25
Activity 4: Show Your Work
Show Your Leader/Mentor Your Work
Now that you have completed activities 1 – 3, it’s time to show your work to your Dojo leader/mentor.
Show your Dojo leader/mentor the shape you created and designed yourself OR the enhanced features you added/built for your house in Activity 3: Personalize Your House Shape or Create a New Design. Once your Dojo leader/mentor has seen your work, you will have completed Activity 4, and can go on to Activity 5: Get Your Virtual TinkerCoding Badge: Share Your Work!
Activity 5: Get Your Virtual TinkerCoding Badge: Share Your Work!
Now that you have completed Activities 1-4, you may now receive your virtual Autodesk TinkerCoding badge on Credly.com. Evidence of your TinkerCoding work is required to unlock and claim your badge.
Your evidence will be an image, video clip, pdf or Word doc that shows the personalized house shape you created or the new design you created on your own in Activity 3. Follow the steps below to instantly unlock and get your virtual badge!
Note: Credly allows you to attach more than one image or file.
How to Get Your Virtual Badge
1. See your dojo leader for the TinkerCoding Badge Claim Code that you’ll need for Credly.com
Note: Dojo leaders are to contact CoderDojo Foundation to receive the badge claim code.
2. Go to www.credly.com and Sign In to Claim Credit.
Note: Claim Credit is the action Credly uses to obtain/claim your virtual badge.
3. If you don’t have a Credly account, you will need to create one. It’s fast and it’s free.
4. Once you’re in your account, click on Claim Credit located in the black ribbon at the top of the page. You’ll be prompted to enter the Claim Code that you received from your dojo leader.
5. Enter the Claim Code. Take a moment to visually check that the badge image is for the Autodesk Tinkercad Badge and then click the adjacent “Claim Credit” box.
6. To receive your badge, evidence of your work is required. You’ll receive a prompt to attach your evidence, which will be an image, video clip, pdf or Word doc that shows the personalized house shape you created or the new design you created on your own in Activity 3.
Note: If you’d like to, Credly allows you to attach more than one image or file.
7. Click “Claim This Credit” to complete the process.
8. To see your virtual Autodesk TinkerCoding Badge, select “My Credit” from the Account drop-down in the upper right corner of the screen.
Once you have successfully uploaded your design you will have completed Activity 5 and can go on to Activity 6: Get Your TinkerCoding Laptop Badge Sticker!
Note: If you’d also like to share your design work on Tinkercad.com, go to your Dashboard tab and hover over the design you
want to share. Click the Actions gear and select Properties. Name your design, but be sure to include at the end of the name
#CoderDojo. If you choose Public for your visibility setting everyone searching #CoderDojo on Tinkercad.com will see all of the
CoderDojo objects saved using #CoderDojo. https://www.tinkercad.com/tags/coderdojo
26
Activity 6: Get Your TinkerCoding Laptop Badge Sticker!
Now that you have completed Activities 1-5, it is time to get your TinkerCoding Laptop Badge Sticker! Autodesk is making a limited amount of TinkerCoding Laptop Badge Stickers on a first come, first serve availability basis.
How to Get Your Laptop Badge Sticker
Autodesk is providing CoderDojo Foundation with a limited amount of TinkerCoding Laptop Badge
Stickers to distribute to participating dojos around the world. Please see your dojo leader to get your
TinkerCoding Laptop Badge Sticker for your laptop. Remember, supplies are limited, and are on a first
come, first serve basis. Note: Dojo leaders are to contact CoderDojo Foundation with questions related to laptop badge sticker distribution.
