How to make code into a class with processing

Question

I am taking a coding class, and I am struggling to do the following:

Rewrite the following code into an object-oriented fashion with a Snake class, and use an array to make a second snake appear. This is what I have so far. THIS IS NOT HOMEWORK, DO NOT WORRY. THIS IS A CLASS I AM TAKING ONLINE

int[] xpos = new int[50];
int[] ypos = new int[50];


void setup() {
  size(800,600);
  // Initialize
  for (int i = 0; i < xpos.length; i++){
   xpos[i] = 0;
   ypos[i] = 0;
  }
}

void draw() {
  background(255);
  
  // Shift Array Values
  for (int i = 0; i < xpos.length - 1; i++){
    xpos[i] = xpos[i + 1];
    ypos[i] = ypos[i + 1];
  }
  
  // New location
   xpos[xpos.length - 1] = mouseX;
   ypos[ypos.length - 1] = mouseY;   

  // Draw Everything
  for (int i = 0; i < xpos.length - 1; i++){
    noStroke();
    fill(255 - i*5);
    ellipse(xpos[i], ypos[i], i, i);
  }
}

Answer 1

So I don't know how much you already know about objects is Processing, so I hope you will understand this.

A object is just an instance of a class. A class can include variables and functions. When you create an object from a class you can set the variables of the object, so that two different objects can have two different values for the same variable. When you run a function of an object it will perform the function only on the variables from that object (not from the others).

So to create a class you just wrap the code in class [class name here] { [your code here] }.

You can cut out stuf that you don't want to be executed multible times like background(255); and paste it back into draw function.

Now you have to rename the functions: for the setup function you can use a constructer which is just a function without a return type (like void) and with the same name as the class. This will automatically run when you create the object later. The draw function you can just name how you want (I named it update).

So at that point you should have this:

class Snake{
  private int[] xpos = new int[50];
  private int[] ypos = new int[50];

  Snake(){
   for (int i = 0; i < xpos.length; i++){
     xpos[i] = 0;
     ypos[i] = 0;
    } 
  }
  
  void update(){
    // Shift Array Values
    for (int i = 0; i < xpos.length - 1; i++){
      xpos[i] = xpos[i + 1];
      ypos[i] = ypos[i + 1];
    }
    
    // New location
     xpos[xpos.length - 1] = mouseX;
     ypos[ypos.length - 1] = mouseY;   
  
    // Draw Everything
    for (int i = 0; i < xpos.length - 1; i++){
      noStroke();
      fill(255 - i*5);
      ellipse(xpos[i], ypos[i], i, i);
    }
  }

}

so now you can create an array of snakes and run the update function (or what ever you named it) on all of them (of cause I would do that with a loop, but I think this way it's more obvious)

Snake[] snakes = {new Snake(), new Snake()};

void setup() {
  size(800,600);
  // Initialize
}

void draw() {
  background(255);
  
  snakes[0].update();
  snakes[1].update();
 
}

Now you have two snakes, but you can't see both of them because they are on top of each other. That's why I added a variable offset, that will offset the two snakes and r, g, b variables for the color of the snake. of cause you have to pass the variables to the object when you create it and recieve it in the constructor.

So when you're done you should have something like that:

Snake[] snakes = {new Snake(0,0,255, 0), new Snake(255,0,0, 50)};

void setup() {
  size(800,600);
  // Initialize
}

void draw() {
  background(255);
  
  snakes[0].update();
  snakes[1].update();
 
}

class Snake{
  private int[] xpos = new int[50];
  private int[] ypos = new int[50];
  private int r;
  private int g;
  private int b;
  private int offset;

  Snake(int r, int g, int b, int offset){
    this.r = r;
    this.g = g;
    this.b = b;
    this.offset = offset;
   for (int i = 0; i < xpos.length; i++){
     xpos[i] = 0;
     ypos[i] = 0;
    } 
  }
  
  void update(){
    // Shift Array Values
    for (int i = 0; i < xpos.length - 1; i++){
      xpos[i] = xpos[i + 1];
      ypos[i] = ypos[i + 1];
    }
    
    // New location
     xpos[xpos.length - 1] = mouseX +offset;
     ypos[ypos.length - 1] = mouseY +offset;   
  
    // Draw Everything
    for (int i = 0; i < xpos.length - 1; i++){
      noStroke();
      fill(r - i*5, g - i*5, b - i*5);
      ellipse(xpos[i], ypos[i], i, i);
    }
  }

}

So finally it should look like this: two snakes in red and blue

I hope I could help you with this!