Tinkercad Circuits Code Blocks

Ti any Tseng
Sep 26, 2017 · 6 min read

Visual Programming for Arduino, powered by Scratch Blocks

Our newest feature in Tinkercad Circuits is visual code blocks–powered by Scratch

Blocks!

We* designed code blocks to make learning how to program with Arduino as easy as
possible. With that in mind, our main goals were to,

1. Simplify the Arduino programming experience to reduce common syntax errors

(such as mistyping the name of a function or forgetting a semi-colon)

2. Focus on the desired interaction (what you want to sense and control), while
scaffolding all the necessary setup required to do so
 3. Bridge the worlds of visual programming and text-based programming to make
everything created in Tinkercad Circuits extensible to real, physical hardware using
the Arduino IDE

Here, I’ll provide an in-depth explanation of how code blocks work while describing
how our design philosophy wove into the creation of this feature.

*We = The Tinkercad Circuits Team (Joshua Brooks, Lead Software Developer, &
Myself, Lead UX)

Code Blocks — An In-Depth Example

Tinkercad code blocks are visual blocks you can drag-and-drop to create Arduino
programs. Using the Tinkercad Circuits simulator, you can test any code you create
directly in the browser, before you build and program your devices with real physical
components.

Controlling a servo motor with a potentiometer using Tinkercad Code Blocks

Code blocks are organized into several categories:

Output — Blocks for controlling actuators connected to your programmable

microcontroller
 Input — Blocks for reading sensor input

Notation — Blocks for adding comments, both to provide an overview of your

code (in the title block) and in-line with your code

Control — Control structures like adding delays, repeating, and if else statements

Math — Blocks for logic and computation

Variables — Custom variables that can be edited in your program

These categories make it easier to see all of the basic functions you may want to use in
your program. Rather than having to look up a reference for all the functions available
for controlling a speaker, for example, the main options are visible in the Output
category. We also draw from all the benefits of visual programming, with blocks that
only snap together if they “fit” and construct working code.

When you drag out any programmable element into the Tinkercad Circuits editor and
click on the Code Editor button, you’ll automatically see code blocks side-by-side with
the text editor. Let’s dig into an example below for controlling a servo motor with a
potentiometer.

All Arduino programs have two main functions: a setup() and a loop(). When you drag
out any block into the scripting area, the code gets added to the loop() function, and
we dynamically create any lines of code necessary within the setup().
For example, when the first block to rotate the servo is added (rotate servo on pin 0 to 0
degrees), several things happen automatically:

1. The Servo library is added to the code (#include <Servo.h>)

2. A Servo instance is created (Servo servo_3)

3. In the setup(), the servo is attached to the pin specified (servo_3.attach(0))

4. We tell the servo to move to 0 degrees (servo_3.write(0))

This all happened just by adding one block to our code — pretty powerful!

Similarly, when the read analog pin A0 block is added (to control the position of the
servo using a potentiometer), check out how we add additional information to the
setup() function to specify the pinMode (pinMode(A0, INPUT)).

This functionality is how we addressed Goal #2 of helping users focus on the

interactions. We provide the underlying setup necessary to control your program, so all
you have to think about is what you want your sensors and actuators to do.

Because we generate the text-based code side-by-side with the code blocks (Goal #3),
you can always see how your blocks translate to real Arduino syntax. We believe this
has incredible value for learning how to program with Arduino because with every
new block you use, you see exactly how it affects the code. In the example above, we
effectively turned 3 blocks into ~16 lines of code. For other sensors, there is even
greater encapsulation. For example, if you drag out the read ultrasonic distance sensor
block, it carries with it ~24 lines of code!

The read ultrasonic distance sensor block translates to 24 lines of text-based code
The translation between visual blocks and text syntax also affords us some
opportunities to tweak the semantics of Arduino functions to make them easier to
understand. We wanted to map as closely to sentence-structure as possible, so rather
than create a block called, for example, Serial.read(), we created the block read from
serial.

Another example of this is with our wait block, which is the equivalent to an Arduino
delay. Delay is usually specified in milliseconds, which we felt may be difficult to think
in when you’re beginning to program. Instead, we default to a unit of seconds, but in
the process, we automatically add comments to the text editor that explain the
translation between 1 second and 1000 ms:

Adding comments to explain simpli cations in Code Block syntax

Ultimately, users can download the code as an Arduino sketch from the Circuits editor,
open it in the Arduino desktop IDE, and upload it directly to a device when they’re
ready.

Try it Out!
To get started with code blocks, head over to your dashboard (tinkercad.com when you
are logged in), click on Circuits, and click the Create Circuit button. When you have
the Circuits editor open, drag out an Arduino and click the Code Editor button. There,
you’ll automatically see the code blocks and default code to turn the built-in LED on
and off — click the Start Simulation button to test it out!
 Getting to Code Blocks in Tinkercad

Many of our starters also include code blocks. To test out these pre-made circuits, click
on the Components Button, select the Starters tab, and choose something under the
Arduino section to start tinkering (I recommend the Servo starter!).

If you’re looking for some ideas for projects to build, here are some additional
examples to get you well on your way to coding with code blocks:

Control an RGB LED with a temperature sensor

 Create an alarm using an ultrasonic distance sensor and LED

Upcoming Features
Our preview release includes blocks for playing speakers, controlling servos, reading
ultrasonic distance sensors, and more. We’ll be adding even more blocks in the near
future.

We’re also planning on doing a bit of an editor refresh to optimize screen real-estate, as
shown below:
Any questions or suggestions? Please leave a comment below!

Acknowledgments
Thanks to the Scratch Team, especially Andrew Sliwinski and Paul Kaplan, for helping
us get started with Scratch Blocks, and thanks to the larger Tinkercad team for their
feedback and bug bashing!

Arduino Programming Design Electronics Prototyping

About Help Legal

Get the Medium app