instructables

Code a Traffic Light in Tinkercad Codeblocks & Circuits

by MrErdreich

While Tinkercad is well known for its 3D computer-aided- Tinkercad Circuits - What was once part of the legacy
design (CAD) and modeling capabilities, many users are 123D application suite, Tinkercad Circuits allows for users
unaware of the powerful coding applications also built to create analog circuits in a simple-to-use simulation
within the Tinkercad platform. Through this Instructable, program. By dragging and dropping components
I will showcase two of these applications using a block- connected by wires and breadboards, virtually any
coding method inspired by Tinkercad's 2020 Block Code circuit can be assembled and simulated. In addition to
Contest and many of the lessons I implement in my basic analog circuit design, users can also drop in ATTiny,
middle school classroom. Arduino, or Micro:Bit controllers to program circuits
using either block-based or script-based methods.
Tinkercad Codeblocks - Codeblocks are a relatively
new feature at the time of writing this in late-2020. And because both of these applications are built into the
Codeblocks allows users to learn how to apply computer Tinkercad platform, they are completely free, user
programming skills and methods in a unique way, friendly, and compatible on just about every device!
creating a 3D model. Like the 3D design features that Through this Instructable, we will create a 3D model of a
Tinkercad is well known for, Codeblocks allows users to tra c light using Codeblocks(Part 1 of the
add and manipulate basic geometric shapes to make Instructable) and then create a circuit with LEDs
just about anything imaginable. Unlike the typical CAD programmed to function like a tra c light using Circuits
platform however, users can only add, move, or (Part 2 of this Instructable).
manipulate shapes by adding lines of code through a
block-programming method.

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 1

Step 1: Part 1 Step 1 - How to Use Codeblocks

Part 1 of this Instructable is creating a 3D model of a tra c light using Tinkercad Codeblocks.

After signing into Tinkercad, click on Codeblocks in the left-side menu. Like the 3D modeling app, you will see any
existing Codeblock projects you've created or a blue button to create a new one. Once you click to make a new project,
you will be able to open a template based upon a previous project (if applicable), or tutorials designed by the Tinkercad
team.

If you've ever used Scratch or another block-based programming application, Codeblocks will look familiar to you. The
big di erence is that instead of seeing some type of animation preview window, we see a 3D work plane that we can
control with our code. There are six categories of codeblocks we can use to manipulate our shapes.

1. Shapes - This category of blocks allows us to create and add geometric shapes to our design
2. Modify - This category of blocks allows us to manipulate any shapes, or groups of shapes, we have in our
design
3. Control - This category of blocks allows us to loop or repeat tasks
4. Math - This category of blocks allows us create variables or manipulate numbers and quantities in our
design
5. Data - This category of blocks allows us work with any variables that are created using Math blocks
6. Mark Up - This category of blocks allows us to add comments or messages throughout our program

2
3

1. Code block categories

2. programming window
3. 3D model window
4. play button

Step 2: Part 1 Step 2 - Starting Our Model

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 2

You can create a shape by simplly dragging and We are going to create an Object before adding any
dropping a shape block into your programming window, shapes. Objects allow us to manipulate or merge shapes
then press the play button in the top right corner to together and consolidate our codeblocks. Our rst
preview your code. You must press the play button each object will consist of the main housing and light bulbs of
time you wish to see your code run. our tra c lights. To start, grab a "Create New Object"

block from the Modify blocks category and drag it into degrees, we will stand the yellow box up vertically.
your programming window.
Lastly, we are going to add a "Move" block from the
Next, we are going add a "Box" block from the Shapes Modify category to life the box vertically so it is resting
category and snap it in place under our new Object. You on top of the work plane. Drop your move block in under
can adjust the color and size of your box in the code the rotate block and set Z to 50.
block. Set it to be yellow, 30 W, 100 L, and 20 H . We will
then rotate our box by adding a "Rotate" from the
Modify category. By Rotating around the X-axis 90

1
1 2

1. this will be our first object 1. change between solid fills, or a transparent hole
2. the 3D model window will update as you run your code

1. modify shapes using blocks

Step 3: Part 1 Step 3 - Adding Our Lights

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 3

