Using Ani Library on Objects (Processing)

Question

I am currently working with the Ani Library in Processing. I'm trying to fade in some rectangles one by one (on a PGraphics). To let the rectangles appear I use a loop - whose size I can control with MouseX. So one rectangle appears after the other. But I also want to fade in each one individually using the Ani Library. Currently I can only get the fade in to affect all of them at once.

So I tried to make an object out of the rectangle and put the FadeIn inside the object. But it behaves similar here – all fade in at once. How can I solve this? Do I need an Array or an Array List for this?

This is my Code without an object:

import de.looksgood.ani.*;
PGraphics pg;
float alpha;

void setup() {
  size(1920, 1920);
  rectMode(CENTER);
  Ani.init(this);
  pg = createGraphics(width, height);
}

void draw() {
  drawPG();
  image(pg, 0,0);
}

void drawPG () {
  pg.beginDraw();
  pg.pushMatrix();
  pg.translate(100, height/4.75);
  pg.background(255);
  pg.noStroke();
  Ani.to(this, 10, "alpha", 255, Ani.EXPO_OUT);
  color black = color(0, 0, 0, alpha);
  pg.fill(black);
  int blocks = int(map(mouseX, 0, width, 0, 7));
  for (int i = 0; i < blocks; i++) {
    pg.pushMatrix();
    pg.translate(i * 200 + i*100, 0);
    pg.rect(0, 0, 200, 200);
    pg.popMatrix();
  }
  pg.popMatrix();
  pg.endDraw();
}

And this is my tried out version with an Object:

import de.looksgood.ani.*;

PGraphics pg;
Rectangle myRect;


void setup() {
  size(1920, 1920);
  rectMode(CENTER);
  myRect = new Rectangle();
  Ani.init(this);
  pg = createGraphics(width, height);

}

void draw() {
  drawPG();
  image(pg, 0,0);
}

void drawPG () {
  pg.beginDraw();
  pg.pushMatrix();
  pg.translate(100, height/4.75);
  pg.background(255);
  pg.noStroke();
  int blocks = int(map(mouseX, 0, width, 0, 7));
  for (int i = 0; i < blocks; i++) {
    pg.pushMatrix();
    pg.translate(i * 200 + i*100, 0);
    myRect.display(pg);
    pg.popMatrix();
  }
  pg.popMatrix();
  pg.endDraw();
}

class Rectangle {
  float alpha;
  
  Rectangle() {
  }

  void display(PGraphics pg) {
    Ani.to(this, 10, "alpha", 255, Ani.EXPO_OUT);
    color black = color(0, 0, 0, alpha);
    pg.fill(black);
    pg.rect(0, 0, 200, 200);
  }
}

Answer 1

+++ EDIT +++

Found a solution here: https://processing.org/tutorials/objects

And this gave me the hint to really work with an array. And then it says for the PGraphic:

  void drawPG () {
  pg.beginDraw();
  pg.pushMatrix();
  pg.translate(100, height/4.75);
  pg.background(255);
  pg.noStroke();
  int blocks = int(map(mouseX, 0, width, 0, rectangles.length));
  for (int i = 0; i < blocks; i++) {
    pg.pushMatrix();
    pg.translate(i * 200 + i*100, 0);
    rectangles[i].display(pg);
    pg.popMatrix();
  }
  pg.popMatrix();
  pg.endDraw();
}

Above setup();

   Rectangle[] rectangles = new Rectangle[7];

And in setup();

   for (int i = 0; i < rectangles.length; i++) {
    rectangles[i] = new Rectangle();
  }