environment. the toolbar buttons allow you to run and stop programs, create new sketches, open, save...
TRANSCRIPT
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.
Hacking the Default Examples
size(400,400);
Hacking the Default Examples
background(255);
Hacking the Default Examples
Preexisting Code
Hacking the code
Your code
Hacking the Default Examples
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.
Exporting as a Java Applet on a Webpage
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.
Exporting as a Java Applet on a Webpage
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
Exporting as a Java Applet on a Webpage
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.
Processing-Syntax-Functions
// 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-Functions
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
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.
Interactivity and Data
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
Interactivity and Data
Every thing that you sense from or send to an environment is in the form of data
Interactivity and 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
Processing-Data-Variables
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-Variables
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
Processing-Variable Assignment
peopleCount = 127;
Variable Name value
Assignment Operator
Processing-Variable Assignment
peopleCount = peopleCount+1;
Variable Name value
Assignment Operator
Processing-Variable Declaration
float temperature;
Data Type Variable Name
Processing-Variable Assignment
temperature = -32.8;
Variable Name value
Assignment Operator
Processing-Variable Declaration
String buildingName;
Data Type Variable Name
Processing-Variable Assignment
buildingName = “Al&D”;
Variable Name value
Assignment Operator
Processing-Variable Declaration
boolean isItNight;
Data Type Variable Name
Processing-Variable Assignment
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
In Processing there are different commands to create and place different shapes on the provided canvas:
line(x1,y1,x2,y2);
line(20,30,70,80);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
triangle(x1,y1,x2,y2,x3,y3);
triangle(10,10,40,40,25,60);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
rect(x,y,w,h);
rect(10,30,60,30);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
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);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
quad(x1,y1,x2,y2,x3,y3,x4,y4);
quad(38, 31, 86, 20, 69, 63, 30, 76);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
ellipse(x,y,w,h);
ellipse(40,30,40,30);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
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);
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
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();
Processing-Graphical Elements-Shapes
In Processing there are different commands to create and place different shapes on the provided canvas:
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-Shapes
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);
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
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);
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
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);
In Processing there are different commands to change the visual attributes of the graphics:
noStroke();stroke(grayValue);
stroke(grayValue , transparency);stroke(Red , Green , Blue);
stroke(Red , Green , Blue , transparency);
The parameters can rage between 0 and 255
Processing-Graphical Elements-Attributes
In Processing there are different commands to change the visual attributes of the graphics:
strokeWeight(pixels);
The parameters can rage between 0 and 255
Processing-Graphical Elements-Attributes
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
Why the values range between 0-255?
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
Why the values range between 0-255?
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
Why the values range between 0-255?
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);}
Processing-Parametric Design
Processing-Parametric Design
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()
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(){ 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
Processing-Program Flow-setup(),draw()
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(){ size(200,200); background(255);}
void draw(){ background(255); rect(mouseX,mouseY,30,30);}
Processing-Program Flow-setup(),draw()
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