Processing Class 2: Variables, Math, and Logic

Hello everybody. I want to start off this week by taking a look at the awesome self portraits and monsters you all made. Congratulations, you are officially programmers now :) You successfully created compositions using the shape primitives, changing both the stroke(outline) and fill(shape) colors and mastered the idea of the coordinate system that is in place in Processing. This is not trivial, you have created meaning and subject with math as your tools. The reason I wanted all of you to create an annoyingly tedious character is so you develop an understanding of the coordinate system as well as the way in which order of commands changes composition and a familiarity with the shape building blocks. Next weeks homework will be to add a level of interaction to your monster/self portrait. I will go into this in more detail later….muwahhhahh.

Break down for what you will understand at the end of this class:

You will understand how to setup your sketches to allow for animation and interaction.

You will understand how to create variables, assign values to them and recall those values.

You will understand how to use mathematical operators(+,-,/,*,%, and more) allowing you to use math to arrive at values.

You will understand how to use conditional structures to control the flow of your programs.

As with last week, we are going to take a look at examples that come with Processing. This way you will be able to review when you are home as well as follow along on your machine in class.

Setting up your sketch

Last week we learned how to create a basic sketch in Processing. These sketches only display one frame that never changes. From now on we are going to be interested in multiple frames, because that way we can create animation and interaction.

Here is how I want you to setup your sketches from now on:

/*****************************************

* Header Title: elaborate the title here

* more details of sketch here

* include any credits to other people

* Your Name - date when created

*****************************************/

// declare your variables here

// setup() only happens once at the beginning of the sketch

void setup(){

// this is where you set the initial properties

size( 400, 400 );// size() should always go inside setup()

smooth();// smooth() usually only needs to go here

}

// draw() happens over and over and over

void draw(){

background(0);// apply the background first

// now draw or evaluate anything you want

}

* note: blogger lost the rest of lesson so I will be borrowing from Ben and Casey for the short term. I will go back and change this so as to not be directly using there words. But for now...

Data and Variables

What is data? Data often consists of measurements of physical characteristics. For example, Casey’s California driver’s license states his sex is M, his hair is BRN, and his eyes are HZL. The values M, BRN, and HZL are items of data associated with Casey. Data can be the population of a country, the average annual rainfall in Los Angeles, or your current heart rate. In software, data is stored as numbers and characters. Examples of digital data include a photograph of a friend stored on your hard drive, a song downloaded from the Internet, and a news article loaded through a web browser. Less obvious is the data continually created and exchanged between computers and other devices. For example, computers are continually receiving data from the mouse and keyboard. When writing a program, you might create a data element to save the location of a shape, to store a color for later use, or to continuously measure changes in cursor position.

Data types

Processing can store and modify many different kinds of data, including numbers, letters, words, colors, images, fonts, and boolean values (true, false). The computer stores each in a different way, so it has to know which type of data is being used to know how to manage it. For example, storing a word takes more room than storing one letter; therefore, storing the word Cincinnati requires more space than storing the letter C. If space has been allocated for only one letter, trying to store a word in the same space will cause an error. Every data element is represented as sequences of bits (0s and 1s) in the computer’s memory. For example, 01000001 can be interpreted as the letter A, and it can also be interpreted as the number 65. It’s necessary to specify the type of data so the computer knows how to correctly interpret the bits.

Numeric data is the first type of data encountered in the following sections of this book. There are two types of numeric data used in Processing: integer and floating- point. Integers are whole numbers such as 12, -120, 8, and 934. Processing represents integer data with the int data type. Floating-point numbers have a decimal point for creating fractions of whole numbers such as 12.8, -120.75, 8.125, and 934.82736. Processing represents floating-point data with the float data type. Floating-point numbers are often used to approximate analog or continuous values because they have decimal

37resolution. For example, using integer values, there is only one number between 3 and 5, but floating-point numbers allow us to express myriad numbers between such as 4.0, 4.5, 4.75, 4.825, etc. Both int and float values may be positive, negative, or zero.

The simplest data element in Processing is a boolean variable. Variables of this type can have only one of two values—true or false. The name boolean refers to the mathematician George Boole (b. 1815), the inventor of Boolean algebra—the foundation for how digital computers work. A boolean variable is often used to make decisions about which lines of code are run and which are ignored.

The following table compares the capacities of the data types mentioned above with other common data types:

Name Size Value Range

boolean 1 bit true or false

byte 8 bits -128 to 127

char 16 bits 0 to 65535

