Skip to content

Variables, Arrays and object oriented programming

Kango edited this page May 19, 2018 · 12 revisions

A word about Variables, Arrays and Object oriented programming

This is basically a description how a program develops

  • from Variables
  • over the use of Arrays
  • to Object oriented programming.

Let's say you want to make a game for a cat running on the screen. (Or have a program for your customers or items in your web shop.)

Variables

You would have variables to represent the cat like:

  cat1X
  cat1Y
  cat1Speed

This is its position and speed.

Then you can easily display the cat, reflect it on the screen border etc.:

    int cat1X=0; 
    int cat1Y=40;
    int cat1Speed=3;
    
    void setup() {
      size(400, 400);
      background(90);
    }
    
    void draw() {
      background(90);
      ellipse(cat1X, cat1Y, 11, 11); 
      cat1X = cat1X+cat1Speed;
    }

ok, now let's say you want to have 3 cats.

  cat1X
  cat1Y
  cat1Speed
   
  cat2X
  cat2Y
  cat2Speed
   
  cat3X
  cat3Y
  cat3Speed

Which gives you very long code (for display and reflection you need to copy the lines).

    int cat1X=16;
    int cat1Y=16; 
    int cat1Speed=3; 
    
    
    float cat2X=0; 
    int cat2Y=30;
    float cat2Speed=1.2;
    
    
    float cat3X=0;
    int cat3Y=60; 
    float cat3Speed=2.1;
    
    void setup() {
      size(400, 400);
      background(90);
    }
    
    void draw() {
      background(90);
    
      // #1
      ellipse(cat1X, cat1Y, 11, 11); 
      cat1X = cat1X+cat1Speed;
    
      // #2
      ellipse(cat2X, cat2Y, 11, 11); 
      cat2X = cat2X+cat2Speed;
    
      // #3
      ellipse(cat3X, cat3Y, 11, 11); 
      cat3X = cat3X+cat3Speed;
    }

That's getting rather long and a lot of lines and even blocks look similar.

Arrays

Next step is to use a arrays here. Since you already have cat1X, cat2X and cat3X, why not make a list out of it? Because this is what arrays are: Lists. Basically you have 3 parallel arrays which hold the data. Think of 3 parallel shopping lists. The 0th (zero) line in all 3 lists holds all data for cat zero, 1st line for cat one etc.:

  int[] catX= new int[3];
  int[] catY = new int[3];
  int[] castSpeed = new int[3];

then you can use for-loops to loop over the arrays to display the cats and reflect the cats and change their data.

That's a huge improvement when you have 100 cats. Instead of having 100 lines ellipse(cat1X,cat1Y,14,14); you only need:

for(int i=0; i<100; i++) {
    ellipse(catX[i],catY[i],14,14); 
}

Example Code as full sketch:

    float[] catX= new float[3];
    int[] catY = new int[3];
    float[] catSpeed = new float[3];
    
    void setup() {
      size(400, 400);
      background(90);
    
      // init data
      for (int i=0; i<3; i++) {
        catY[i] = 30 + i*30;
        catSpeed[i]=random(1, 3);
      }
    }
    
    void draw() {
      background(90);
    
      for (int i=0; i<3; i++) {
        ellipse(catX[i], catY[i], 14, 14);
        catX[i] = catX[i]+catSpeed[i];
      }
    }

object oriented programming

But now let's go on. Some might say it's clumsy to have the data for one cat in three arrays.

Can't we have one array and each item in the array is an entire cat?

Here you need object oriented programming. The entire cat in the slot of the array is an object (consisting of x,y,speed).

You already have the data for one cat :

  cat1X
  cat1Y
  cat1Speed

now we make a class Cat that holds those in one package:

class Cat {
 
    int x; 
    int y;
    int speed;
     
} // end of class

you can add here also the function display() etc. inside the class. So it's all in one neat package class Cat.

Understand that the class is the cookie maker and one object is the cookie, derived from the class.

Now you can make an array from that class:

Cat cats = new Cat[3]; // array of type Cat

So that makes things better readable than with multiple arrays.

for(int i=0; i<100; i++) {
    cats[i].display(); 
}  

Full Code

Here is the full code:

Cat[] cats= new Cat[3];

void setup() {
  size(400, 400);
  background(90);

  // init data cats
  for (int i=0; i<3; i++) {
    cats[i] = new Cat (30 + i*30, 30 + i*55, random(1, 3));
  }
}//func

void draw() {
  background(90);

  //display cats 
  for (int i=0; i<3; i++) {
    cats[i].displayAndMove();
  }
}//func

// ==========================================

class Cat {

  // class for one cat

  int x; 
  int y;
  float speed;

  // constructor
  Cat(int xTemp, int yTemp, 
    float speedTemp) {
    x=xTemp;
    y=yTemp;

    speed=speedTemp;
  }// constructor

  void displayAndMove() {
    ellipse(x, y, 14, 14);
    x+=speed;
  }//method
} // end of class

See also:

From several variables to arrays: http://forum.processing.org/two/discussion/8082/from-several-variables-to-arrays

From several arrays to classes: http://forum.processing.org/two/discussion/8081/from-several-arrays-to-classes

Both are part of:

https://forum.processing.org/two/discussion/8093/technical-faq

See also:

https://www.processing.org/tutorials/objects/

Clone this wiki locally