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

2. 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

3. 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, version
B. Ramamurthy, CS651
7/5/2014

4. 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

5. 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

6. 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

7. 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

8. 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

9. Lets look at Processing Environment
B. Ramamurthy, CS651
7/5/2014

10. 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
as a part of your capstone project idea.
B. Ramamurthy, CS651
7/5/2014

11. 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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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