Emerging Platform#5:
Processing 2
B. Ramamurthy
B. Ramamurthy, CS651
1
6/13/2014
Outline
 Motivating Processing…What is Processing?
 Sample Program
 Processing development environment (PDE)/ Main
Processing interface
B. Ramamurthy, CS651
2
6/13/2014
Motivating Processing
 Focus is on multi-media and graphics
 Simple to translate from ideas to “Visualization”, “interactive
graphics”, “Animations”
 Easy to use “zero-entry approach to coding”
 Open source, abundant community contribution
 Built-on top of Java
 Can be exported to mobile application environment using
Android mode
 Can be exported to Web environment using Javascript mode
 … many more
B. Ramamurthy, CS651
3
6/13/2014
Sample Program: lets analyze this
void setup() { // initialization : executed once
size(400,400);
stroke(0);
background(192,64,0);
}
void draw() { // repeated every time mouse is moved
line(150,25,mouseX, mouseY);
}
B. Ramamurthy, CS651
4
6/13/2014
Example 2
void setup() { // initialization : executed once
size(400,400);
stroke(0);
background(192,64,0);
}
int x = 0, y =0 ;
void draw() { // repeated every time mouse is moved
line(x,y,mouseX, mouseY);
x= mouseX;
y = mouseY;
}
B. Ramamurthy, CS651
5
6/13/2014
Example 3













int x = 10; int y = 10;
int x1 = width; int y1 = height;
void draw()
{
background(255);
rect(x,y, 34, 34);
ellipse(x1,y1, 40, 40);
x1 = x1-2; if (x1<0) x1 = width;
y1 = y1- 2; if (y1 < 0) y1 = height;
x = x+ 1; if (x > width) x = 0;
y = y + 1; if (y > height) y = 0;
}
B. Ramamurthy, CS651
6
6/13/2014
One more example: Ball & Box
 Many physics and particle motion ( including fluid viscosity
etc.) deal with balls (or droplets) of something moving
according to some laws of physics or fluid mechanics etc.
 We will illustrate this using two common “classes” of
objects: a Ball and a Box… in fact, many boxes and many
balls within each Box.
 The development is OOD and OOP, in Processing.
 This also illustrates multi-class development in Processing
and also communication among objects.
B. Ramamurthy, CS651
7
6/13/2014
Design
 We need a Box class and a Ball class
Main
driver
BB
Has
many
Box
objects
B. Ramamurthy, CS651
Box class
The Box has many
Ball objects
8
Ball class
6/13/2014
BB Driver
Box b; // define a name for the box 'b'
Box c;
void setup()
{
size(400, 400);
b = new Box(100, 100, 200, 200, 20); // instantiating an object
c = new Box(30,30, 50,50, 10);
}
void draw()
{
background(255);
b.display();
c.display();
}
B. Ramamurthy, CS651
9
6/13/2014
Box
class Box
{
float x, y, w, h; // data attributes of the Box
int nBalls;
float br = 4.0;
Ball [] balls;
Box (float locx, float locy, float wt, float ht, int nb) //constructor
{
x = locx;
y = locy;
w = wt;
h = ht;
nBalls = nb;
balls = new Ball[nBalls];
for (int i =0; i < nBalls; i++)
{
balls[i] = new Ball(random(w), random(h), br, color(random(255), random(255), random(255)), w, h);
} // for
}
B. Ramamurthy, CS651
10
6/13/2014
Box (contd.)
void display() // Box's Display
{
pushMatrix();
translate(x, y);
stroke(0);
fill(255);
rect(0, 0, w, h);
for (int j = 0; j< balls.length; j++)
{ balls[j].display();} // call to Ball's display()
popMatrix();
}
}
B. Ramamurthy, CS651
11
6/13/2014
Ball Class
class Ball
{
// properties/characteristis or attributes
PVector location;; // x and y
color bColor;
float rad;
PVector speed; // dx and dy
float dampen = 0.4;
float bw, bh;
//constructor (s)
Ball (float x, float y, float r, color c, float w, float h)
{
location = new PVector (x,y);
rad = r;
bColor = c;
bw = w;
bh = h;
speed = new PVector(random(1,3), random(1,3));
}
B. Ramamurthy, CS651
12
6/13/2014
Ball Class (Contd.)
void display()
{ move();
noStroke();
fill(bColor);
ellipse(location.x, location.y, 2*rad, 2*rad); }
void move()
{ location.add(speed);
bounce(); }
B. Ramamurthy, CS651
13
6/13/2014
Ball Class (contd.)
void bounce() {
if (location.x > (bw-rad)) //right end bounce
{ location.x = bw - rad;
speed.x = -speed.x * dampen; }
if (location.x < rad) // left end bounce
{
location.x = rad;
speed.x = -speed.x * dampen;
}
if (location.y > (bh- rad)) // bottom bounce
{
location.y = bh - rad;
speed.y = -speed.y * dampen ;
}
if (location.y < rad) // top bounce
{
location.y = rad;
speed.y = -speed.y *dampen ;
}
B. Ramamurthy,}CS651
}
14
6/13/2014
Lets look at Processing Environment
B. Ramamurthy, CS651
15
6/13/2014
Using processing





Environment:
PDE is a simple text editor for writing code.
When programs are they open a new window called the display window.
Pieces of software written in Processing are called sketches.
There is console at the bottom of Processing environment that display
output from println() and print() functions.
 The toolbar buttons allow you run and stop programs, create a new sketch,
open, save, and export.
 There are other buttons for file (operations), Edit (operations), Sketch (start
and stop), Tools (for formatting etc.), Help (reference files)
 Lets work on the samples given in these pages.
B. Ramamurthy, CS651
16
6/13/2014
Summary
 W studies a really easy use programming environment
called Processing
 Arduino IDE (and many others) are constructed out of
Processing
 You may use it for graphics capabilities and also for
design of an IDE
 This is also a great environment for working with
images and shapes
 See Processing.org for more cool examples
B. Ramamurthy, CS651
17
6/13/2014