1. Emerging Platform#5: Processing 2 B. Ramamurthy 6/13/2014B. Ramamurthy, CS6511

2.  Motivating Processing…What is Processing?  Sample Program  Processing development environment (PDE)/ Main Processing interface 6/13/2014B. Ramamurthy, CS6512 Outline

3.  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 6/13/2014B. Ramamurthy, CS6513 Motivating Processing

4. 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); } 6/13/2014B. Ramamurthy, CS6514 Sample Program: lets analyze this

5. 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; } 6/13/2014B. Ramamurthy, CS6515 Example 2

6.  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;  } 6/13/2014B. Ramamurthy, CS6516 Example 3

7.  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. 6/13/2014B. Ramamurthy, CS6517 One more example: Ball & Box

8.  We need a Box class and a Ball class 6/13/2014B. Ramamurthy, CS6518 Design Main driver BB Has many Box objects Box class The Box has many Ball objects Ball class

9. 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(); } 6/13/2014B. Ramamurthy, CS6519 BB Driver

10. 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 } 6/13/2014B. Ramamurthy, CS65110 Box

11. 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(); } 6/13/2014B. Ramamurthy, CS65111 Box (contd.)

12. 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)); } 6/13/2014B. Ramamurthy, CS65112 Ball Class

13. void display() { move(); noStroke(); fill(bColor); ellipse(location.x, location.y, 2*rad, 2*rad); } void move() { location.add(speed); bounce(); } 6/13/2014B. Ramamurthy, CS65113 Ball Class (Contd.)

14. 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 ; } } } 6/13/2014B. Ramamurthy, CS65114 Ball Class (contd.)

15. 6/13/2014B. Ramamurthy, CS65115 Lets look at Processing Environment

16.  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. 6/13/2014B. Ramamurthy, CS65116 Using processing

17.  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 6/13/2014B. Ramamurthy, CS65117 Summary