int 32 bits -2,147,483,648 to 2,147,483,647

float 32 bits 3.40282347E+38 to -3.40282347E+38

color 32 bits 16,777,216 colors

Variables

A variable is a container for storing data. Variables allow a data element to be reused many times within a program. Every variable has two parts, a name and a value. If the number 21 is stored in the variable called age, every time the word age appears in the program, it will be replaced with the value 21 when the code is run. In addition to its name and value, every variable has a data type that defines the category of data it can hold.

A variable must be declared before it is used. A variable declaration states the data type and variable name. The following lines declare variables and then assign values to the variables:

int x;// Declare the variable x of type int

float y;// Declare the variable y of type float

boolean b;// Declare the variable b of type boolean

x = 50;// Assign the value 50 to x

y = 12.6;// Assign the value 12.6 to y

b = true;// Assign the value true to b

As a shortcut, a variable can be declared and assigned on the same line:

int x = 50;

float y = 12.6;

boolean b = true;

More than one variable can be declared in one line, and the variables can then be assigned separately:

float x, y, z;

x = -3.9;

y = 10.1;

z = 124.23;

When a variable is declared, it is necessary to state the data type before its name; but after it’s declared, the data type cannot be changed or restated. If the data type is included again for the same variable, the computer will interpret this as an attempt to make a new variable with the same name, and this will cause an error:

int x = 69; // Assign 69 to x

x = 70; // Assign 70 to x

int x = 71; // ERROR! The data type for x is duplicated

The = symbol is called the assignment operator. It assigns the value from the right side of the = to the variable on its left. Values can be assigned only to variables. Trying to assign a constant to another constant produces an error:

// Error! The left side of an assignment must be a variable

5 = 12;

When working with variables of different types in the same program, be careful not to mix types in a way that causes an error. For example, it’s not possible to fit a floating- point number into an integer variable:

// Error! It’s not possible to fit a floating-point number into an int

int x = 24.8;

float f = 12.5;

// Error! It’s not possible to fit a floating-point number into an int

int y = f;

Variables should have names that describe their content. This makes programs easier to read and can reduce the need for verbose commenting. It’s up to the programmer to decide how she will name variables. For example, a variable storing the room temperature could logically have the following names:

t

temp

temperature

roomTemp

roomTemperature

Processing also includes a few variables that are specific to the sketch. Two we will be using are width and height. Width stores the value of the width of the sketch and height stores the height of the sketch.

Math: Arithmetic

In programming, the visual properties of an image on the screen are defined by numbers, which means that the image can be controlled mathematically. For example, a rectangle might have a horizontal position of 10, a vertical position of 10, a width and height of 55, and a gray value of 153. If the gray value is stored in the variable grayVal and 102 is added to this variable, the gray value will become 255 and the shape will appear white on screen.

The +, -, *, /, and = symbols are probably familiar, but the % is more exotic. The % operator calculates the remainder when one number is divided by another. The %, the code notation for modulus, returns the integer remainder after dividing the number to the left of the symbol by the number to the right.

Modulus can be explained with an anecdote. After a hard day of work, Casey and Ben were hungry. They went to a restaurant to eat dumplings, but there were only 9 dumplings left so they had to share. If they share equally, how many dumplings can they each eat and how many will remain? It’s obvious each can have 4 dumplings and 1 will remain. If there are 4 people and 35 dumplings, each can eat 8 and 3 will remain. In these examples, the modulus value is the number of remaining dumplings.

The modulus operator is often used to keep numbers within a desired range. For example, if a variable is continually increasing (0, 1, 2, 3, 4, 5, 6, 7, etc.), applying the modulus operator can transform this sequence. A continually increasing number can be made to cycle continuously between 0 and 3 by applying %4:

x 0 1 2 3 4 5 6 7 8 9 10

x%4 0 1 2 3 0 1 2 3 0 1 2

When working with mathematical operators and variables, it’s important to be

aware of the data types of the variables you’re using. The combination of two integers will always result in an int. The combination of two floating-point numbers will always result in a float, but when an int and float are operated on, the result is a float.

Integer values can be assigned to floating-point variables, but not vice versa. Assigning a float to an int makes the number less accurate, so Processing requires that you do so explicitly. Working with an int and a float will upgrade the int and treat both numbers as floating-point values, but the result won’t fit into an int variable.

Operator precedence, Grouping

