Platform5 Processing 2 B Ramamurthy 6132014 B Ramamurthy CS651 1 Motivating ProcessingWhat is Processing Sample Program Processing development environment PDE Main Processing interface ID: 347302
Download Presentation The PPT/PDF document "Emerging" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Emerging Platform#5:Processing 2
B. Ramamurthy
6/13/2014
B. Ramamurthy, CS651
1Slide2
Motivating Processing…What is Processing?Sample ProgramProcessing development environment (PDE)/ Main Processing interface
6/13/2014
B. Ramamurthy, CS651
2
OutlineSlide3
Focus is on multi-media and graphicsSimple to translate from ideas to “Visualization”, “interactive graphics”, “Animations”Easy to use “zero-entry approach to coding”
Open source, abundant community contributionBuilt-on top of JavaCan be exported to mobile application environment using Android mode
Can be exported to Web environment using Javascript mode
… many more
6/13/2014
B. Ramamurthy, CS651
3
Motivating ProcessingSlide4
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/2014
B. Ramamurthy, CS651
4
Sample Program: lets analyze thisSlide5
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/2014
B. Ramamurthy, CS651
5
Example 2Slide6
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/2014
B. Ramamurthy, CS651
6
Example 3Slide7
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/2014
B. Ramamurthy, CS651
7
One more example: Ball & BoxSlide8
We need a Box class and a Ball class6/13/2014
B. Ramamurthy, CS651
8
Design
Main driver
BB
Has many Box objects
Box class
The Box has many Ball objects
Ball classSlide9
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/2014
B. Ramamurthy, CS651
9
BB DriverSlide10
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/2014
B. Ramamurthy, CS651
10
BoxSlide11
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/2014
B. Ramamurthy, CS651
11
Box (contd.)Slide12
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/2014
B. Ramamurthy, CS651
12
Ball ClassSlide13
void display()
{ move();
noStroke(); fill(
bColor); ellipse(location.x
,
location.y
, 2*rad, 2*rad
);
}
void move()
{
location.add
(speed);
bounce
(); }
6/13/2014
B. Ramamurthy, CS651
13
Ball Class (Contd.)Slide14
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/2014
B. Ramamurthy, CS651
14
Ball Class (contd.)Slide15
6/13/2014
B. Ramamurthy, CS651
15
Lets look at Processing EnvironmentSlide16
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/2014
B. Ramamurthy, CS651
16
Using processingSlide17
W studies a really easy use programming environment called ProcessingArduino IDE (and many others) are constructed out of Processing
You may use it for graphics capabilities and also for design of an IDEThis is also a great environment for working with images and shapes
See Processing.org for more cool examples
6/13/2014
B. Ramamurthy, CS651
17
Summary