Another way to manipulate the program flow is using conditional statements. In conditional statements you specify that if a certain condition is met then a certain part of code is executed and otherwise the compiler skips that part of the code.

if ( Logical Expression){

// this is where you put the code that you want to execute if the first condition is met}

else if ( Logical Expression){

// this is where you put the code that you want to execute if the second condition is met

}else{

// this is where you put the code that you want to execute if the second condition is met

}

Program Flow-Conditional Statements

Conditional Structures- Relational Expressions

A relational expression is made up of two values that are compared with a relational operator:

Expression Evaluation3>5 False5>3 True5=3 False

A relational expression evaluates to True or False> Greater Than

< Less than

>= Greater than or equal to

<= Less than or equal

== Equivalent to

!= Not Equivalent

Logical OperatorsLogical operators are used to combine two or more relational expressions or to invert logical values.

The following table outlines all possible combinations and the results.

Operator Meaning Explanations

&& And The logical AND operator allows the entire relational statement to be true only if both parts are true.

|| Or The logical OR operator makes the relational expression true if only one part is true.

! Not The logical NOT operator inverts the logical value of the associated boolean variables. It changes true to false, and false to true.

Expression Evaluation

True && True True

True && False False

False && False False

True || True True

True || False True

False||False False

!True False

!False True

Another way to manipulate the program flow is using conditional statements. In conditional statements you specify that if a certain condition is met then a certain part of code is executed and otherwise the compiler skips that part of the code.

void setup(){ size(300,50); background(255);}

void draw(){ background(255); println(mouseX); if (mouseX<100){ fill(255,0,0); }else if (mouseX>200){ fill(0,0,255); }else{ fill(0,255,0); } rect(mouseX,5,40,40);}

Program Flow-Conditional Statements

You can use a combination of multiple conditions in a if statement:

AND: if (mouseX<50 && mouseY>30)

OR: if (mouseX<50 || mouseY>30)

NOT: if ( !(mouseX<50))

Checking Equality: if (mouseX==50)

Program Flow-Multi Conditional Statements

You can have one condition in another condition:

if(Conditional Expression){

if(Conditional Expression){// The code in case that the outer condition and the inner condition are both met}

}

Program Flow-Nested Conditional Statements

You can have one condition in another condition:

void setup(){ size(100,100); background(255);}

void draw(){ background(255); println(mouseX); if (mouseX<50){ fill(255,0,0); if (mouseY<50){ strokeWeight(5); }else{ strokeWeight(1); } } else { fill(255); strokeWeight(1); } rect(mouseX,mouseY,10,10);}

Program Flow-Nested Conditional Statements

Another way to manipulate the program flow is using loops. In a loop structure you specify a number of times that you want a block of code to be executed.

for( initiate a variable for counter; check counter value; change counter value after each loop){

//Here you put the block of code that you want to repeat

}

for( int i=0; i<100; i++){//Here you put the block of code that you want to repeat}

Program Flow-For Loop

Another way to manipulate the program flow is using loops. In a loop structure you specify a number of times that you want a block of code to be executed.

void setup(){ size(100,100); background(255);}

void draw(){ //background(255); //Using Background in an iterative loop gives the impression of animationfor( int i=0; i<10; i++){rect(i*10,10,5,5);}}

Program Flow-For Loop

Repetition1. Computers are excellent at executing repetitive tasks accurately and quickly.2. Iterative structures are used to compact lengthy lines of repetitive code. 3. The for structure performs repetitive calculations and is structured like this:

for (init; test; update) { statements

}3. The parentheses associated with the structure enclose three statements: init, test. And

update. 4. The statements inside the block are run continuously while the test evaluates to true.5. The in it portion assigns the initial value of the variable used in the test. 6. The update is used to modify the variable after each iteration through the block. 7. A for structure runs in the following sequence:

1. The init statement is run 2. The test is evaluated to true or false 3. If the test is true, continue to step 4. If the test is false, jump to step 6 4. Run the statements within the block 5. Run the update statement and jump to step 2 6. Exit the structure and continue running the program

for(int i=0; i<50; i++){ line(i*2,10,i*2,90);}

for(int i=0; i<100; i=i+2){line(i,i,i,50);}

for(int i=0; i<100; i=i+2){line(i,10,random(100),90);}

for(int i=100; i>0; i=i-2){rect(0,0,i,i);}

for(int i=0; i<100; i=i+5){rect(i,0,3,99);}

for(int i=0; i<700; i=i+2){line(i,50,i,sin(radians(i*3))*30+50);}

for(int i=70; i>0; i=i-4){ellipse(50,50,i,i);}

for(int i=70; i>0; i=i-4){ellipse(i,50,i,i);}

x++; //Equivalent to x = x + 1y--; //Equivalent to y=y-1z+=5; //Equivalent to z=z+5w-=5; //Equivalent to w=w-5u*=2; //Equivalent to u=u*2v/=3; // Equivalent to v=v/3

Mathematical Operations-Shortcuts

Another way to manipulate the program flow is using loops. In a loop structure you specify a number of times that you want a block of code to be executed.

void setup(){ size(100,100); background(255);}

void draw(){ background(255); for( int i=0; i<10; i++){ for( int j=0; j<10; j++){ rect(i*10,j*10,5,5); } }}

Program Flow-For Loop-Nested Loops

Another way to manipulate the program flow is using loops. In a loop structure you specify a number of times that you want a block of code to be executed.

void setup(){ size(100,100); background(255);}

void draw(){ background(255); for( int i=0; i<10; i++){ for( int j=0; j<10; j++){ print(i*10+ ","+ j*10 + " - "); } println(); }}

Program Flow-For Loop-Nested Loops

Sometimes you want to get out of a loop before the number of times that a loop is supposed to repeat itself if a certain condition is met

for( int i=0; i<10; i++){

if( Conditional expression){break;}

}

Program Flow-For Loop-Breaking a Loop

Sometimes you want to get out of a loop before the number of times that a loop is supposed to repeat itself if a certain condition is met

void setup(){ size(100,100); background(255);}

void draw(){ background(255); for(int i=0; i<10; i++){ if ( i*10>mouseX ){ break; } rect(i*10,10,10,10); }}

Program Flow-For Loop-Breaking a Loop

Sometimes you want to skip the action of a loop if a certain condition is met but still continue the loop after that for the specified times in the loop structure

void setup(){ size(100,100); background(255);}

void draw(){ background(255); for(int i=0; i<10; i++){ if ( i*10>mouseX ){ break; } if ( i*10==30 ){ continue; } rect(i*10,10,10,10); }}

Program Flow-For Loop-Skipping a Loop

Sometimes a condition can have different alternatives and you want to react to each case differently. In this situation you can use a switch/case structure:

switch(expression) {

case label: statements

case label: statements

default: statements }

* the label can be an integer or a character

Program Flow-Switch/Case-Multiple conditions

Sometimes a condition can have different alternatives and you want to react to each case differently. In this situation you can use a switch/case structure:

void setup(){ size(500,100); background(255);}

void draw(){ int mouseInput=mouseX/100; println(mouseInput);switch (mouseInput){case 0:fill(50); break;case 1:fill(100); break;case 2:fill(150); break;case 3:fill(200); break;default:fill(250); break; }rect(mouseX,mouseY,20,20);}

Program Flow-Switch/Case-Multiple conditions

Methods are groups of code that perform a specific operation.

A method has a name that is used to call the method-initiate the operations with in the method through out the program flow.

A method can have parameters that are passed to it and will effect the operations of the method

void drawPointer(int x, int y){

// The method commands come here}

Processing-Methods

Method Name

Parameter Data Type

Parameter Name

Methods are groups of code that perform a specific operation.

A method has a name that is used to call the method-initiate the operations with in the method through out the program flow.

A method can have parameters that are passed to it and will effect the operations of the method

void setup(){ size(200,200); ellipseMode(CENTER); rectMode(CENTER);}void draw(){ background(200,200); drawPointer(mouseX,mouseY);}void drawPointer(int x, int y){ ellipse(x,y,3,3); rect(x-20,y-20,15,15); rect(x+20,y-20,15,15); rect(x-20,y+20,15,15); rect(x+20,y+20,15,15);}

Processing-Methods

Methods help us save time and energy by simplifying the program flow

Processing-Methods

size(500,500);int x = 10;int y = 10;for(int i=0; i<15; i++)rect(x+(i*10),y,10,50);x = 100;y = 200;for(int i=0; i<13; i++)rect(x+(i*10),y,10,50);x = 300;y = 200;for(int i=0; i<10; i++)rect(x+(i*10),y,10,50);

void setup(){size(500,500);stairs(10,10,15);stairs(100,200,13);stairs(300,200,10 );}

void stairs(int x, int y, int nsteps){for(int i=0; i<nsteps; i++)rect(x+(i*10),y,10,50);}

A function is a method that returns a value in addition to performing a set of operations.

int volume (int l, int w , int h){ int v=l*w*h; return v; }

Processing-Functions

Method Name

Parameter Data Type

Parameter Name

Function Return Value Data type

A function is a method that returns a value in addition to performing a set of operations.

void setup(){int boxLength=10;int boxWidth=30;int boxHieght=25;int boxVolume=volume(boxLength,boxWidth,boxHieght);println(boxVolume);}

int volume(int l,int w ,int h){ int v=l*w*h; return v;}

Processing-Functions

The scope of a variable is the extent to which the variable is recognizable by the compiler within the program flow.

A variable that is initiated inside a block- with in {} – is not recognizable for the block out

void setup(){int boxLength=10;int boxWidth=30;int boxHieght=25;int boxVolume=volume(boxLength,boxWidth,boxHieght);println(boxVolume);}

int volume(int l,int w ,int h){ int v=l*w*h; return v;}

Processing-Variable Scopes

Data ManipulationWhen working with mathematical operators and variables, it’s important to be aware of

the data types :1. The combination of two integers will

always result in an int.2. The combination of two floating-point

numbers will always result in a float.3. The combination of an integer and a float

will always result in a float.

println(4/3); // Prints "1" println(3/4); // Prints "0" println(4.0/3); // Prints "1.3333334" println(4/3.0); // Prints "1.3333334" println(4.0/3.0); // Prints "1.3333334" float a= 4/3; //Assigns 1. to aprintln(a);

Numerical Types:…………………………………..

int

float

Non-Numerical Types:…………………………..boolean

char

String

Data_Type Variable_Name = Value;

int peopleCount = 12;

float userName =“Nashid”;

…,-5,-4,-3,-2,-1,0,1,2,3,4,5

14.5, 1.0, -5.15, -700.0

true, false

‘a’, ‘F’, ‘%’

“Nashid”, “Hello World”

Data Manipulation

int float

Boolean

char

String

b = int(a);

Data Manipulation-Data Type Conversion

float int

Boolean

String

b = float(a);

Data Manipulation-Data Type Conversion

Boolean float

int

b = boolean(a);

Data Manipulation-Data Type Conversion

char int

b = char(a);

Data Manipulation-Data Type Conversion

String int

float

Boolean

b = str(a);

Data Manipulation-Data Type Conversion

int a = 7; float b = 14.3; String c = "Nashid"; char d = 'N'; boolean e= false;float aa= float(a);int bb=int(b);String cc=str(a)+ "000" +str(b);int dd = int(d);float ddd=float(cc)*10;int ee = int(e);boolean eee= boolean(a);println(aa);println(bb);println(cc);println(dd);println(ddd);println(ee);println(eee);

Data Manipulation-Data Type Conversion

Data Manipulation-Data Type Conversion-Functions-formatting numbers into strings:

nf(intValue, digits) nf(floatValue, left, right)

light_Intensity = 1;sensor_Code = 10;light_Intensity_to_Str = nf(light_Intensity,5);sensor_Code_to_Str = nf(sensor_Code,5);sensor_Code_Light_Intensity=light_Intensity_to_Str+sensor_Code_to_Str;println("Light Intensity= " + light_Intensity_to_Str);println("Sensor Code= " + sensor_Code_to_Str);println("Light Intensity + Sensor Code= " + sensor_Code_Light_Intensity);

Data Manipulation-Data Type Conversion-Functions-formatting numbers into strings:

nf(intValue, digits) nf(floatValue, left, right)

float light_Intensity = 125.4;int sensor_Code = 1;String light_Intensity_to_Str = nf(light_Intensity,4,5);String sensor_Code_to_Str = nf(sensor_Code,5);String sensor_Code_Light_Intensity=light_Intensity_to_Str+sensor_Code_to_Str;println("Light Intensity= " + light_Intensity_to_Str);println("Sensor Code= " + sensor_Code_to_Str);println("Light Intensity + Sensor Code= " + sensor_Code_Light_Intensity);

N a s h i d N a b i a n

0 1 2 3 4 5 6 7 8 9 10 11 12

Data Manipulation-String Data Type

charAt() Returns the character at the specified index

equals() Compares a string to a specified object

indexOf() Returns the index value of the first occurance of a character within the input string

length() Returns the number of characters in the input string

substring() Returns a new string that is part of the input string

toLowerCase() Converts all the characters to lower case

toUpperCase() Converts all the characters to upper case

Data Manipulation-String Data Type

String a="Room 004 Floor 05 PeopleCount 010";String b;char c;int d;//Room 004 Floor 05 PeopleCount 010//012345678911111111112222222222333// 01234567890123456789012//charAt() Returns the character at the specified indexc=a.charAt(7);println("character @ 8th Location="+c);//indexOf() Returns the index value of the first occurance of a character within the input stringd=a.indexOf("Room");println("Index of Occurance="+d);//length() Returns the number of characters in the input string //substring() Returns a new string that is part of the input string b=a.substring(5,8);println("Room="+b);b=a.substring(15,17);println("Floor="+b);b=a.substring(a.length()-3);println("People Count="+b);//toLowerCase() Converts all the characters to lower case b=a.toLowerCase();println("All Lower Case="+b);//toUpperCase() Converts all the characters to upper caseb=a.toUpperCase();println("All Upper Case="+b);

Data Manipulation-String Data Type

An array is an ordered list of data.

It is possible to have an array of any type of data: integer, float, sting, etc.

We define an array using [ ] symbol

String[] day = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"};

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Data Manipulation-Array Data Structure

Array Index starts at 0 so the first element has the index of 0 and the second has the index of 1 and so on

String[] day = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"}; println(day[3]);//printlines the forth element of the array which is thursday

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Arrays - Accessing Array Elements

dataType[] arrayName = new dataType[numberofElements];

String [] days = new String [7];

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Array – Initiating an Array

day[0]=“Sunday”

or

day = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"};

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Array - Assigning value to Array Elements

Returns the size of the array or the number of array elements as an integer number

String[] day = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"};

println(day.length());// prints the size of the array which is seven in this case

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Array - length

String[] day = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"};for(int i=0; i<day.length-1;i++){ println(day[i]);}

day[0] Saturday

day[1] Sunday

day[2] Monday

day[3] Tuesday

day[4] Wednesday

day[5] Thursday

day[6] Friday

Array-Iterating between the members of an array in a for loop

Return a subset of the array that starts at the startIndex and has as many elements as the specified size

String[] days = {"Monday" , "Tuesday" , "Wednesday" , "Thursday" , "Friday" , "Saturday" , "Sunday"};

String[] workingDays=subset(days,0,5);for(int i=0; i<workingDays.length;i++){ println("working day = " + workingDays[i]);}

String[] weekend=subset(days,5,2);for(int i=0; i<weekend.length;i++){ println("Weekend = " + weekend[i]);}

Array-subset(arrayName,startElement,Size)

int [] c = new int[10];for(int i=0; i<10; i++){c[i] = i * 2;print(c[i]+" ");}//0 2 4 6 8 10 12 14 16 18

Array -1D and 2D arrays

int [][] c = new int[5][10];for(int x=0; x<5; x++){for(int y=0; y<10; y++){c[x][y] = x*y;print(c[x][y] + " " );}print("\n");}/*0 0 0 0 0 0 0 0 0 00 1 2 3 4 5 6 7 8 90 2 4 6 8 10 12 14 16 180 3 6 9 12 15 18 21 24 270 4 8 12 16 20 24 28 32 36*/

Array -1D and 2D arrays

int [][] c = new int[5][10];for(int x=0; x<5; x++){for(int y=0; y<10; y++){c[x][y] = x*y;print(c[x][y] + " " );}print("\n");}/*0 0 0 0 0 0 0 0 0 00 1 2 3 4 5 6 7 8 90 2 4 6 8 10 12 14 16 180 3 6 9 12 15 18 21 24 270 4 8 12 16 20 24 28 32 36*/

Array -1D and 2D arrays

int [][] c = new int[5][10];for(int x=0; x<5; x++){for(int y=0; y<10; y++){c[x][y] = x*y;print(nf(c[x][y],2) + " " );}print("\n");}

/*00 00 00 00 00 00 00 00 00 0000 01 02 03 04 05 06 07 08 0900 02 04 06 08 10 12 14 16 1800 03 06 09 12 15 18 21 24 2700 04 08 12 16 20 24 28 32 36*/

Array -1D and 2D arrays

int [] peopleCount={200,100,245,65,54,10,4};String [] weekDay=new String[7];weekDay[0]="Saturday";weekDay[1]="Sunday";weekDay[2]="Monday";weekDay[3]="Tuesday";weekDay[4]="Wednesday";weekDay[5]="Thursday";weekDay[6]="Friday";for(int i=0; i<7; i++){println("on " +weekDay[i]+" We will have "+ peopleCount[i]+" visitors");}

Data Manipulation-Connecting two arrays through index

Data Manipulation-Array Data Structure

Data Manipulation-concat()

Makes an array as the result of the addition of two innitial arrays. It is used in agglomaration of datasets that are the same type into one dataset

int [] time1={1,2,3,4,5,6,7};int [] time2={8,9,10,11,12};int [] lightIntensity1={0,23,35,40,43,45,50};int [] lightIntensity2={64,70,83,90,105};

int [] timeAll=concat(time1,time2);int [] lightIntensityAll=concat(lightIntensity1,lightIntensity2);for(int i=0;i<lightIntensityAll.length-1;i++){ println("Time= "+timeAll[i]+"....."+"Light Intensity= "+lightIntensityAll[i]);}

Data Manipulation-expand()increases the size of the array. By default it doubles the size of the array unless the new size is specified as the second parameter of the function. This function is useful incases that the system is storing realtime data in an array and at the time of writing the code we do not know how many elements will be stored. Instead of assigning a huge size to the array at the time of initiation. we write the code so that the array adjusts its size on demand during the running time and on the fly.int pointCount;int[] xPositions=new int[200];int[] yPositions=new int[200];boolean redrawPoints=false;void setup(){ size(300,300); background(255);}void draw(){ xPositions[pointCount]=mouseX; yPositions[pointCount]=mouseY; point(mouseX,mouseY); if (pointCount==xPositions.length-1){

xPositions=(int[ ]) expand(xPositions,xPositions.length+100);//adds 100 elements to the array yPositions=(int[ ]) expand(yPositions,yPositions.length+100);//adds 100 elements to the array } pointCount=pointCount+1; if(redrawPoints==true){ if(pointCount<xPositions.length-1){ point(xPositions[pointCount],yPositions[pointCount]); pointCount=pointCount+1; }else{ exit(); } }}void keyPressed(){ background(255); redrawPoints=true; pointCount=0;}

Data Manipulation-Array Data Structure

a+b

a-b

a*b

a/bif a and b are integer the result of the division will be an integer

a%bReturns the remainder of the division of a by b

This operation is used to modulate an increasing or decreasing valuea 0 1 2 3 4 5 6 7 8 9

a%4 0 1 2 3 0 1 2 3 0 1

a 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14

a/4 0 0 0 0 1 1 1 1 2 2 2 2 3 3 3

Data Manipulation-Manipulating Numeric Data

Making a two dimentional matrix from one dimensionally distributed ( increasing or decreasing data):

0 1 2 3 4

5 6 7 8 9

10 11 12 13 14

15 16 17 18 19

0 1 2 3 4

0

1

2

3

Shape Index = 16

x Coordinate = 1 = index%5

y Coordinate= 3 = index/5

x Coordinate = index%5

y Co

ordi

nate

= in

dex/

5Data Manipulation-Manipulating Numeric Data

for(int i=0; i<20; i++){int x = i/2; // it always gives you an integer print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9

for(int i=0; i<20; i++){int x = i/3;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 0 0 1 1 1 2 2 2 3 3 3 4 4 4 5 5 5 6 6

for(int i=0; i<20; i++){int x = i/4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 0 0 0 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4

Regulating by X : To regulate an increasing/decreasing factor by X you should divide it by X while X is an integer so the result of the division will be an integer to.

for(int i=0; i<20; i++){int x = (i+1)/2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10

for(int i=0; i<20; i++){int x = (i+2)/2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 10

for(int i=0; i<20; i++){int x = i/4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 0 0 0 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4

Regulating by X, Moving along the Regulation by Y : To regulate an increasing/decreasing factor by X you should divide it by X while X is an integer so the result of the division will be an integer to. To move along the regulation by Y you should add y to the regulated factor before dividing it by X

for(int i=0; i<20; i++){int x = i%2;// gives you an integer which is the remainder of the division of i by 2 (0 or 1)print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1

for(int i=0; i<20; i++){int x = i%3;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 1 2 0 1 2 0 1 2 0 1 2 0 1 2 0 1 2 0 1

for(int i=0; i<20; i++){int x = i%4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3

Restricting by X: To restrict an increasing/decreasing factor by X you should modulate it by X while X is an integer so the result of the modulation will be an integer between 0 and X-1

for(int i=0; i<20; i++){int x = (i+1)%4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0

for(int i=0; i<20; i++){int x = (i+2)%4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0 1

Restricting by X, moving along the restriction by Y: To restrict an increasing/decreasing factor by X you should modulate it by X while X is an integer so the result of the modulation will be an integer between 0 and X-1. To move along the restriction by Y, you should add Y to the restricted factor(i) before modulating it by X

for(int i=0; i<20; i++){int x = (i/2)%2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 // i/2//0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 //%2

for(int i=0; i<20; i++){int x = (i/3)%2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 0 0 1 1 1 2 2 2 3 3 3 4 4 4 5 5 5 6 6 // i/3 //0 0 0 1 1 1 0 0 0 1 1 1 0 0 0 1 1 1 0 0 // %2

First, Regulating by X, then Restricting by Y:

for(int i=0; i<20; i++){int x = (i/4)%2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 0 0 0 1 1 1 1 2 2 2 2 3 3 3 3 4 4 4 4//0 0 0 0 1 1 1 1 0 0 0 0 1 1 1 1 0 0 0 0

for(int i=0; i<20; i++){int x = (i/2)%4;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 // i/2//0 0 1 1 2 2 3 3 0 0 1 1 2 2 3 3 0 0 1 1 //%4

First, Regulating by X, then Restricting by Y:

for(int i=0; i<20; i++){int x = (i%4)/2;print(x);};//0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19//0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 0 1 2 3 // i%4//0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1 0 0 1 1// /2

First, Restricting by X, then Regulating by Y:

for(int i=0; i<20; i++){int y = i%2;point(i*10, 50+y*10);};

beginShape();noFill();for(int i=0; i<20; i++){int y = i%2;vertex(i*10, 50+y*10);};endShape();

for(int i=0; i<25; i++){rect((i % 5) * 20,(i / 5) * 20, 10, 10);}//i = 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...// X= 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 ...// Y= 0 0 0 0 0 1 1 1 1 1 2 2 2 2 2 3 3 3 3 3 4 ...

Incremental Difference-mapping numbers1. How can you go from number 65 to number 203 in 100 Step?

65 203

0 100 1. Find the difference between the two extreme :

Difference =Starting Point – End Point = 100-0=100Difference =Starting Point – End Point =203-65=1382. Divide to the number of steps to find the magnitude of change in each step:Magnitude of Step: ( Starting Point – End Point)/Number of Steps =

(203-65)/(100-0)=1.383. The amount that is added at each step is :Differential that is added at step i:

i* Magnitude of Step =i* (( Starting Point – End Point)/Number of Steps)=i*1.384. The resulted value at step i : Starting Point + i*Magntude of Step =

Starting Point + i* (( Starting Point – End Point)/Number of Steps)=203 + (i*1.38)

Incremental Difference-mapping numbers

350 input=550 Light 800

45 Output=105 Degree 180

output Difference =Starting Point – End Point = 180-45=135input Difference =Starting Point – End Point =800-350=4502. Divide to the number of steps to find the magnitude of change in each step:Magnitude of Step: input( Starting Point – End Point)/ output( Starting Point – End Point)/ =

(180-45)/(800-350)=135/450=0.33. The amount that is added at each step is :Differential that is added :

(input Current Amount-input Min Amount)* Magnitude of Step =(550-350)*0.34. The resulted value at step i : Output Starting Point + Differential that is added = 45+(200*0.3)=45+60=105

Incremental Difference-mapping numbers

350 input=550 Light 800

45 Output=105 Degree 180 float Output=(Input, Min Input , Max input , Min Output , Max Output);

float Output=(550,350,800,45,180);

min() Syntax

min(value1, value2) min(value1, value2, value 3)

min(array)

int d = min(5, 9); // Sets "d" to 5

int e = min(-4, -12); // Sets "e" to -12

float f = min(12.3, 230.24); // Sets "f" to 12.3

int[] list = { 5, 1, 2, -3 };

int h = min(list);

// Sets "h" to -3

Manipulating Numeric Data-Functions

Manipulating Numeric Data-Functions

Processing-Input

Processing input

Mouse

Keyboard

Time

image

Video

Audio

Data from File

Wii controller

Kinect 3D camera

Input from Arduino-Sensed Data

Processing-Output

Processing output

Interactive Screen

Audio

Video

Image-Graphics

TextSave to File

Output to physical space via arduino

Processing-Mouse Input-Location

mouseXmouseY

Processing-Mouse Input-Location

mouseXmouseY

void setup(){}void draw(){ int x=mouseX; int y=mouseY; println("X Coordinate of Mouse Position = "+x); println("Y Coordinate of Mouse Position = "+y);}

Processing-Mouse Input-Location

mouseXmouseY

void setup(){}void draw(){ int x=mouseX; int y=mouseY; ellipse(x,y,20,20);}

Processing-Mouse Input-Location

mouseXmouseY

void setup(){}void draw(){ int x=mouseX; int y=mouseY; ellipse(x,y,20,20);}

Processing-Mouse Input-Mouse Click

void mouseClicked(){}

void setup(){}void draw(){}

void mouseClicked(){ println("Clicked At: "+ mouseX+" , "+mouseY);}

Processing-Mouse Input-Mouse Click

void mouseClicked(){}

void setup(){}void draw(){}

void mouseClicked(){ if(mouseX>50) ellipse(mouseX,mouseY,20,20); if(mouseX<50) rect(mouseX,mouseY,20,20);}

Processing-Mouse Input-Mouse Click

void mouseClicked(){}

void setup(){}void draw(){}

void mouseClicked(){ ellipse(mouseX,mouseY,20,20);}

Processing-Mouse Input-Mouse Click

void mouseClicked(){}

void setup(){}void draw(){}

void mouseClicked(){ background(255,255,255); if(mouseX>50) ellipse(mouseX,mouseY,20,20); if(mouseX<50) rect(mouseX,mouseY,20,20);}

Processing-Mouse Input-Mouse Drag

void mouseDragged(){}void setup(){ background(255,255,255);}void draw(){}

void mouseDragged(){ background(255,255,255); if(mouseX>50) fill(255); if(mouseX<50) fill(0); ellipse(mouseX,mouseY,20,20);}

void draw(){}void mousePressed(){rect(mouseX,mouseY, 10,10);}

void draw(){}void mouseDragged(){rect(mouseX,mouseY, 10,10);}

Processing-Mouse Input

Processing-Keyboard Input

void keyPressed(){}int value = 0; draw() { fill(value); rect(25, 25, 50, 50);}void keyPressed() { if(key == '0') { value = 255; } else { value = 0; }}

Processing-Keyboard Input

Processing-Time Input-Absolute Time

hour() minute() second()year() month() day()

void setup(){}void draw() { int Year=year(); int Month=month(); int Day=day(); int Hour=hour(); int Minute=minute(); int Second=second(); println("Absolute Time : "+ Year + "/" + Month + "/" + Day + "," + Hour + ":" + Minute + ":" + Second);}

Processing-Time Input-Relative Timehour() minute() second() year() month() day()

int Year_Origin=year();int Month_Origin=month();int Day_Origin=day();int Hour_Origin=hour();int Minute_Origin=minute();int Second_Origin=second();void setup(){}void draw() { int Year=year()-Year_Origin; int Month=month()-Month_Origin; int Day=day()-Day_Origin; int Hour=hour()-Hour_Origin; int Minute=minute()-Minute_Origin; int Second=second()-Second_Origin; println("This Program has been Running for : "+ Year + " years and " + Month + " months and " + Day + " days and " + Hour + " hours and " + Minute + " minutes and " + Second + " seconds.");}

Processing-Time Input-Timebase OperationAnimation

int Hour_Origin=hour();int Minute_Origin=minute();int Second_Origin=second();void setup(){ background(255);}void draw() { int Hour=hour()-Hour_Origin; int Minute=minute()-Minute_Origin; int Second=second()-Second_Origin; int RunTime=Hour*60*60+Minute*60+Second; if(RunTime%4>1)//2,3 fill(255); if(RunTime%4<=1)//0,1 fill(0); rect(50,50,25,25);}

Processing-Time Input-Timebase OperationInteraction

int Hour_Origin=hour();int Minute_Origin=minute();int Second_Origin=second();int r=5;void setup(){ size(300,300); background(255); fill(255,0,0,0);}void draw() { background(255); if(mousePressed){ int Hour=hour()-Hour_Origin; int Minute=minute()-Minute_Origin; int Second=second()-Second_Origin; int RunTime=Hour*60*60*1000+Minute*60*1000+Second*1000; fill(255,0,0,RunTime/25); r=r+1; println(r); ellipse(width/2,height/2,r,r); } else{ r=5; fill(255,0,0,0); ellipse(width/2,height/2,r,r); }}void mousePressed(){ Hour_Origin=hour(); Minute_Origin=minute(); Second_Origin=second();}

Processing-Time Input-Timebase OperationInteraction

int Second_Origin=second();int r=5;int Sum=0;int LU,LB,RU,RB=0;void setup(){ size(302,302); stroke(0); strokeWeight(5); fill(255,255,255); rect(1,1,150,150); rect(151,1,150,150); rect(1,151,150,150); rect(151,151,150,150);}void draw() { int RunTime=second()-Second_Origin; if ((Sum<4)&&(RunTime>2)) { println("You Lost"); println(); println(); println(); Second_Origin=second(); fill(255,255,255); rect(1,1,150,150); rect(151,1,150,150); rect(1,151,150,150); rect(151,151,150,150); Sum=0; LU=0; RU=0; LB=0; RB=0; } if ((Sum==4)&&(RunTime<2000)) { println("You Win"); println(); println(); println(); Second_Origin=second(); fill(255,255,255); rect(1,1,150,150); rect(151,1,150,150); rect(1,151,150,150); rect(151,151,150,150); Sum=0; LU=0; RU=0; LB=0; RB=0; }}void mouseClicked(){ if ((mouseX<150)&&(mouseY<150)&&(LU==0)) { LU=1; fill(255,0,0); rect(1,1,150,150); Sum=Sum+1; } if ((mouseX>150)&&(mouseY<150)&&(RU==0)) { RU=1; fill(255,0,0); rect(151,1,150,150); Sum=Sum+1; } if ((mouseX<150)&&(mouseY>150)&&(LB==0)) { LB=1; fill(255,0,0); rect(1,151,150,150); Sum=Sum+1; } if ((mouseX>150)&&(mouseY>150)&&(RB==0)) { RB=1; fill(255,0,0); rect(151,151,150,150); Sum=Sum+1; }}

Processing-Time Input-RunTimemillis()

void draw(){ println("This program has been Running for "+ millis()/1000 + " Seconds");}

Processing-Time Input

1. At first you add a font to your sketch going to create font in tool menu option2. Before a font is used in a program. It must be loaded and set as the current font. 3. Processing has a unique data type called PFont to store font data. 4. Make a new variable of the type PFont .5. Use the loadFont () function to load the font. 6. The textFont() function must be used to set the current font. 7. The text ( ) function is used to draw characters to the screen:

PFont MyFont;MyFont = loadFont ("Arial-Black-48.vlw"); textFont(MyFont);text (data, x, y) ;text(stringData, x, y, width, height) ;8. The data parameter can be a String, char, int, or float9. The stringdata parameter can only be a String. 10. The x and y parameters set the position of the lower –left corner. 11. The optional width and height parameters set boundaries, to which long texts should be wrapped.12. The text ( ) function draws the characters at the current font’s original size. 13. The fill( ) function can be used before the text() function to control the color and transparency of text.

Displaying Text in Display Window

Before letters can be displayed on the screen with Processing, a font must first be loaded and added to the current sketch folder . To ad a font to your sketch, select the

“Create Font” option from the Tools menu. A window opens and displays the names of the fonts installed on your computer that can be used. Select a font from the list

and click “OK.” The font generates and is copied into the current sketch’s data folder To make sure the font is there, click on the Sketch menu and select “Show Sketch

Folder”:

Displaying Text in Display Window

Displaying Text in Display Window1. At first you add a font to your sketch going to create font in tool menu option2. Before a font is used in a program. It must be loaded and set as the current font. 3. Processing has a unique data type called PFont to store font data. 4. Make a new variable of the type PFont .5. Use the loadFont () function to load the font. 6. The textFont() function must be used to set the current font. 7. The text ( ) function is used to draw characters to the screen: text (data, x, y) ;text(stringData, x, y, width, height) ;8. The data parameter can be a String, char, int, or float9. The stringdata parameter can only be a String. 10. The x and y parameters set the position of the lower –left corner. 11. The optional width and height parameters set boundaries, to which long texts should be

wrapped.12. The text ( ) function draws the characters at the current font’s original size. 13. The fill( ) function can be used before the text() function to control the color and transparency

of text.

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; text("LAX", 0, 40); //Write "LAX" at coordinate (0,40) text("AMS", 0, 70); //Write "AMS" at coordinate (0,70) text("fRA", 0, 100); // Write "FRA" at coordinate (0,100)

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; text(19, 200, 36); // Write 19 at coordinate (20O,36) text(72, 200, 70);// Write 72 at coordinate (20O,70) text('R', 262, 70); // Write 'R' at coordinate (262,70)

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; String s = "Response is the medium"; text(s, 20, 200, 200, 290); noFill();rect(20,200,200,290);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font2); // Set the current text font fill(255); // White text("OAY", 250, 240); fill(0); // Black text("CVG" , 250, 270); fill(102); // Gray text( "ATL", 250, 300);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the

font textFont(font2); // Set the current text font textSize(72); // change the current font size to 72 pixel, enlarging a font too much makes it pixelated// it is better to have the size of the default font set on a big value and then decrease by

textSizefill(0, 160); // Black with low opacity text("l", 350, 280); text ( "2", 365, 280); text ( "3", 380, 280); text ( "4", 395, 280); text ( "5", 410, 280);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; text("LAX", 0, 40); //Write "LAX" at coordinate (0,40) text("AMS", 0, 70); //Write "AMS" at coordinate (0,70) text("fRA", 0, 100); // Write "FRA" at coordinate (0,100)

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; text(19, 200, 36); // Write 19 at coordinate (20O,36) text(72, 200, 70);// Write 72 at coordinate (20O,70) text('R', 262, 70); // Write 'R' at coordinate (262,70)

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); // Set the current text font fill(0) ; String s = "Response is the medium"; text(s, 20, 200, 200, 290); noFill();rect(20,200,200,290);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font2); // Set the current text font fill(255); // White text("OAY", 250, 240); fill(0); // Black text("CVG" , 250, 270); fill(102); // Gray text( "ATL", 250, 300);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the

font textFont(font2); // Set the current text font textSize(72); // change the current font size to 72 pixel, enlarging a font too much makes it pixelated// it is better to have the size of the default font set on a big value and then decrease by

textSizefill(0, 160); // Black with low opacity text("l", 350, 280); text ( "2", 365, 280); text ( "3", 380, 280); text ( "4", 395, 280); text ( "5", 410, 280);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font2); // Set the current text font String lines = "Ll L2 L3"; textSize(20);fill(0); textLeading(15); text(lines, 405, 15, 25, 100); textLeading(25); text(lines, 436, 15, 25, 100); textLeading(35); text(lines, 468, 15, 25, 100); noFill();rect(405, 15, 25, 100);rect(436, 15, 25, 100);rect(468, 15, 25, 100);

Processing-Using Fonts

size(600,500);PFont font1; PFont font2; // Declare the variable font1 = loadFont ("Arial-Black-48.vlw"); font2 = loadFont ("Bauhaus93-48.vlw"); // Load the font textFont(font1); text("GNU" ,445, 445); textFont(font2); text("GNU" ,445, 490);

Processing-Using Fonts

PFont font;void setup(){ size(420,100); font = loadFont ("Dotum-100.vlw"); textFont(font); fill(0); background(255);}void draw(){ background(255); String time=nf(hour(),2)+":"+nf(minute(),2)+":"+nf(second(),2); text( time,0,90); }

Useful Codes-Making A Digital Clock

Processing-Using Fonts