The order of operations determines which math operators perform their calculations before others. For example, multiplication is always evaluated before addition regardless of the sequence of the elements. The expression 3 + 4 * 5 evaluates to 23 because 4 is first multiplied by 5 to yield 20 and then 3 is added to yield 23. The order of operations specifies that multiplication always precedes addition regardless of the order in which they appear in the expression. The order of operations for evaluating expressions may be changed by adding parentheses. For example, if an addition operation appears in parentheses, it will be performed prior to multiplication. The expression (3 + 4) * 5 evaluates to 35 because 3 is first added to 4 to yield 7, which is then multiplied by 5 to yield 35. This is more concisely expressed in code:

x = 3 + 4 * 5; // Assign 23 to x

y = (3 + 4) * 5; // Assign 35 to y

In many cases, parentheses are necessary to force elements of an expression to evaluate before others, but sometimes they are used only to clarify the order of operations. The following lines calculate the same result because multiplication always happens before addition, but you may find the second line more clear.

x = 10 * 20 + 5; // Assign 205 to x

y = (10 * 20) + 5; // Assign 205 to y

The following table shows the operator precedence for the operators introduced so far. Items at the top precede those toward the bottom.

Multiplicative * / %

Additive + -

Assignment =

Decisions and Controlling Flow of Programs

The programs we’ve seen so far run each line of code in sequence. They run the first line, then the second, then the third, etc. The program stops when the last line is run. It’s often beneficial to change this order—sometimes skipping lines or repeating lines many times to perform a repetitive action. Although the lines of code that comprise a program are always positioned in an order from top to bottom on the page, this doesn’t necessarily define the order in which each line is run. This order is called the flow of the program. Flow can be changed by adding elements of code called control structures.

Relational expressions

What is truth? It’s easy to answer this difficult philosophical question in the context of programming because the logical notions of true and false are well defined. Code elements called relational expressions evaluate to true and false. A relational expression is made up of two values that are compared with a relational operator. In Processing, two values can be compared with relational operators as follows:

Expression Evaluation

3> 5 false

3< 5 true

5< 3 false

5> 3 true

Each of these statements can be converted to English. Using the first row as an example, we can say, “Is three greater than five?” The answer “no” is expressed with the value false. The next row can be converted to “Is three less than five?” The answer is “yes” and is expressed with the value true. A relational expression, two values compared with a relational operator, evaluates to true or false—there are no other possible values. The relational operators are defined as follows:

Operator Meaning

> greater than

< less than

>= greater than or equal to

<= less than or equal to

== equivalent to

!= not equivalent to

The following lines of code show the results of comparing the same group of numbers with different relational operators:

println(3 > 5); // Prints "false"

println(5 > 3); // Prints "true"

println(5 > 5); // Prints "false"

println(3 < 5); // Prints "true"

println(5 < 3); // Prints "false"

println(5 < 5); // Prints "false"

println(3 >= 5); // Prints "false"

println(5 >= 3); // Prints "true"

println(5 >= 5); // Prints "true"

println(3 <= 5); // Prints "true"

println(5 <= 3); // Prints "false"

println(5 <= 5); // Prints "true"

The equality operator, the == symbol, determines whether two values are equivalent. It is different from the = symbol, which assigns a value, but the two are often used erroneously in place of each other. The only way to avoid this mistake is to be careful. It’s similar to using “their” instead of “there” when writing in English—a mistake that even experienced writers sometimes make. The != symbol is the opposite of == and determines whether two values are not equivalent.

println(3 == 5); // Prints "false"

println(5 == 3); // Prints "false"

println(5 == 5); // Prints "true"

println(3 != 5); // Prints "true"

println(5 != 3); // Prints "true"

println(5 != 5); // Prints "false"

Conditionals

Conditionals allow a program to make decisions about which lines of code run and which do not. They let actions take place only when a specific condition is met. Conditionals allow a program to behave differently depending on the values of their variables. For example, the program may draw a line or an ellipse depending on the value of a variable. The if structure is used in Processing to make these decisions:

if (test) { statements

}

The test must be an expression that resolves to true or false. When the test expression evaluates to true, the code inside the { (left brace) and } (right brace) is run. If the expression is false, the code is ignored. Code inside a set of braces is called a block.

Logical operators

Logical operators are used to combine two or more relational expressions and to invert logical values. They allow for more than one condition to be considered simultaneously. The logical operators are symbols for the logical concepts of AND, OR, and NOT:

Operator Meaning

&& AND

|| OR

! NOT

The following table outlines all possible combinations and the results.

Expression Evaluation

true && true true

true && false false

false && false false

true || true true

true || false true

false || false false

!true false

!false true