Lesson Two: Everything You Need to Know Chapter 4: Variables Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text

Lesson Two: Everything You Need to KnowChapter 4: Variables

Learning Processing

Daniel Shiffman

Presentation by Donald W. SmithGraphics from text

Learning Processing: Slides by Don Smith 2

Lesson Two: Everything You Need to Know

4: VariablesWhat are they?

Declaring and initializing variables

Common uses for variables

Variables you get “for free” in ProcessingAka: Built-in variables

Using random values for variables

5: Conditionals

6: Loops


What is a variable?

Storage Analogies:Different sizes

Like a bucket

Like a locker

Graph Paper/SpreadsheetMany ‘storage’ places, all with unique locations (x,y)

In Excel, E3 could be named ‘Billys Score’

Billy’s score can change!

A B C D E F1

2

3

4

5


What is a variable?

In Algebra:x = y * z

Named with single letters to represent some number

In Programming:We use longer, more descriptive names

Variables refer to ‘memory locations’

Stored in ‘RAM’Random Access Memory

Have a ‘size’How many bytes of memory ‘wide’


Variables must be ‘Declared’

What is a Declaration?Programmer tells the compiler:

Type

Name

;

What is a Type?Each type requires a specific amount of storage

‘Primitive’ types include three main categoriesIntegers – Whole Numbers (positive and negative), no fractions

Floating point – Numbers with fractional parts and exponents

Characters – One letter that you can type

A, B, C, a, b, c, 1, 2, 3, %, &….


All Primitive Types

Integer Types

byte: A very small number (-127 to +128)

short: A small number (-32768 to +32767)

int: A large number (-2,147,483,648 to +2,147,483,647)

long: A huge number

Floating Point Types

float: A number with decimal places, 4 bytes

double: Much more precise, for heavy math, 8 bytes

Other Types

boolean: true or false

char: One symbol in single quotes ‘a’


Primitive Type Storage

Integer Types

byte:

short:

int:

long:


float:

double:

Other Types

boolean:

char:


Primitive Type Examples

Integer Types

byte: 123

short: 1984

int: 1784523

long: 234345456789


float: 4.0

double: 3.14159, 1.0e+23, 2.4e-20

Other Types

boolean: true

char: ‘a’

Numeric versus ‘Character’ types

How do you decide if you need a numeric or a character type?

If you plan on doing ‘math’ on the variable, then you MUST use a numeric type

What is the letter ‘a’ times the letter ‘c’?

Notice the single quotes around characters

If you plan on using “Strings” (later), they are just words made up of characters.

“Bob” and “Mary” are Strings (of characters)

Notice the double quotes around strings

What is the string “Bob” times the string “Mary”?



Declaring and Initializing VariablesWhat is Initialization?

Setting an initial value into the contents of the variablePseudocode: Set NumPlayers to 5

Can be done in two ways:During Declaration: On one line

int count = 50; // declare and initialize

After declaration: On two linesint count; // declare the variablecount = 50; // initialize the value

Can also be initialized with a calculation!int max = 100;int min = 10;int count = max – min; // calculation

Pong Variables

What variables would be required to play?Scores?

Paddle locations?

Ball location?

Net location

Screen Size?



Naming Variables

There are some ‘rules’ and some ‘best practices’Rules

Letters, Digits and underscore ( _ ) are OK to useCannot start with a digit ( 0,1,…9 )Cannot use reserved words

mouseX, int, size..

Best PracticesUse descriptive names

boolean moreToDo;

Use ‘camelHump’ notationStart with lower caseEach new word starts with Upper Case

Declaration and Initialization ExamplesType name (optional initialization) ;

int count = 0; // Declare an int , initialized to 0

char letter = 'a'; // Declare a char, initialized to 'a'

double d = 132.32; // Declare a double, initialized to 132.32

boolean happy = false; // Declare a boolean, initialized to false

float x = 4.0; // Declare a float, initialized to 4.0

float y; // Declare a float (no assignment)

float z = x * y + 15.0; // Declare a float, initialize it to

// x times y plus 15.0.

After declaration Assignments:count = 1;

letter = ‘b’;

happy = true;

y = x + 5.2; // Assign the value of x plus 5.2


Declaration and Initialization IssuesYou can only initialize a variable to a value

of the same, or compatible type:Which initializations are compatible?int count = ‘a’;

char letter = 0;

double deposit = “Fred”;

