O.O.P APPLIED TO ANIMATIONUSING 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. It’s 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. It’s oriented at creating visuals, but you can do a lot more. It’s 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 PROCESSING EnvironmentEnvironment

• 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 “Ball”s. 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 ballboolean paused = true - true indicates game is pausedboolean done = false – false indicates game is not completedint[ ] 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 PROCESSINGStudents 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