Introduction To Computational Media (ICM) : Week 2

Basic Programming Tools

Variables

Variables are containers for data. Essentially a variable is something that can hold a value and that value can be changed (They can vary).

Data Types:
Variables in Processing (and other strictly typed languages) must be defined or declared with their type.

The different (primitive) types that Processing/Java support are as follows:

int - An integer. Whole numbers only. int someint = 5;

boolean - True or False. Often the result of an expression. boolean somebool = true;

float - A number with a decimal point. 1.5, 3.987 and so on. float somefloat = 99.76;

byte - An 8 bit value. Ranges from -127 to 128 in value. byte mybyte = -90;

char - A single character. char mychar = 'A';

Declaration:
Variables must be declared with their type as shown (in the examples above as well as) here:

int myinteger;
float yourfloat;
boolean mybool;

Assignement:
Once they are declared, you are free to assign values to them and subsequently use them in operations:

myinteger = 5;
myinteger = 5 + 5;
myinteger = myinteger - 5;
yourfloat = 5.5;

Of course, as shown in the examples above, you can take a shortcut and do both declaration and assignement in one step:

int someint = 89;

Printing Text Output

print() and println():
These built-in functions allow you to print text to the portion of the window below the Processing code portion. They are perfect commands for debugging and learning the value of a variable. Use them like you would use comments.

print(mybyte);
Prints out the value of mybyte.

print(somefloat);
Prints out the value of somefloat followed by a line break

print("The value of somefloat is: " + somefloat);
Concatinates the string specified in "" with the value of somefloat

Processing Constructs

Processing provides two empty functions that you may define in order to accomplish special things in your program.

Setup()
The setup function is run once, at the beginning of the execution of any processing applet. It is typically used to set things like background, size and other static items.

void setup() { // YOUR CODE IS RUN ONCE }

Draw()
The draw function is executed in a loop. It is run continuously throughout the execution of the processing applet.

void draw() { // YOUR CODE IS RUN OVER AND OVER AGAIN }

Here is a common use of setup():

        int myint = 0;  // Notice this is outside of setup(), see the entry regarding variable scope below
        
        void setup()
        {
            size(500,500);
            background(255,255,255);
            framerate(15);  // Defines how many times per second draw() will run
            fill(255,0,0);
            stroke(0,0,0);
            strokeWidth(10);
        }

Here is a simple draw() which includes some variable usage (see the int myint = 0 line above):

        void draw()
        {
            rect(myint,myint,50,50);  
            myint = myint + 1;
        }

If we copy these lines of code into Processing we will see a rectangle move from the top left of the screen down to the bottom right. The obvious analogy here is that of animation. The setup function sets up our window and the draw function runs every 15 seconds and gives us the appearance of movement.

Variable Scope

You may have noticed the integer is declared outside of the setup() function we wrote above. This is due to something called variable scope. The concept is that variables are only accessible to the block of code they are defined in.

For instance, if we declared a variable in the setup function, we would not be able to access that variable in the draw function.

Blocks of code are defined by "{" and "}". Any code that is within the brackets is considered in the same block. Therefore, setup and draw have their own blocks of code.

A code block:

        {
            // Some code
            // Some more code
        }

If you declare a variable outside of a block of code, in the main processing code section it is a global variable. If you declare it inside of a block of code, it is a local variable. Local to that block.

A global and a local variable:

        int myint = 90;  // Global
        
        void setup()
        {
            int myotherint = 100; // Local to the setup function
            
        }

More Built-in Variables

mouseX and mouseY:
Define where the mouse is in relation to the applet window.
Follow the cursor around:

        void setup()
        {
            size(500,500);
            fill(255,0,0);
            framerate(10);
        }
        
        void draw()
        {
            rect(mouseX,mouseY,50,50);        
        }

width and height:
Contain the width and height of the applet window. They are only set after size() is called.

        void setup()
        {
            size(400,200);
            println("The width is: " + width);
            println("The height is: " + height);
        }

Indentataion:

Notice above how I indent code that is within the blocks. This is purely for readability and understanding. Do it, you will thank me later.

Operators:

Assignment:
=

Mathematical Operators:
+, -, /, * (addition, subtraction, division and multiplication)

Example:

        int anumber = 0;
        anumber = anumber + 1;
        println("anumber = " + anumber);
        anumber = anumber + anumber;
        println("anumber = " + anumber);
        anumber = anumber/2;
        println("anumber = " + anumber);
        anumber = 7 * 8;
        println("anumber = " + anumber);
        
        anumber++;  // Short-cut for adding one, called "increment"
        println("anumber = " + anumber);
        anumber--; // Short-cut for subtracting one, called "decrement"
        println("anumber = " + anumber);

Relational Operators:
>= (greater than or equal to)
<= (less than or equal to)
== (equality)
!= (inequality)

Logical Operators: Sometime called boolean logic
|| (logical OR)
&& (logical AND)
! (logical NOT)

Truth tables:

Or	True	False
True	true	true
False	true	false

And	True	False
True	true	false
False	false	false

Conditionals

Execute a block of code based on the result of an expresssion that utilizes relational or logical (boolean) operators

If Statement:

            int anint = 1;
            if (anint >= 0)
            {
                // Execute some code
            }

If Else Statement:

            int anint = 1;
            if (anint >= 0)
            {
                // Excute some code
            } 
            else
            {
                // Execute some other code
            }

If, Else If, Else:

            int anint = 1;
            if (anint >= 0)
            {
                // Execute some code
            }
            else if (anint < -1)
            {
                // Execute some other code
            }
            else
            {
                // Execute this code if none of the other conditions are true
            }

You can use the boolean operations to use boolean logic on multiple expressions.

            int anint = 1;
            int anotherint = 2;
            if (anint > 0 && anotherint <= 2)
            {
                // Execute some code
            }

Loops

While:
Just as with our conditional (if / else) statements a while loop employs boolean test that must evaluate to true in order for the instructions enclosed in the curly brackets to be executed. The difference is that the instructions continue to be executed until the test condition becomes false.

            int x = 0;
            while (x < 10) 
            {
                println("x is less than 10.");
                x++;
            }

Consider doing a striped background. You could do the following:

	
	void setup()
	{
	  size(400,400);
	  background(128);
	  stroke(255,0,0);
	  strokeWeight(5);
	}
	
	void draw()
	{
	 line(0,0,0,height);
	 line(20,0,20,height);
	 line(40,0,40,height);
	 // and so on..
	 
	 // or you could use a variable:
	 int x = 60;
	 line(x,0,x,height);
	 x = x + 20;
	 line(x,0,x,height);
	}

but that would get very tedious.

With a "while" loop we could do it much more quickly and easily:

	void setup()
	{
	  size(400,400);
	  background(128);
	  stroke(255,0,0);
	  strokeWeight(5);
	}

	void draw()
	{
	 int x = 0;
	 while (x <= width)
	 {
	   line(x,0,x,height);
	   x = x + 20;
	 }
	}

For Loop
Since this is a common use of a loop (creating a variable, checking it's value and incrementing by a certain amount) there exists an even quicker way to do the above, all in one step.

          for (int x = 0; x <= width; x = x + 20)
          {
             line(x,0,x,height);
          }

You can read this as, create variable x and set it to 0, while x is less than or equal to the width, do the following. Increment x by 20 at the end.
Exactly what we are doing in the while loop but in one quick step.

Examples for this week: