Environment. The toolbar buttons allow you to run and stop programs, create new sketches, open, save...

Environment

The toolbar buttons allow you to run and stop programs, create new sketches, open, save and export:1.Run . Compiles the code, opens a display window, and runs the program inside.

2.Stop Terminates a running program, but does not close the display window.

3.New Creates a new sketch.

4.Open Provides a menu with options to open files. Another way of opening files is dragging and the file icon to text editor area or processing icon.

5.Save Saves the current sketch to its current location.

6.Export Exports the current sketch as a Java applet embedded in an HTML file.

Environment-Toolbar Buttons

Your First Piece of Code

void setup(){ size(200,200);}

void draw(){ background(125); float x=mouseX; float y=mouseY; println("Mouse x=" + x + "..... Mouse y=" + y); line (x,y,100,100);}

Environment-Menu Bar

The menus provide the same functionality as the tool bar in addition to actions for file management and opening reference materials.

Under Examples you can find already made codes that you can use as the base of your experiments and achieve the desired result by changing these base codes.

This is what programmers call hacking. Meaning that you do not start a piece of software yourself. You use other’s software and change parts of it, to make it work your way

Environment-Menu Bar-Default Examples

For example lets go to examples , under basic, under transform, choose arm, and run the code.

Hacking the Default Examples

Let’s say we want the background color white and we want to double the size of the applet.


size(400,400);


background(255);


Preexisting Code

Hacking the code

Your code


The export feature packages a sketch to run within a Web browser.

When code is exported from Processing it is converted into Java code and then compiled as a Java applet.

Exporting as a Java Applet on a Webpage

When a project is exported, a series of files are written to a folder named applet that is created within the sketch folder.

All files from the sketch folder are exported into a single Java Archive (JAR) file with the same name as the sketch.


index.html is a webpage that contains the java applet and a link to actual code that results in the supported interaction.

If you have a website you can use this feature to place your programs online as a part of your website.


To see and change the html code on internet explorer go to view>Source

You can edit the html file in a text editor and save it again as html file to see the result of the changes that you have made


In addition to exporting Java applets for the Web, Processing can also export applications for the linux, Macintosh, and Windows platforms.

Exporting as a Application

When “Export Application” is selected from the File menu, folders will be created for each of the operating systems specified in the Preferences. Each folder contains the application, the source code for the sketch, and all required libraries for a specific platform.

Exporting as a Application

Page setup and print are the same as any conventional text editor program.

Printing the Code

You can print the code that you have , using print menu option

Printing the Code

This is where you define the default address for your sketches to be saved

Setting Preferences

Commands on the edit menu control the text editor

Find option is really useful when you have a huge number of code lines and you want to find a specific variable to change it. It is good to memorize the shortcuts for it:Ctrl F for Find and Ctrl G for Find next

Edit Menu-Managing the Code

Present is kind of a cool command too, when you choose to run an application in presentation mode, it covers the whole screen.

They are times that you are checking your code to find out which part is not working and you run it tens of times. It save you a lot of time if you know the shortcut for it.

For presentation it is Ctrl+Shift+R And for Run command it is CTRL+R

Sketch Menu- Running/Presenting the Code

Sketch Menue- Running/Presenting the Code

Presenting is useful when you are finally ready to setup your screen based installation, this way the piece will cover the whole screen

Help menu give you different options and direct you to different web pages on the Processing website

Getting Help-Help Menu

Reference will direct you to a comprehensive index of different processing commands and functions online

You can choose to view the abridged or extended version of the list.

You find all the information that you need for any command or code element in this list.

Getting Help-Online Reference

In the online index you can click on a command to be directed to a page with complete explanation and examples of use of that command

Getting Help-Online Reference

Processing-Syntax

Each programming language has specific linguistic details, that defines how the commands should be written. This set of rules is called the syntax of that programming language.

Processing-Syntax-Comments

Comments are ignored by the computer but are important for people. They let you write notes to yourself and to others who read your programs.

// Two forward slashes denote a one-line comment.

/* A forward slash followed by an asterisk allows the multi-line Comment to continue until the opposite*/

All letters and symbols that are not comments are translated by the compiler

Processing-Syntax-Functions

Functions allow you to execute all types of actions.

A function’s name is usually a lowercase word followed by parentheses.

The comma-separated elements between the parentheses are called parameters, and they affect the way the function works.

Example:

// The size function has two parameters: width and heightsize(200,200);/* Sets the background of the display window in range of 0 (black) to 255 (white) */background(102);

// The size function has two parameters: width and height

size(200,200);

Function Parameter

Statement Terminator

Comment

Omitting the semicolon at the end of a statement, a very common mistake, will result in an error message, and the program will not run.


// ERROR! The B in “background” is capitalized

Background(200);

