Processing and arduino workshop material ( PDFDrive com ) pdf

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

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

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

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

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

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

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

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

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

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;

Processing-Variable Assignment

peopleCount = 127;

Assignment Operator

Processing-Variable Assignment

peopleCount = 127;

Assignment Operator

Processing-Variable Assignment

peopleCount = peopleCount+1;

Assignment Operator

Processing-Variable Declaration

float temperature;

Processing-Variable Assignment

temperature = -32.8;

Assignment Operator

Processing-Variable Declaration

String buildingName;

Processing-Variable Assignment

buildingName = “Al&D”;

Assignment Operator

Processing-Variable Declaration

boolean isItNight;

Processing-Variable Assignment

isItNight = true;

Assignment Operator

Processing-Variable Assignment/Decleration

String buildingName = “Al&D”;

Assignment Operator

Data Type

Processing-Multiple Variable Decleration

int days, peopleCount, room;

Variable Name Data Type

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

Processing-Graphical Elements-Frame Size

size(height , width);

size(100,100);

size(200,100);

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

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:

In Processing there are different commands to create and place different shapes

on the provided canvas:

Further 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