Emerging Platform#1: Processing 3 B. Ramamurthy B. Ramamurthy, CS651 7/5/2014

Outline Motivating Processing…What is Processing? What can you do with Processing? Sample Program Processing development environment (PDE)/ Main Processing interface B. Ramamurthy, CS651 7/5/2014

Motivating Processing Highly flexible environment applicable to wide range of fields from physics to dynamic arts Many developments are built using Processing IDE: example Arduino IDE An event-driven programming model Easy to create 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 Other modes: Modes Javascript mode, Python mode Lets look at here: processing.org; we will use java mode, 3.3.4 version B. Ramamurthy, CS651 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 7/5/2014

Example 1: Guess what does it do? 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 7/5/2014

Example 2: How about this? 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 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. This model can be used for simulating activities in automotive components. B. Ramamurthy, CS651 7/5/2014

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

Lets look at Processing Environment B. Ramamurthy, CS651 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 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 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 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 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 7/5/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 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 ; } } B. Ramamurthy, CS651 7/5/2014

Summary We looked at a very useful and easy to 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 7/5/2014

Activity#2 Can you think of a use case for Processing in automotive domain? Can you view processing as a means for solving this use case? Processing based capstone project ideas? Hands-on exercises: Lets install Processing and explore working on some worked out examples and also solving some problems. CSE 651 C, B. Ramamurthy 6/16/2017