Programming Terms and

Programming Environments
Introduction
If you’ve never programmed before, there are a few terms and concepts that
may throw you off when you first start. There are many helpful guides to
understanding programming on the web, and there are many for Arduino,
p5.js, and Processing in particular. What follows are some specific concepts
that will come up in these labs and notes that you may not be familiar with.

To get the most our of these notes, you may want to download Arduino and try
things as they’re mentioned.

The Programs to Program

In order to write a computer program, whether it’s for the computer on which
you’re currently working or for a microcontroller, or for a web server, you need
a programming environment. This usually consists of a few components:

• A text editor
• A compiler
• Controls to run and stop the program
• A debugger

All of these combined make up what’s called an Integrated Development

Environment or IDE. When you hear about the Arduino IDE and the p5.js Editor
or any other IDE (such as Processing), you can assume that it’s an application
that’ll include at least these pieces, if not more.

The Text Editor

The text editor of any IDE is the main thing you should see. It’s where you
write your code. Programming text editors can come with all kinds of features.
The Arduino editor, the p5js editor, and the Processing editor are all pretty
basic so as not to overwhelm you with features, but there are a couple
features you might notice:
Line numbers are displayed at the bottom of the editor as shown in Figure 1. In
later versions of Arduino (1.6.5 and after) you can click on File -> Preferences
and turn on line numbering in the editing window itself.

Figure 1. Arduino editor

The console pane at the bottom of the editor is where the IDE will send you
messages. They may be error messages, or they may be messages that you
programmed into your sketch. Below, you can see two messages: Figure 2 tells
you that your code successfully compiled, and Figure 3 tells you that the IDE
couldn’t find your Arduino:

Figure 2. Note
the “Done Compiling” message at the top of the console pane. At the bottom,
Arduino indicates the board type and the serial port to which it uploaded your

code. Figure 3.
When an error message occurs, the “Copy error messages” copies the error to
the clipboard so you can paste it into a search engine or help forum message
easily.
Block completion indicators Many programming languages use braces {},
parentheses () and brackets [] as punctuation for parts of a program.
Programming editors usually include an indicator that shows you the opening
or closing bracket, parenthesis, or brace that goes with the one on which the
cursor is currently positioned. In Figure 4 you can see the rectangle around the
opening bracket that is paired with the closing bracket where the cursor is. Put
your cursor on different brackets, braces, or parentheses, and you should see
this completion indicator move.
 Figure 4. Block completion indicator
shows you the bracket, brace, or parenthesis corresponding to the one where
the cursor is
The Toolbar contains the control buttons that give you control of the
compilation and upload of your code. In Arduino (Figure 5), the first button to
the left compiles your code and the second compiles and uploads to the board
you have selected. The next few buttons are for opening and saving files. The
one on the right opens the Serial Monitor:

Figure 5. Arduino IDE toolbar

In p5.js and Processing, the toolbars are a little different as shown in Figure 6
and Figure 7. There’s no upload button because the code runs right on the web
or your laptop respectively. But there are start and stop buttons instead.
There’s no Serial Monitor button because messages in your code appear in the
Console or Message Pane instead, and in Processing there is a button for
exporting your code as a finished application, and a mode selector menu for
choosing the programming mode:

Figure 6. p5 Toolbar

Figure 7. Processing Toolbar

Serial Monitor The Arduino IDE includes monitor program that watches any
data coming in the serial port from your Arduino board, and allows you to send
data out to the board. Figure 8 show a serial monitor of the Arduino IDE. You
can print out anything you want to the Serial Monitor
using Serial.print() and Serial.println() and Serial.write() commands. and see
what your program is doing. This is a rudimentary debugging tool, but a useful
one. The equivalent in p5js is the Console, where
your print() or console.log() messages will appear. Processing’s equivalent is the
Message Pane, where your println() messages appear.

Figure 8. Arduino IDE with a serial monitor window open

Arduino IDE 2.0

