Simple Processing class example

Suppose you wanted a couple of circles (balls) bouncing around in a box. You might do something like this:

/* 
Example 1: bouncing balls the old fashioned way
 */
 
int INITIALXSPEED = 4;
int INITIALYSPEED = 7;
int CIRCLESIZE = 15;
 
float ballx;
float bally;
float ballxSpeed;
float ballySpeed;   
 
void setup() {
  size(400, 400);
  smooth();  
 
  ballx = 10;
  bally = 50;
  ballxSpeed = INITIALXSPEED;
  ballySpeed = INITIALYSPEED; 
}
 
void draw() {
   
  // Always erase the screen first
  background(0);
   
  // update the position of the circle
  ballx = ballx + ballxSpeed;
  bally = bally + ballySpeed;
 
  // check for collisions
  float r = CIRCLESIZE/2;
  if ( (ballx<r) || (ballx>width-r)){
      ballxSpeed = -ballxSpeed;
  } 
     
  if( (bally<r) || (bally>height-r)) {
      ballySpeed = -ballySpeed; 
  } 
   
  // Finally draws the circle
  fill(255);
  ellipse(ballx, bally, CIRCLESIZE, CIRCLESIZE);     
}

Copy this code into a new Processing sketch and run it. Read the code and understand what it’s doing.

Now suppose you wanted two balls, or 10, or 100. You’d have to copy all of that. Isn’t there a better way? For instance, much of the code is the same, it’s just dealing with a different ball. Wouldn’t it be nice to describe the ball behavior once, and then have it automatically know how to do that to all the balls?

There is a way, using classes and objects. Here is the same program using objects:

/* 
 Example 2: Creating a class
 based on http://www.openprocessing.org/sketch/48960
 */
 
int XSPEED = 4;
int YSPEED = 7;
int CIRCLESIZE = 15;
 
// make some MovingCircle objects (MovingCircle is a custom object
// defined below
 
MovingCircle myCircle = new MovingCircle(50,50);
 
void setup() {
  size(400, 400);
  smooth();    
}
 
void draw() {
 
  // Always erase the screen first
  background(0);
 
  // update the position of the circle
  myCircle.update();
 
  // check for collisions with the walls
  myCircle.checkCollisions();
 
  // and finally draw the circle
  myCircle.drawCircle();
}
 
 
// this is the definition for our custom MovingCircle class,
// start with the name of the class
 
class MovingCircle {
 
  // any variable declared here will be properties of
  // objects of this type 
  float x;
  float y;
  float xSpeed;
  float ySpeed; 
 
  // Now the functions that are part of this object
 
  // this special function declaration has the same name
  // as the class (MovingCircle) and it has no return type. This
  // is known as the constructor and it's run when an 
  // object of this type is created.
 
  MovingCircle(float xpos, float ypos) {
    x = xpos;
    y = ypos;  
    xSpeed = XSPEED;
    ySpeed = YSPEED;   
  }
 
  // Now come the functions (methods) of the object that 
  // can be called. These functions describe what the 
  // object can do:
 
  // update adds the speed to the position, making
  // our circle move around.
  void update() {
    x += xSpeed;
    y += ySpeed; 
  }
 
  // this function checks to see if our circle has gone off
  // the edge of the screen, and if so reverses the speed   
  void checkCollisions() {     
    float r = CIRCLESIZE/2;
 
    if ( (x<r) || (x>width-r)){
      xSpeed = -xSpeed;
    } 
 
    if( (y<r) || (y>height-r)) {
      ySpeed = -ySpeed; 
    }     
  }
 
  // This function finally draws the circle
  void drawCircle() {     
    fill(255);
    ellipse(x, y, CIRCLESIZE, CIRCLESIZE);     
  }
 
} // End of the MovingCircle class

If you want two balls, you don’t need to redefine the class, just create more objects:
/* 
 example 3: Creating two objects using the same class
 based on http://www.openprocessing.org/sketch/48960
 */
 
int XSPEED = 4;
int YSPEED = 7;
int CIRCLESIZE = 15;
 
MovingCircle myCircle; 
MovingCircle myOtherCircle; 
 
void setup() {
  size(400, 400);
  smooth();  
  myCircle= new MovingCircle(50,50);
  delay(100);
  myOtherCircle= new MovingCircle(100,100);
}
 
