Emerging Platform#5: Processing 2

1. Emerging Platform#5:Processing 2 B. Ramamurthy B. Ramamurthy, CS651

2. Outline B. Ramamurthy, CS651 Motivating Processing…What is Processing? Sample Program Processing development environment (PDE)/ Main Processing interface

3. Motivating Processing B. Ramamurthy, CS651 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

4. Sample Program: lets analyze this B. Ramamurthy, CS651 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); }

5. Example 2 B. Ramamurthy, CS651 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. Example 3 B. Ramamurthy, CS651 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; }

7. One more example: Ball & Box B. Ramamurthy, CS651 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.

8. Design Box class The Box has many Ball objects Ball class Main driver BB Has many Box objects B. Ramamurthy, CS651 We need a Box class and a Ball class

9. BB Driver B. Ramamurthy, CS651 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(); }

10. Box B. Ramamurthy, CS651 class Box { float x, y, w, h; // data attributes of the Box intnBalls; float br = 4.0; Ball [] balls; Box (float locx, float locy, float wt, float ht, intnb) //constructor { x = locx; y = locy; w = wt; h = ht; nBalls = nb; balls = new Ball[nBalls]; for (inti =0; i < nBalls; i++) { balls[i] = new Ball(random(w), random(h), br, color(random(255), random(255), random(255)), w, h); } // for }

11. Box (contd.) B. Ramamurthy, CS651 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(); } }

12. Ball Class B. Ramamurthy, CS651 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)); }

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

14. Ball Class (contd.) B. Ramamurthy, CS651 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 ; } } }

15. Lets look at Processing Environment B. Ramamurthy, CS651

16. Using processing B. Ramamurthy, CS651 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.

17. Summary B. Ramamurthy, CS651 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