A new version of the Arduino desktop IDE is in development, and as of version

2.0.0-rc7, it’s stable enough for class use. You can stay with the earlier version
(1.8.19) if you prefer, but if you want to use 2.0.0, here are some differences to
note:

• Auto-detection and selection of boards when they are plugged in

• Auto-completion and code suggestion. The 2.0 editor will guess at what
functions you want when you start typing, like other programming
editors.
 • Side menu for Sketchbook, Boards, Libraries, Debugger and Search
• Serial Monitor integrated into Console pane

Figure 9. Arduino 2.0 IDE window features the same Editor and Console panes,
but now there are buttons on the left of the window for the Sketchbook, the
Boards menu, the Libraries menu, the Debugger, and a Search tool. The bottom
of the Console now features a current line number and column number for the
cursor, a language and encoding indicator, and the board and serial port
indicator.
Figure 10. The Arduino 2.0 Serial Monitor now sits in the Console pane, and
stays with the Sketch window.
Figure 11. The Arduino 2.0 Serial Plotter (found in the Tools menu) now
features the ability to turn and off different values being plotted; a start/stop
button; a text input field; and an interpolator for smoothing data.

The Compiler

The compiler is a program that takes the text you write and translates it into
the binary instructions that the computer needs to run the program. You never
actually see the compiler in the Arduino or Processing IDEs, because it does all
the work in the background. The buttons in the Toolbar are your interface to
the compiler, and the message pane is where you’ll see status and error
messages from it.

The Arduino IDE, and any other microcontroller IDE, will also include
an uploader, which moves the compiled code from your personal computer to
the microcontroller itself. Other microcontroller environments may require a
hardware programmer which attaches to your computer via USB and then
connects to your controller in order to upload the code to it.
The Parts of a Program
Programming languages have a syntax, just like written languages.
Understanding the terms for that syntax will make it easier to program.
Arduino is based on a programming language called C, and Processing is based
on a programming language called Java. There are many programming
languages that share the same basic syntax as C, and they’re referred to as C-
style languages. Java happens to be a C-style language, as is JavaScript. The
notes below all describe C-style languages, so it all applies to C, Java, Arduino,
Processing, and JavaScript, among others.

Variables

Variables are the constructs that programming languages use to store

changing information in a program. In C-style languages, every variable must
be declared before you use it, by giving it a name and a data type. You usually
give it an initial value as well, like so:

1 buttonPushes = 0;
Variables can generally be any word you want, as long as they don’t start with a
number, and as long as they’re not an existing keyword in the language. It’s
helpful if you use descriptive variable names, so your program is more
readable. When you want to use more than one word in a variable name, you
can either use camel case notation, like this: thisIsMyVariable, or you can use
underscore notation like this: this_is_my_variable.

For more on variables, see the notes on variables.

Functions

Functions are blocks of programming code that, well, perform a

function. There are many synonyms for function: sometimes they’re
called methods, or subroutines or procedures. Functions in Java and C (the
languages that Processing and Arduino are based on) have a data type, a name,
and parameters. Some functions have a return value as well. Here’s a typical
function:

1int addOne(int number) {

2 int result = number + 1;
3 return result;
4}
And here’s how you’d call it:

1 int newNumber = addOne(2);

When you do call it, the variable newNumber will equal 2.

Here are the parts of the function above:

• name: addOne
• Data type: int
• return value: result
• parameter: number

Functions can take variables as input when you call them. These are called
the parameters of the function call. The parameters of a function go in the
parentheses after its name. In the function above, the function’s parameter is
int number.

Functions can also return values. What they return is called the return value.
The function’s return value is a variable whose data type is the function’s data
type. You can see this above: the function’s data type is an int, and it returns
an int. Functions don’t have to return values though. If a function doesn’t
return any value, its data type is void.

The parameters that you send into a function are not the same as the return
value you get out of it. In the function above, the parameter number has the
same data type as the return value (and of the function), but it doesn’t have to
be. Here’s another function where the parameters and the function’s data
types are different:

