Emerging Platform#5: Processing 2 B. Ramamurthy 7/5/2014
B. Ramamurthy, CS651
Emerging Platform#5:
Processing 2
B. Ramamurthy
1 7/5/2014
Outline
Motivating Processing…What is Processing?
Sample Program
Processing development environment (PDE)/ Main
Processing interface
B. Ramamurthy, CS651 2 7/5/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 7/5/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 7/5/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 7/5/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 7/5/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 7/5/2014
Design
We need a Box class and a Ball class
Main driver
BB
Has many
Box objects
Box class
The Box has many
Ball objects
Ball class
B. Ramamurthy, CS651 8 7/5/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 7/5/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 7/5/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 7/5/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 7/5/2014
B. Ramamurthy, CS651
Ball Class (Contd.)
void display()
{ move(); noStroke(); fill(bColor); ellipse(location.x, location.y, 2*rad, 2*rad); } void move()
{ location.add(speed); bounce(); }
13 7/5/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 ;
14 7/5/2014
Lets look at Processing Environment
B. Ramamurthy, CS651 15 7/5/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.
Look at
http://arduino.cc/en/tutorial/Graph as a part of your capstone project idea.
B. Ramamurthy, CS651 16 7/5/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 7/5/2014