void draw() {
 
  // Always erase the screen first
  background(0);
 
  // update the position of the circle
  myCircle.update();
  myOtherCircle.update();
 
  // check for collisions with the walls
  myCircle.checkCollisions();
  myOtherCircle.checkCollisions();
 
  // and finally draw the circle
  myCircle.drawCircle();
  myOtherCircle.drawCircle();
}
 
// this is the definition for our custom MovingCircle class,
// start with the name of the class
 
class MovingCircle {
 
  // any variable declared here will be properties of
  // objects of this type 
  float x;
  float y;
  float xSpeed;
  float ySpeed; 
 
  // Now the functions that are part of this object
 
  // this special function declaration has the same name
  // as the class (MovingCircle) and it has no return type. This
  // is known as the constructor and it's run when an 
  // object of this type is created.
 
  MovingCircle(float xpos, float ypos) {
    x = xpos;
    y = ypos;  
    xSpeed = XSPEED;
    ySpeed = YSPEED;   
  }
 
  // Now come the functions (methods) of the object that 
  // can be called. These functions describe what the 
  // object can do:
 
  // update adds the speed to the position, making
  // our circle move around.
  void update() {
    x += xSpeed;
    y += ySpeed; 
  }
 
  // this function checks to see if our circle has gone off
  // the edge of the screen, and if so reverses the speed   
  void checkCollisions() {     
    float r = CIRCLESIZE/2;
 
    if ( (x<r) || (x>width-r)){
      xSpeed = -xSpeed;
    } 
 
    if( (y<r) || (y>height-r)) {
      ySpeed = -ySpeed; 
    }     
  }
 
  // This function finally draws the circle
  void drawCircle() {     
    fill(255);
    ellipse(x, y, CIRCLESIZE, CIRCLESIZE);     
  }
 
} // End of the MovingCircle class

But that seems like the class didn’t really save us that much work. Why use classes? Answer: it really helps when you want to make lots of objects, and you use arrays instead of individual names for each object:

/* 
 example 4: Creating an array of objects using a class
 based on http://www.openprocessing.org/sketch/48960
 */
 
int XSPEED = 4;
int YSPEED = 7;
int CIRCLESIZE = 15;
 
// create an empty array for 100 MovingCircle objects
MovingCircle[] myCircleArray = new MovingCircle[100];
 
void setup() {
  size(400, 400);
  smooth();
 
  // and actually create the objects and populate the
  // array with them
  for (int i=0; i < myCircleArray.length; i++) {
    myCircleArray[i] = new MovingCircle(random(0, width), random(0, height));
  }
}
 
void draw() {
 
  background(0);
 
  // iterate through every moving circle
  for (int i=0; i < myCircleArray.length; i++) {
 
    myCircleArray[i].update();
    myCircleArray[i].checkCollisions();
    myCircleArray[i].drawCircle();
  }
}
 
 
// this is the definition for our custom MovingCircle class,
// start with the name of the class
 
class MovingCircle {
 
  // any variable declared here will be properties of
  // objects of this type 
  float x;
  float y;
  float xSpeed;
  float ySpeed; 
 
  // Now the functions that are part of this object
 
  // this special function declaration has the same name
  // as the class (MovingCircle) and it has no return type. This
  // is known as the constructor and it's run when an 
  // object of this type is created.
 
  MovingCircle(float xpos, float ypos) {
    x = xpos;
    y = ypos;  
    xSpeed = XSPEED;
    ySpeed = YSPEED;
  }
 
  // Now come the functions (methods) of the object that 
  // can be called. These functions describe what the 
  // object can do:
 
  // update adds the speed to the position, making
  // our circle move around.
  void update() {
    x += xSpeed;
    y += ySpeed;
  }
 
  // this function checks to see if our circle has gone off
  // the edge of the screen, and if so reverses the speed   
  void checkCollisions() {     
    float r = CIRCLESIZE/2;
 
    if ( (x<r) || (x>width-r)){
      xSpeed = -xSpeed;
    } 
 
    if( (y<r) || (y>height-r)) {
      ySpeed = -ySpeed; 
    }  
  }
 
  // This function finally draws the circle
  void drawCircle() {     
    fill(255);
    ellipse(x, y, CIRCLESIZE, CIRCLESIZE);
  }
} // End of the MovingCircle class
Print Friendly
Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *