Multiple transformations

OK there is a lot of ground to cover here and I suspect looking at your code wouldn’t help. Once you get into ‘hundreds of lines of code’ it can become a nightmare finding and correcting errors because we can’t keep all that code in our head. One solution is to use object orientation programming and create classes making it easier to understand and implement you code.

The are a lot of info about using OOP on the net and Daniel Shiffman has done some good videos using OOP which I suggest you look at.

It seems to me that what you are trying to do is animate objects independently so I have created a sketch that has a single class called Ant and in that class we have all the attributes (fields / variables) that describe the ant i.e. position, size, speed and direction of travel. It also has methods (functions) to create an Ant object, update its position and to render it. When designing the class there are two principle two primary considerations

  1. A class should be autonomous: in other words the attribute values must only be changed inside the class using the methods inside the class. For instance to change the ants position we can use the setPos method like this
ant.setPos(20,30); // correct way to change ant's position

we should not access the fields directly, so although this does the same

ant.x = 20; // bad, bad, bad :-(
ant.y = 30;

we must not do this. If we find that some fields appear to have unusual values then we only need to look at the class code because the fields are not being modified anywhere else directly.

2: Separation of responsibilities: each method should have a separate responsibility. So in this class I have separated the code that updates the ants position / size from the code that renders the ant.

Any way I hope this gives an insight into using OOP with animation, if you have questions about the code please ask.

/*
Demonstration of how to use OOP when creating animated objects.

Click anywhere to create a new ant.
*/
ArrayList<Ant> ants = new ArrayList<Ant>();

void setup(){
  size(600,400);
  ants.add(new Ant(width/2, height/2));
}

void draw(){
  background(200,255,200);
  for(Ant a : ants) a.update();
  for(Ant a : ants) a.render();
}

void mouseClicked(){
  ants.add(new Ant(mouseX, mouseY));
}

class Ant {
  // Attributes or Fields
  float x = 0, y = 0;
  float big = 0.5;
  float speed = 0.5, heading;
  int col;

  Ant(float x, float y) {
    this.x = x;
    this.y = y;
    heading = random(TWO_PI);
    speed = random(1, 2);
    col = color(random(128, 240), random(128, 240), random(128, 240));
  }

  void setPos(float x, float y){
    this.x = x;
    this.y = y;
  }
  
  void update() {
    big *= 1.0005; // grow ant
    x += speed * cos(heading); // Move ant
    y += speed * sin(heading);
    x = (x + width) % width; // Keep inside visual area
    y = (y + height) % height;
  }

  void render() {
    pushMatrix();
    translate(x, y);
    rotate(heading);
    scale(big);
    stroke(0);
    strokeWeight(1.5);
    fill(col);
    line(-10, 0, -30, -20); // Back legs
    line(-10, 0, -30, 20);
    line(-4, 0, 6, -20); // Front legs
    line(-4, 0, 6, 20);
    ellipse(-10, 0, 34, 30); // Body
    ellipse(10, 0, 15, 15);  // Head
    popMatrix();
  }
}
1 Like