Processing is Case Sensitive, it differentiates between uppercase and lowercase characters; therefore, writing “Background” when you mean to write “background” creates and error.


Processing-Syntax-Expressions

Expressions are often combinations of operators such as +, *, and / that operate on the values to their left and right. Expressions can also compare two values with operators such as > (greater than) and < (less than). These comparisons are evaluated as true or false. Expression Value

5 5

122.3+3.1 125.4

((3+2)*-10) + 1 -46

6 > 3 true

54 < 50false

Processing-Printing Expression Results

The functions print () and println () can be used to display data while a program is running

These functions write text inside the console

You can print the result of expressions or actual sentences to the console using these commands

println("Hello World!");println(5*24-(5/2.34));println("The Result is "+100*10);

In design and implementation of an interactive piece the first step is coming up with an appealing scenario:

What is it that you want your piece to do? What feature of the environment you want your system to be responsive to? What physical property of your environment you want to sense or measure? Which sensor I have to use? Which feature of the environment I want to change based on the sensed data? Which actuator I need to use to change the intended feature or property of environment?How do I want to relate the input and out put of the system?

As a result in the schematic design of the piece you decide which type of data you want to read from environment and which type of data you want to write back to environment or actuators of the environment

Interactivity and Data

Diagram by Kostas Terzidis

Has Video

Any interactive object or space is made up of three elements:

First is the physical interface, the stuff that you touch, hear, or see.

Second is the software interface, the commands that you send to the object or space to make it respond.

Third is the electronical interface which are the electronical parts that communicate with the system and each other through sending data and receiving data in form of electrical pulses.


A microcontroller has no physical interface that humans can interact with directly.

It is just an electronic chip with input and output pins that can send or receive electronical pulses.

Using a micro controller is a three-stage process:

1.You connect sensors to the input pins to convert physical energy like motion, heat and sound into electrical energy

2. You attach motors, speakers, and other devices to the outputs to convert electrical energy into physical action

3.You write a program to determine how the input changes affect the outputs which is basically reading the changes in input data and aplying changes in output data


Every thing that you sense from or send to an environment is in the form of data


What is data? Data often consists of

measurements of physical attributes.

In software, data is stored as numbers and

characters. Even Sounds, pictures and videos

are stored in computer as a series of numbers

Computers are continually receiving data from

the mouse and keyboard.

Processing-Data-Variables

What is a Variable? A variable is the container

in which the computer program stores the value

of a data.

The values that are stored in a variable can

change through out the time that the program is

running

A variable has three different attributes:

Type, Name, Value


What is a Data Type? 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.


Processing-Data Types

Boolean variable is often used to make decisions . About which lines of code are

run and which are ignored.

For example, imagine that you write a piece of code that turns on the light in a room of

it detects that it is dark outside and there is not enough light coming from the window:

The pseudo-code would be as follows:

A Boolean variable called “is it night yet?” is initiated

check the value of “is it night yet?” variable

if the value of “is it night yet?” is true , to turn on the light

if the value of “is it night yet?” is false, not to turn on the light

Processing-Data Types

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. 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. Once a variable is

declared, you can assign values to it.

Processing-Variable Declaration/Assignment

Processing-Variable Declaration

int peopleCount;

Data Type Variable Name

Processing-Variable Assignment

peopleCount = 127;

Variable Name value

Assignment Operator


peopleCount = peopleCount+1;

Variable Name value

Assignment Operator


float temperature;



temperature = -32.8;

Variable Name value

Assignment Operator


String buildingName;



buildingName = “Al&D”;

Variable Name value

Assignment Operator


boolean isItNight;



isItNight = true;

Variable Name value

Assignment Operator

Processing-Variable Assignment/Decleration

String buildingName = “Al&D”;

Variable Name value

Assignment Operator

Data Type

Processing-Multiple Variable Decleration

int days, peopleCount, room;

Variable NameData Type

Variable Name Variable Name

// This is where you declare and initiate variablesint a = 7; //integer is any whole number : ... -5,-4,-3,-2,-1,0,1,2,3,4,5,...float b = 14.3; // float is any number with decimal part : 1.00, 14.78, -6.5String c = "Nashid"; // String is any alphabetical combination, when declaring use double quoteschar d = 'N'; // char is any character, when declaring use single quotesprintln("a = "+ a); println("b = "+ b); println("c = "+ c); println("d = "+ d); print("a+b = "); println(a+b); print("a-b = "); println(a-b); print("a*b = "); println(a*b); print("a/b = "); println(a/b);

Processing-Variable Assignment/DeclerationPrinting Variable Values to Console

Processing-Graphical Elements-Frame Sizesize(height , width);

size(100,100);

size(200,100);

Processing-Graphical Elements-Backgroundbackground(GrayValue);background(Red,Green,Blue);