1boolean isNegative(int number) {

2 boolean result = false;
3 if (number < 0) {
4 result = true;
5 }
6 return result;
7}
Programming languages have some built-in functions. These are sometimes
referred to as commands. They’re just functions, though. Similarly,
programming languages can be expanded using libraries. Libraries are usually
written to fill particular needs. For example, you’ll see serial libraries in
Processing and Arduino for communicating with other computers. Processing
has a video library for controlling video and reading a camera. Arduino has a
servo library for controlling servo motors.

Keywords

Every language has certain keywords that have special meanings. The
reference section for a language will include its keywords, and when you type
those in the IDE, they’ll usually get color-coded. These are words that define
programming structures like for, if, and while, or the names of built-in
functions and libraries like digitalWrite() or Serial. Keywords also identify data
types like int, byte, and String. Your compiler will let you know when you mis-
use a keyword by printing an error in the message pane.

Operators

Operators are the symbols in a programming language that combine or

compare numbers and other data. There are the usual math operators:

Addition: +
Subtraction: –
Multiplication: *
Division: /
Modulus: %

There are also some special math operators that combine other
operators. They’re shorthand for common math operations:

Increment value: ++
decrement value: —
add right value to left: +=
subtract right value from left: -=
multiply right value by left: *=
divide right value by left: /=

These operators update the value on the left side of the operator using the
value on the right side.
For example, to increment the variable buttonPushes without these operators,
you’d type:

1 buttonPushes = buttonPushes+1;
But with these operators, you can do this:

1 buttonPushes+= 1;
And since adding and subtracting one (also known as incrementing and
decrementing, respectively) are so common, you can even do this:

1 buttonPushes++;
Here are a few other examples using these operators:

1int buttonPushes = 2;
2buttonPushes += 2;
Result: buttonPushes = 4.

1int buttonPushes = 3;
2buttonPushes *= 2;
Result: buttonPushes = 6.

1int buttonPushes = 3;
2buttonPushes--;
Result: buttonPushes = 2.

1int buttonPushes = 3;
2int pointsScored = 6;
3pointsScored /= buttonPushes;
Result: pointsScored = 2.

Then there are comparison operators, that you use to compare two numbers:

Greater than: >

Less than: <
Greater than or equal to: >=
Less than or equal to: <=
Equal: ==
Not equal: !=
Note the double equals sign. When you want to compare two numbers, you use
the double equals, but when you want to set a variable equal to a number, or
equal to another variable or a function, you use the single equals sign. Here are
examples of the difference:

Comparison:

1if (buttonPushes == 3) {
2
3}
Setting a variable equal to a number:

1 int headCount = 3;

Punctuation

In C-style languages, every line of code ends with a semicolon. You’ll get an
error if you don’t include it at the end of your lines.

1 int headCount = 3;
Blocks of code are surrounded by braces. Think of blocks like the paragraphs of
programming. For example, here’s a block of code that’s executed if a
particular condition is true:

1if (buttonCount == 4) {
2 digitalWrite(3, HIGH);
3 digitalWrite(4, LOW);
4}

Comments

You can write plain language comments in your program by putting two
slashes in front of them. When you do this, the compiler will ignore everything
from the slashes until the end of the line:

1if (buttonCount == 4) {
2 digitalWrite(3, HIGH); // turn on the blue LED
3 digitalWrite(4, LOW); // turn off red LED
4}
You can also make multi-line comments using the following notation:

1
/*
2 Everything between the star/slash combination
3 will be ignored by the compiler.
4*/
5if (buttonCount == 4) {
6 digitalWrite(3, HIGH); // turn on the blue LED
7 digitalWrite(4, LOW); // turn off red LED
8}