Now that we have our yellow box to act as the main part Steps. We are then going to add a "Rotate" block and
of our tra c light housing, we will add cylinders to act as rotate our red cylinder around the X-axis by 90 degrees.
our light bulbs. Next, we are going to lift this cylinder using a "Move"
block by setting Z to 80 . Lastly, we are going to extrude
Add a "Cylinder" from the Shapes category snapped to the cylinder out of our box by setting Y to -2.
our code from the previous step. Set this cylinder to be
red with a Radius of 10, 20 H, 20 Sides, 0 Edge, 1 Edge We should now have a red cylinder at the top of our

light! We can copy the Shape, Rotate, and Move blocks three blocks of code from our red cylinder to make our
from the red lgiht to create the yellow and green one green one.
with greater ease. Right click the red cylinder block and
select duplicate. This will copy all three blocks we need, After duplicating for the green light, change the color
then snap them in place under all other code. parameter on the cylinder block to be green, then set Z
to be 20 in the green light's move block. You should now
For the yellow light, change the color parameter on the have all three lights!
cylinder block to be yellow, then set Z to be 50 in the
yellow light's move block. We will again duplicate the

2 1

1. not all of the parameters must be completed 1. duplicate these three blocks for each following light cylinder
2. -2 pulls the cylinder out so it extrudes from the yellow box

Step 4: Part 1 Step 4 - Adding the Light Hoods

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 4

The last part of our Tra c Light model are the hoods Modify category to the bottom of our hood object code
that go above each light. We will be creating a new blocks. This will group the yellow rounded roof to the
Object from our main housing as we will need to group hole rounded roof just like the group function in the 3D
shapes together and duplicate them to complete these design portion of Tinkercad. We now should have our
parts, but we don't want these modi cations to e ect rst light hood above the red light!
the shapes we already have (thus the need for a new
object). Start by grabbing the "Create New Object" Next, we are going to create a new object so we can
block from the Modifycategory and drag it in new space easily duplicate our light hood object two more times .
in your programming window. Start by dragging another "Create New Object" block
from the Modify category in new space of your
We are going to add a yellow"Round Roof" from the programming window. Add a "Add Copy of Object"
Shapes category into our new object. We are then going block from the Modify category, then drag the variable
to move this round roof above the red light cylinder block for your rst light hood from the Data category
using a "Move" block and by setting Z to be 90 and Y to into the blank parameter of your modify block. This will
-10. Next, we are going to add another "Round Roof" add a new light hood overtop of the existing one.
but set this second one to be transparent, or a hole,
rather than a ll color. Add another move block to lift We now are going to add a "Move" block from the
the roof hole by setting Z to 87 and Y to -10. Modify category and set Z to -30 to move the second
hood over the yellow light. To complete our model, we
Lastly, we are going to add a "Group" block from the are going to add another "Add Copy of Object" block

from the Modify category to create another copy of our And that concludes Part 1, Coding a 3D model of a
light hood. For this last hood, we are going to add a Tra c Light using Tinkercad's Codeblocks!
"Move" block from the Modify category and set Z to -60
to move the last hood over the green light.

1
1

1. this roof is set to fill solid yellow 1. the first light hood added from our new object
2. this hood is set to be a hole to cut into the first roof
3. grouping the shapes together will cut one into the other

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 5

 1

1. a new object will allow us to manipulate new shapes separate from existing shapes 1. all three hoods have been added!

Step 5: Part 2 Step 1 - How to Use Circuits

Part 2 of this Instructable is programming a micro-controller component has been added rst. To see
simulated circuit using an Arduino to function like a your circuit in action, you need to press the "Start
tra c light in Tinkercad Circuits. Simulation" button. Without the simulation turned on,
no electricity is owing through your circuit, its in a
After signing into Tinkercad, click on Circuits in the left- prototyping-mode. Once the simulator is started, you
side menu. Like the 3D modeling app, you will see any should see your circuit function as if it is truly connected
existing Circuits projects you've created and a blue using real components on your workbench in front of
button to create a new one. Once you click to make a you.
new project, you will be brought to a blank document
where you can drag and drop in components, or starter To get started, you can drag and drop components from
circuits made by the Tinkercad team. the component list out into your workspace. A simple
click of your mouse will allow you to draw wires from
Tools to rotate, navigate, undo, redo, delete, or annotate component to component. Any options that are possible
are in the top left corner of the toolbar. To add code, you will be visible in an object menu when a component is
can click the "Code" button in the top right corner of the selected (color, resistance, voltage, etc).
tool bar, though no code can be added until a

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 6

 1 4 5