background(100);

background(255,0,0);

The Gray and RGB values can be any number from 0 to 255

Processing-Graphical Elements-Background

If you do not know the gray or RGB values of the color that you want you can use the photoshop color picker to find them.

The Display window is like a canvass that you can create/draw any graphical entity or composition on it.

Like any other drafting environment the first step to create shapes is to specify their coordinates or positions

A position on the screen is comprised of an x -coordinate and a y-coordinate.

In Processing, the origin is the upper-left corner of the display window.

X

Y

Processing-Graphical Elements-Drafting

In Processing there are different commands to create and place different shapes on the provided canvas:

point(x,y);

point(40,50);

Processing-Graphical Elements-Shapes


line(x1,y1,x2,y2);

line(20,30,70,80);



triangle(x1,y1,x2,y2,x3,y3);

triangle(10,10,40,40,25,60);



rect(x,y,w,h);

rect(10,30,60,30);



rectMode(CENTER);// The specified x and y is the center of the shaperect(20,30,30,30);rectMode(CORNER);// The specified x and y is the upper left cornerrect(20,30,30,30);



quad(x1,y1,x2,y2,x3,y3,x4,y4);

quad(38, 31, 86, 20, 69, 63, 30, 76);



ellipse(x,y,w,h);

ellipse(40,30,40,30);



ellipseMode(CENTER);// The specified x and y is the center of the shapeellipse(50,50,40,40);ellipseMode(CORNER);// The specified x and y is the upper left cornerellipse(50,50,40,40);



beginShape();curveVertex(10,10);//Specifies the direction at the first pointcurveVertex(10,30);curveVertex(20,30);curveVertex(45,85);curveVertex(70,20);curveVertex(75,40);curveVertex(10,10);//specifies the direction of the curve at the last pointendShape();



beginShape();vertex(10,10);vertex(10,30);vertex(20,30);vertex(45,85);vertex(70,20);vertex(75,40);vertex(10,10);endShape();


Processing-Graphical Elements-ShapesFurther Reading on Shapes and Graphics

In Processing there are different commands to change the visual attributes of the graphics:

noFill();fill(grayValue);

fill(grayValue , transparency);fill(Red , Green , Blue);

fill(Red , Green , Blue , transparency);

The parameters can rage between 0 and 255

Processing-Graphical Elements-Attributes

noFill();rect(10,10,20,20);fill(255);rect(20,20,20,20);fill(200);rect(30,30,20,20);fill(150);rect(40,40,20,20);fill(100);rect(50,50,20,20);fill(50);rect(60,60,20,20);fill(0);rect(70,70,20,20);







background(255,0,0);fill(255,255);rect(10,10,20,20);fill(255,200);rect(30,30,20,20);fill(255,150);rect(50,50,20,20);fill(255,100);rect(70,70,20,20);







background(255);fill(255,255,0);rect(10,10,20,20);fill(255,0,0);rect(30,30,20,20);fill(255,150,0);rect(50,50,20,20);fill(100,200,50);rect(70,70,20,20);

COLOR in Computer Graphics

1. Working with color on screen is different from working with color on paper or canvas.2. The most common way to specify color on the computer is with RGB values, where R stands for RED and G

stands For GREEN and B stands for Blue3. An RGB value sets the amount of red, green, and blue light in a single pixel of the screen. If you · look

closely at a computer monitor or television screen, you will see that each pixel is comprised of three separate light elements of the colors red, green, and blue; but because our eyes can see only a limited amount of detail, the three colors mix to create a single color.

4. For example, adding all the colors together on a computer monitor produces white, while adding all the colors together with paint produces black (or a strange brown). A computer monitor mixes colors with light. The screen is a black surface, and colored light is added. This is known as additive color, in contrast to the subtractive color model for inks on paper and canvas. This image presents the difference between these models:

COLOR in Computer Graphics

1. The intensities of each color element are usually specified with values between 0 and 255 where 0 is the minimum and 255 is the maximum amount of the colored light that can be added to mix

R G B

Red 255 0 0

Magenta 255 0 255

Blue 0 0 255

Cyan 0 255 255

Green 0 255 0

Yellow 255 255 0

White 255 255 255

Black 0 0 0

RGB Versus HSB1. You can use RGB (RED,GREEN,BLUE) or HSB(Hue,SATURATION,BRIGHTNESS)values of a color.2. Processing uses the RGB color model as its default for working with color.3. The colorMode () function sets the color space for a program:

colorMode(RGB) ; //set the color space to RGBcolorMode(HSB) ; //set the color space to HSB

HSB in Processing// Change the hue, saturation and brightness constant colorMode(HSB); for (int i = 0; i <100; i++) { stroke(i*2.5, 255, 255);//stroke(hue,Saturation,Brightness) line(i, 0, i, 100); println(i);}

