O.O.

P APPLIED TO ANIMATION
USING PROCESSING-2.0b8







-Arindam Sen
B.I.T FINAL YR
ROLL-33
Consider the following sketch of a particle system
which is a 2D motion graphic design.
We shall try to analyse how object oriented
programming could be used to create something
similar to this.

For that purpose we shall use a software called
PROCESSING which is essentially a Java-based
programming language designed expressly for the
creation of rich visuals - for example, images,
interactive graphics, and animations. It normally runs
as either a desktop Java application or as an applet
embedded in a web page. Its supported for Windows,
Mac and Linux, provided a Java VM is available.
WHAT IS PROCESSING ?
It is an open-source programming language
developed at MIT. Its oriented at creating
visuals, but you can do a lot more. Its basically
JAVA, with a nice wrapper around it. And last
but not least, there are many user-made
libraries that extend the capabilities of
Processing.
www.processing.org
Every Processing sketch is actually a
subclass of the PApplet Java class
which implements most of the
Processing language's features.
TWO BASIC FUNCTIONS OF
PROCESSING
1. void setup() - called only once per sketch run, at
the start. It can be used to define the base sketch
setup, like its size, its mode (default, OpenGL, etc.),
for loading resources, etc.
2. void draw() - called on each frame: a sketch is like
a movie, it is made of successive frames, images,
and their quick succession (by default around 60 per
second) makes the eye believe there is a continuous
movement.
PROCESSING
Environment
Each of the following particles can be thought of
as a Ball object.
Each Ball object has its own x,y coordinates in
the display window along with different value of
radius.
System comprising multiple Balls. Array of
Ball objects ( maybe )?


SOME VERY BASIC FUNCTIONS
frameRate(float fps)-specifies the number of frames to be displayed
every second (by default 60).
background(rgb)-sets the color used for the background of the
Processing window.
fill(r,g,b,alpha) sets the color used to fill shapes along with
opacity(alpha).
stroke(r,g,b,alpha)-Sets the color used to draw lines and borders
around shapes along with opacity (alpha).
ellipse(x,y,w,h)- draws an ellipse at coordinates (x , y) with
horizontal and vertical radius w , h respectively (all float values).
rect(x,y,w,h)-draws a rectangle at coordinates (x , y) with horizontal
and vertical radius w , h respectively (all float values).


DESIGNING A SIMPLE GAME
+X
+Y
300 pix
300 pix
40 pix
20
pix
70 pix
pix
20 pix
Let us see how we could
use PROCESSING to
create a very simple and
elegant Brick Breaker
game.
20
PVector pos - stores X,Y coordinates of the ball
PVector vel stores X,Y components of the velocity of the ball
boolean paused = true - true indicates game is paused
boolean done = false false indicates game is not completed
int[ ] bricks array data structures to keep track of bricks
void setup()
{
size(300,300);
strokeWeight(3);
fill(255,128,128);
stroke( 255 );
frameRate( 25 );
pos = new PVector( width/2, height/2 );
vel = new PVector( 10, -5 );
bricks = new int[7];
for( int x = 0; x < 7; x++ )
{
bricks[x] = 1;
}
}
void draw()
{
background(0);
if ( !paused )
{
update();
}
ellipse( pos.x, pos.y, 20, 20);
rect( mouseX - 35, 270, 70, 20
);
done=true;
for( int x = 0; x < 7; x++ )
{
if ( bricks[x] > 0 )
{
done=false;
fill( 128 );
rect( x * 40, 0, 40, 20 );
}
}


if ( paused )
{
textSize( 16 );
fill(128);
text( "press mousebutton to
continue", 10, 250 );
}

if ( done )
{
paused = true;
fill(255);
textSize( 48 );
text( "YOU WIN!!", 50, 200 );
}

} // end of draw()

void update()
{
pos.add( vel );
if ( pos.x > width || pos.x < 0 )
{
vel = new PVector( -vel.x, vel.y );
}
if ( pos.y < 0 )
{
vel = new PVector( vel.x, -vel.y );
}
if ( pos.y > height ) //if ball misses paddle
{
vel = new PVector( vel.x, -vel.y );
pos = new PVector( width/2, height/2 );
paused = true;
}
// check if the paddle was hit
if( pos.y >=270 && pos.x >=(mouseX-35)
&& pos.x<=(mouseX+35))
{
vel = new PVector( int (map((pos.x-
mouseX),-35,35,-10,10)), -vel.y);
}

// check if the ball hits a block
for( int x = 0; x < 7; x++)
{
if ( bricks[x] > 0 )
{
if ( pos.x > x * 40 && pos.x < x * 40 +
40 && pos.y > 0 && pos.y < 20 )
{
bricks[x] = 0;
// change the velocity in y direction if
the block has been hit
// on the bottom or on the top
if ( pos.x > x * 40 && pos.x < x * 40 +
40 )
{
vel = new PVector( vel.x, -vel.y );
}
// change the velocity in the x
direction if the block has been hit on the
side
if ( pos.y > 0 && pos.y < 20 )
{
vel = new PVector( -vel.x, vel.y );
}
}
}
}
}


void mousePressed()
{
paused = !paused;
if ( done )
{
for( int x = 0; x < 7; x++ )
{
bricks[x]= 1;
}
pos = new PVector( width/2, height/2 );
vel = new PVector( 10, -5 );
done = false;
}
}
APPLICATIONS OF PROCESSING
Students at hundreds of schools around the world use Processing for classes
ranging from middle school math education to undergraduate programming
courses to graduate fine arts studios.

At New York University's graduate ITP program, Processing is taught alongside PHP
as part of the foundation course for 100 incoming students each year.

At UCLA, undergraduates in the Design | Media Arts program use Processing to learn
the concepts and skills needed to imagine the next generation of web sites and video
games.

Tens of thousands of companies, artists, designers, architects, and researchers
use Processing to create an incredibly diverse range of projects.

Design firms such as Motion Theory provide motion graphics created with Processing
for the TV commercials of companies like Nike and Hewlett-Packard.

The University of Washington's Applied Physics Lab used Processing to create a
visualization of a coastal marine ecosystem as a part of the NSF RISE project.

THANK YOU