3
2

1. Tools to rotate and manipulate shapes

2. components can be added from this menu
3. this is the workspace to assemble your circuits
4. click here to add or edit your code
5. start simulation connects your circuit to power

Step 6: Part 2 Step 2 - Starting Our Circuit

Before we dive into three LEDs (light emitting diodes), we are going to work our way in by adding a single light rst. Start
by dragging the following components out into your workspace:

1. Arduino Uno R3
2. Red LED
3. 1K Ohm Resistor
4. Breadboard Small

Next we need to connect your components together. Rotate the LED so it is facing right, then drop it into any two rows
on your breadboard. Connect the resistor from the cathode of the LED to the black negative channel of your
breadboard. This will provide a ground, or negative current, to your LED. LEDs can only handle so many amps (current
ow of electrons before failing). A resistor allows us to control the ow of current to ensure we provide the correct
amount of current our LEDs need. LEDs are also Polar, meaning they must be hooked up in a particular orientation for
current to pass through. Resistors are Non-Polar and can be connected in any direction.

Next, connect a red wire from your LEDs anode to Pin 13 on your Arduino by clicking on the anode, moving your mouse
(not click and dragging), and then clicking again on Pin 13. If you want to make bends in your wire, click your mouse as
you move it across your workspace. Bend positions can be manipulated after drawing a wire.

Lastly, connect a black wire from a GND Pin on the Arduino to a pin in the black negative channel of your breadboard
that the resistor is connected to. This will complete your starter circuit!

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 7

 1
2

1. connecting the black wire and the resistor into the same column
connects them together
2. placing the resistor and LED cathode in the same row connects them
together
3. connect the anode to Pin 13 of the arduino

Step 7: Part 2 Step 3 - Starting Our Code

Next, we are going to program our red LED to blink on an o as we begin to put our code together! Start by clicking on
the "Code" button to open your programming window. You are able to program your Arduino using both block-based
and script-based methods, but we'll be focusing on blocks in this Instructable.

Like Codeblocks or other block-based languages, there are categories we can choose our blocks from to assemble our
programs. Tinkercad Circuits has six categories:

1. Output - This category of blocks allows us to send power to components out through our pins
2. Input - This category of blocks allows us to read signals coming from components through our pins
3. Control - This category of blocks allows us to manipulate our programs with delays, loops, or logic
statements
4. Math - This category of blocks allows us to utilize operators to enhance our logic functions
5. Variables - This category of blocks allows us create variables as placeholders to increase complexity and
function in our programs
6. Notation - This category of blocks allows us to add comments or titles to our programs

To turn our LED on, we simply need to drag and drop a "Set Pin _ to HIGH" block from the Output category into our
programming window. HIGH sends a high signal, or 5 volts, through whatever pin is selected in the block. Select Pin 13
as that is the pin we have connected our red LED to and 5V would turn the LED on.

Press Start Simulation and your red LED should turn on!

To make our red LED turn on and o , we need to rst add a "Wait" block from the Control category and snap it in place
below our set to HIGH block. For now, the time delay isn't important, but the duration set in your wait block will be how
Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 8
long the LED stays on, then o , then on again for.

Lastly, drag and drop another "Set Pin _ to HIGH" block from the Output category into our program. Again, select Pin 13
for the red LED, but this time select LOW. Low sends a low signal or theoretically no volts to our LED which would turn it
o .

Press Start Simulation and your red LED should blink on and o repeatedly!

3 1

1. HIGH = on
2. LOW = off
3. 13 is the pin we connected our red LED to

Step 8: Part 2 Step 4 - Adding LEDs

