Processing and Arduino Workshop Material.pdf

Environment

Environment-Toolbar Buttons 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.

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.

Environment-Menu Bar-Default Examples 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

Hacking the 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 Your code Preexisting Code Hacking the code

Exporting as a Java Applet on a Webpage 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 Application 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.

Printing the Code 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

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

Edit Menu-Managing the Code 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

Sketch Menu- Running/Presenting 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 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

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

Getting Help-Online Reference 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

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 height size(200,200); /* Sets the background of the display window in range of 0 (black) to 255 (white) */ background(102);

Processing-Syntax-Functions

Comment

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

size(200,200); Function

Parameter

Statement Terminator

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-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 < 50

false

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);

Interactivity and Data 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

Diagram by Kostas Terzidis

Has Video

Has Video

Interactivity and Data 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

Processing-Data-Variables 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 Types

Data Types

Numerical

Integer: …,-4,-3,-2,1,0,1,2,3,4,…

Float: -1.45, 4.0,24.56

Non-Numerical

Boolean: true, false

Character: ‘a’, ‘G’, ‘~’

String: “Hello World!”

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-Variable Declaration/Assignment 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

int peopleCount; Data Type

Variable Name

Processing-Variable Assignment

Assignment Operator

peopleCount = 127; Variable Name

value

Processing-Variable Assignment

Assignment Operator

peopleCount = 127; Variable Name

value

Processing-Variable Assignment

Assignment Operator

peopleCount = peopleCount+1; Variable Name

value

Processing-Variable Declaration

float temperature; Data Type

Variable Name

Processing-Variable Assignment

Assignment Operator

temperature = -32.8; Variable Name

value

Processing-Variable Declaration

String buildingName; Data Type

Variable Name

Processing-Variable Assignment

Assignment Operator

buildingName = “Al&D”; Variable Name

value

Processing-Variable Declaration

boolean isItNight; Data Type

Variable Name

Processing-Variable Assignment

Assignment Operator

isItNight = true; Variable Name

value

Processing-Variable Assignment/Decleration

Assignment Operator

String buildingName = “Al&D”; Data Type

Variable Name

value

Processing-Multiple Variable Decleration

int days, peopleCount, room; Data Type

Variable Name Variable Name

Variable Name

Processing-Variable Assignment/Decleration Printing Variable Values to Console // This is where you declare and initiate variables int 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.5 String c = "Nashid"; // String is any alphabetical combination, when declaring use double quotes char d = 'N'; // char is any character, when declaring use single quotes println("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-Graphical Elements-Frame Size size(height , width); size(100,100);

size(200,100);

Processing-Graphical Elements-Background background(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.

Processing-Graphical Elements-Drafting 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 Y and a y-coordinate. In Processing, the origin is the upper-left corner of the display window.

X

Processing-Graphical Elements-Shapes 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 shape rect(20,30,30,30); rectMode(CORNER);// The specified x and y is the upper left corner rect(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 shape ellipse(50,50,40,40); ellipseMode(CORNER);// The specified x and y is the upper left corner ellipse(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 point curveVertex(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 point endShape();

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

Further Reading on Shapes and Graphics

Processing-Graphical Elements-Attributes 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

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);

Processing-Graphical Elements-Attributes 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

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);

Processing-Graphical Elements-Attributes 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

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 Blue 3. 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 HSB 1. 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 RGB colorMode(HSB) ; //set the color space to HSB

HSB in Processing // Change the hue, saturation and brightness constant colorMode(HSB); for (int i = 0; i 5 False 5>3 True 5=3 False A relational expression evaluates to True or False >

Greater Than

<

Less than

>=

Greater than or equal to