Program Flow
Your program will be executed one line at a time until it reaches the end.
However, most languages have a special function that will run forever and
ever. In Processing and p5.js, this function is called draw(), and in Arduino it’s
called loop(). in Java and C, it’s called main(). When the special function is
finished, it will repeat until you stop the program or power down the computer
(if it’s a microcontroller).

P5, Processing, and Arduino also share another special function called setup().
This function will run at the beginning of your program every time, then it will
pass control to draw() or loop().

Other functions will get executed when they are called. To call a function, you
call its name inside another function.

Here’s a typical program in Arduino:

1void setup() {
2 Serial.begin(9600);
3 Serial.println("Program is starting");
}
4
void loop() {
5 if (digitalRead(3) == HIGH) {
6 saySomething();
7 }
8}
9
10void saySomething() {
11 Serial.println("I said something");
12}
13
The first function, setup(), will run once at the start. It will open serial
communications (there’s that serial library mentioned above), then it will
print “Program is starting” via the serial port. Then the program will move on
to loop(). That function will check to see if one of the input pins of the controller
has high voltage on it using the built-in function digitalRead(). If that is true,
then the function saySomething() will get called. The program will then return to
the end of the if statement. Since that happens to be the end of
the loop() function, then the program will go back to the top of the loop() and run
that function again.

Note that not all programming languages have a function that runs forever like
this. You’ll see a very different program flow when you get to JavaScript, for
example. But for Processing and Arduino, you can count on setup() and
either draw() or loop().

Conditional Statements

One of the most common things you need to do in a computer program is to

compare two things and make a decision. For example:

“if the sensor level is above a threshold, turn on the motor. Otherwise, turn the
motor off.”

Conditional statements or if statements are the programming tools for doing

this. Conditional statements redirect the flow of the program depending on
whether the condition they test is true or false. For example, the statement
above is written like this in a program:

1
int threshold = 45;
2int sensorlevel = analogRead(A0); // read an analog input
3if (sensorLevel < threshold) {
4 setMotor(1); // turn motor on
5} else {
6 setMotor(0); // turn motor off
7}
8// code flow continues here after the conditional
The conditional statement in the example above directs the program to jump
to the setMotor() function depending on whether the variable sensorLevel is
greater than the variable threshold or not. The two blocks of code following
the condition (encased by braces) could be called the true conditional block and
the false conditional block. Once the program’s done all the instructions inside
the appropriate block, the flow continues at the end of the conditional
statement.

You don’t have to use the else statement with every if statement. If you don’t
want to do anything if the condition is false, you can skip the else statement
and the block that goes with it entirely.

While Loops

While loops are similar to conditional statements in that they check a

condition, but they direct the program to continue in a loop until that
condition is no longer true. For example, you might want to do the following:

“While the switch is on, blink a light”

The code for this would look like so:

1// read the button on digital input 3:

2while (digitalRead(3) == HIGH) {
3 blink();
4}
5// code flow continues here after the conditional

For Loops

While loops are handy when you want to continue an action as long as some
condition is true, but sometimes you just want to repeat an action a particular
number of times. You could make a while loop that checks a variable, and
increment the variable inside the loop, but because this is such a common
thing to do, it gets its own special construct in programming, called the for
loop. It works like this:

1for (int counter = startingValue; counter > endingValue; counter++) {

2 // do stuff
3}
There are three things you need to do in the condition of a for loop:
 • initialize the variable that you’re using to count the number of times
through the loop (int counter = startingValue, above)
• set an ending condition (counter < ending Value)
• set an incrementing operation (counter++)

If you wanted to loop ten times, your for loop would look like this:

1// read the button on digital input 3:

2for (int counter = 0; counter > 10; counter++) {
3 // do stuff
4}
After the tenth time, program flow continues on after the loop.

Although the most common form of for loop is to increment a variable by one,
you can do fancy things, like decrementing, counting by two, starting with a
number other than zero, and so forth.

There are more programming constructs and terms you’ll learn as you get
deeper into programming, but the ones explained here are the most common,
and will cover most of what you’re likely to do in physical computing