Now that we've completed a proof of concept with one components share a common ground. As a result,
LED, we can add our remaining two LEDs and complete running ground through three resistors, one per LED, or
our circuit! Drag in two more LEDs, set one to be yellow one resistor shared among them would have the same
and one to be green. Match the order of a tra c light by e ect.
placing the yellow light below the red one, then the
green light at the bottom. Next, we will connect the anode of the yellow LED to Pin
12 and the anode of the green LED to Pin 11. Like
Like the red LED, we need to run part of our circuit before, the pin we choose is insigni cant for this
through a resistor to prevent our LED from failing under purpose, but I've chosen to use Pins 12 and 11 to keep
too much current. You could add a resistor for each LED our circuit organized.
by matching the wiring method we used with our red
LED in the second step. Alternatively, you could share Next, we need to program our LEDs to turn on and o by
the red LEDs resistor by connecting each cathode completing our code!
(ground) signal together. In a typical circuit, all

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 9

 1

1. connecting resistors to each LED works, but is not the most efficient way to 1. you can share one resistor across a common ground
create your circuit

Step 9: Part 2 Step 5 - Completing Our Code

To complete our tra c light circuit, we need to add code blocks that control our yellow and green LEDs like we have for
our red one. First, let's analyze the behavior of a tra c light.

1. Red light is on, Yellow and Green are o , typically for a longerduration
2. Green light is on, Yellow and Red are o , typically for a longerduration
3. Yellow light is on, Red and Green are o , typically for a shorterduration

In the real-world, longer durations typically span two to ve minutes while shorter durations last for ten to thirty
seconds. In our prototype, we will use 3 seconds for our longer duration and 1 second for our shorter duration.

First, let's add two "Set Pin _ to HIGH" block from the Output category below our 13 HIGH block. Set one for Pin 12
LOW to turn o the yellow light, and the other to be Pin 11 LOW to turn o the green light. Next, set the Wait block to
be 3 seconds to create a longer duration. This will have only our Red light on for a longer duration, as listed in step 1 of
our tra c light behavior.

Next, let's duplicate all four code blocks we currently have by right clicking on our rst block and selecting duplicate.
Drag these four new blocks in place under our wait block. For this section, Pin 13 = LOW, Pin 12 = LOW,and Pin 11 =
HIGH for 3 seconds. This will have only our Green light on for a longer duration, as listed in step 2 of our tra c light
behavior.

Lastly, let's duplicate the four code blocks again by right clicking on our rst block and selecting duplicate. Drag these
four new blocks in place under our wait block. For this section, Pin 13 = LOW, Pin 12 = HIGH, and Pin 11 = LOW for 1
seconds. This will have only our Yellow light on for a shorter duration, as listed in step 3 of our tra c light behavior.

Press Start Simulation and your three LEDs should blink on and o like a real tra c light!
Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 10
And that concludes Part 2, Coding a Tra c Light inspired circuit using Tinkercad Circuits!

1. each LED needs its own block to set it to be HIGH or LOW

2. each stage is separated by a wait block

Step 10: Code Files and Conclusion

Tinkercad's Codeblocks and Circuit features are Moving into script-based programming languages are
incredibly powerful tools for anyone looking to develop made easy in Tinkercad Circuits as you can utilize both
skills in computer science! With user friendly interfaces, simultaneously. For an added challenge, try to make
Codeblocks and Circuits makes learning how to create your tra c light into a smart circuit by adding sensors
programs simple and fun. that would detect a car to trigger when it should change
from red to green!
See the sample project from Part 1 - Modeling a Tra c
Light using Codeblocks here. Tinkercad is a powerful tool in all aspects of my
classroom, whether it be for 3D modeling, circuit design,
See the sample project from Part 2 - Creating a Tra c fundamentals of programming, or advanced
Light circuit and program in Circuitshere. programming. This tra c light project is one of my
personal favorites and I hope you enjoy it too!
And if you're curious as to how the Tra c Light circuit
would look like if you used a script-based language Thanks for reading, happy making!
instead of a block-based one, check out this project.

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 11

Awesome!

Code a Traffic Light in Tinkercad Codeblocks & Circuits: Page 12