//Change the saturation. hue and brightness constant colorMode(HSB); for (int i = 0; i < 100; i++) { stroke(132, i*2.5, 204); //stroke(hue,Saturation,Brightness) line(i, 0, i, 100); }

//Change the brightness. hue and saturation constant colorMode(HSB); for (int i = 0; i < 100; i++) { stroke(132, 108, i*2.5); //stroke(hue,Saturation,Brightness) line(i, 0, i, 100); }

Shift from one color to another color In RGB // Shift from blue (61,159,204) to green (153,207,61)in RGB mode colorMode(RGB);float r=0;float g=0;float b=0;for (int i = 0; i < 100; i++) { r = 61 + (i*0.92); // You want to go from 61 to 152 in 100 step: 61+i/100*(153-61)=Value at step i g = 159 + (i*0.48);// You want to go from 159 to 207 in 100 step: 159+i/100*(207-159)=Value at step i b = 204 - (i*1.43);// You want to go from 204 to 61 in 100 step: 204+i/100*(61-204)=Value at step i stroke(r, g, b); line(i, 0, i, 100); println(r);println(g);println(b);}

Shift from one color to another color In HSB // Shift from blue to green in HSB mode blue(200,100,100)/green(80,100,100) colorMode(HSB,360,100,100); // the range of hue is 1 to 360, the range of Saturation and Brightness is 1 to 100for (int i = 0; i < 100; i++) { float newHue = 200 - (i*1.2); stroke(newHue, 100, 100); line(i, 0, i, 100);


noStroke();stroke(grayValue);

stroke(grayValue , transparency);stroke(Red , Green , Blue);

stroke(Red , Green , Blue , transparency);




strokeWeight(pixels);



noFill();strokeWeight(2);stroke(255,0,0);rect(10,10,30,30);strokeWeight(4);stroke(0,255,0);rect(30,30,30,30);strokeWeight(8);stroke(0,0,255);rect(50,50,30,30);

In computer science every piece of information is saved in memory in the form of a series of 0s and 1s.

The smallest unit of data is called a bit that can store a 1 or a 0 in it.

If we have two bits the possible combinations that can be stored is 2*2 which is four

In the same manner if you have three bits the possible combinations that can be stored is 2*2*2 which is 8

0 0

1 0

0 1

1 1

Why the values range between 0-255?

Byte is an information holder which consists of 8 bites so the number of possible combinations is 2*2*2*2*2*2*2*2 or 2^8 which is 256.

If we start from number 0 , the list of numbers that can be stored in a byte is 0 through 255.

To figure out what is the actual number that is stored in a byte, follow the following formula:

1 0 1 1 0 1 1 0

* 2^7 + * 2^6+ *2^5+ *2^4+ *2^3+ *2^2+ *2^1+ *2^0

1*128+0*64+1*32+1*16+0*8+1*4+1*2+0*1


1 1 1 1 1 1 1 1

•2^7 + * 2^6+ *2^5+ *2^4+ *2^3+ *2^2+ *2^1+ *2^0

= 1*128+1*64+1*32+1*16+1*8+1*4+1*2+1*1= 255 // White


0 0 0 0 0 0 0 0

•2^7 + * 2^6+ *2^5+ *2^4+ *2^3+ *2^2+ *2^1+ *2^0

= 0*128+0*64+0*32+0*16+0*8+0*4+0*2+0*1= 0 // Black


Processing-Graphical Elements-AttributesFurther Reading on Shape Attributes

Processing-Parametric Design

Function(parameter01,parameter02,…);

rect(x,y,w,h);

Has Video

void setup(){ size(300,300); background(255);}void draw(){ background(255); int rectW=mouseX-10; int rectH=mouseY-10; rect(10,10,rectW,rectH);}


Any code in processing is executed line by line from top to bottom. Thus the program flow or the sequence in which the lines of code are executed is linear and from top to bottom.

ellipse(30,30,50,50);rect(25,25,50,50);

rect(25,25,50,50);ellipse(30,30,50,50);

Processing-Program Flow

There are ways to manipulate the sequence of the program flow. One of them is specifying which part of code is run once and which part is run repeatedly.

void setup(){ //this is the block of code that is run once}

void draw(){ //this is the part of code that is run repeatedly while the applet is running}

Processing-Program Flow-setup(),draw()


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

void draw(){ // background(255); line(100,100,mouseX,mouseY);}

*** Adding a background function to the draw causes the screen to redraw and erases the trace of the movement of the graphics on the screen



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

void draw(){ background(255); rect(mouseX,mouseY,30,30);}


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

Environment. The toolbar buttons allow you to run and stop programs, create new sketches, open, save...

Documents

Transcript of Environment. The toolbar buttons allow you to run and stop programs, create new sketches, open, save...