boolean happy = 1;

float feet = 6;

int inches = feet * 12;

long giant = feet * 3.0;


Declaration and Initialization IssuesYou can only initialize a variable to a value

of the same, or compatible type.Which initializations are compatible?int count = ‘a’;

char letter = 0;

double deposit = “Fred”;

boolean happy = 1;

float feet = 6;

int inches = feet * 12;

long giant = feet * 3.0;


Where to Declare VariablesRemember that your code is in ‘blocks’Variables can go inside or outside these blocksFor now, we will put them ‘outside’ (before) blocks

Varying Variables: Example 4.3Remember that processing calls draw()in a loopIf you want the variable to change every time:

Declare and initialize it outside of draw()!Change it inside draw()!

Moves as circleX increases


What happens in example 4.3?circleX Is initialized to 0Used first time draw()is called

ellipse(circleX, circleY, 50,50);Then circleX = circleX + 1;Next time draw()is called, circleX is 1ellipse(circleX, circleY, 50,50);Then circleX = circleX + 1;Next time draw()is called, circleX is 2ellipse(circleX, circleY, 50,50);Then circleX = circleX + 1;

.. Until circleX is over 200, and the circle just moves off the right side of the screen, never to be seen again!It is often useful to make a ‘table’ of all of the variables that are being changed every time through a ‘loop’

Call to draw()

circleX

1 0

2 1

3 2

4 3

5 4

…

200 199

Using Many VariablesMake things more interesting using more variables!

Declare and initialize them outside of draw()!Change them inside draw()!

Call to draw()

circleX circleY circleW circleH

1 0 0 50 100

2 0.5 0.5 50.5 100.5

3 1.0 1.0 51 101

10 4.5 4.5 54.5 104.5

30 14.5 14.5 64.5 114.5

100 49.5 49.5 99.5 149.5

200 99.5 99.5 149.5 199.5


Operators on numerical variables

• Addition: +• Increment: x = x+1, ++x

• Subtraction: -• Decrement: x = x-, --x

• Multiplication: *• Division: /

Pay attention to integer and float divisions• Remainder: %

5%3 2, 2%12 2, 12%3 0• Assignment: =


Precedence of operators

• Parentheses have the highest precedence• *, / , % +, - =• If not sure, use parentheses.


Examples

• Convert temperatures in F and C• Extract the two digits from a two-digit

number.


System VariablesProcessing provides many ‘built-in’ variables:

These are not for you to play with, but may change!

mouseX , mouseY, pmouseX and pmouseY

width: Width (in pixels) of sketch window

height: Height (in pixels) of sketch window

frameCount: Number of frames processed

frameRate: Rate (per sec.) that frames are processed

screen.height, screen.width: Entire screen

key: Most recent key pressed on keyboard

keyCode: Numeric code for which key pressed

mousePressed: True or false (pressed or not?)

mouseButton: Which button (left, right, center)


Random: Variety is the spice of lifeProcessing (and all programming languages)

provide a way to get a random value when your program runs.

random() is a ‘function’ that returns a float

You can assign this number to a variable and use it!

Some examples:

What is that (int)and (1,100)stuff?

(int)Since random()returns a floating point number and w is an int, we need to change the type from float to int.

This is called ‘casting’

random(1,100) ;(1,100) are ‘parameters’ which tell the random function the range of numbers to return

w will be between 1 and 99 (not quite 100)


Make Zoog Move!Use variables to make Zoog move and change!

1) Make Zoog rise from below the screenNeed variables for the Zoog’s X and Y locations

Note: Locations of ALL of Zoog’s parts need to use themIf left eye is left 30 and down 50 from the center of the head:

ellipse( zoogX – 30, zoogY + 50, 20, 30);

2) Change his eye color randomly as he movesNeed variables for Zoog’s eye color (R,G and B)


Lab06: Moving Zoog

Use variables and random() to make a Zoog move from upper left to lower right of the screen.

Starting point is provided (Example 4.8)Plan!

Declare variables

Use variables

Use Random



Summary

Variables have names and typesThere are rules and best practices for naming variables

You must declare your variablesDetermines the ‘type’, size of storage, and maximum values

You can initialize variables in different waysVariables have many uses to programmersprocessing provides ‘system’ (built-in) variablesYou can use random numbers to make your program run differently every time

Documents

Lesson Two: Everything You Need to Know Chapter 4: Variables Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from text