See reference: https://processing.org/reference/ArrayList.html
(But I think you got this already)
The main point in my opinion is not the Arraylist but what happens in the class you are using for its objects:
- In the class you store the positions of the cells and size and color and if it’s isAlive.
 
- Additionally you have the constructor and methods such as display() as described in the tutorial “objects”.
 
Example without a class
Here is an example without a class, just using the class PVector:
ArrayList<PVector> points = new ArrayList();
void setup() { 
  size(800, 800); 
  background(255);
} // function setup()
void draw() { 
  background(255);
  // show points in green 
  strokeWeight(4);
  stroke(0, 255, 0);  // GREEN
  for (PVector pv1 : points) {
    point(pv1.x, pv1.y);
  }
  // read mouse
  mousePressedThroughout();
}// function draw()
// -------------------------------------------------------------------
void keyPressed() {
  // delete all 
  points.clear();
}
void mousePressedThroughout() {
  // read mouse
  if (mousePressed) {
    //draw/add
    points.add(new PVector(mouseX, mouseY));
  }//if
}
//
More complex example with class
This is a more complex example with a class Spark (representing one spark within an explosion) and removing of old members of the ArrayList which are dead (in a for-loop backwards).
The ArrayList holds the sparks. Although the sparks belong to different firework explosions, they are all in ONE ArrayList.
ArrayList<Spark> sparks = new ArrayList();
int divider=1;
// ***************************************************************************
boolean videoExportIsOn1 = false;// ******************************************* 
// ***************************************************************************
// -------------------------------------------------------------------------------
void setup() {
  size(1240, 960, P3D);
  noStroke();
  fill(255);
  sphereDetail(5);
}
void draw() {
  background(0);
  lights(); 
  // text 
  fill(255);
  text("Click mouse to start firework. Hold any key for spheres.", 22, 22);
  // manage sparks
  if (keyPressed) {
    noStroke();
  }
  for (Spark currentSpark : sparks) {
    currentSpark.move();
    currentSpark.display();
    currentSpark.script();
  }
  // remove dead ones 
  for (int i=sparks.size()-1; i>=0; i--) {
    Spark s = sparks.get(i); 
    if (s.isDead) 
      sparks.remove(i);
  }
  // spawn new 
  if (frameCount%divider == 0) {
    mousePressedNew();
    divider=int(random(13, 33));
  }
  // images for movie (menu tools)
  if (videoExportIsOn1) {
    // Saves each frame as line-000001.png, line-000002.png, etc.
    saveFrame("line-######.png");
  }
}
// ---------------------------------------------------------------------------------
// Input 
void mousePressed() {
  int colType=int(random (7));
  for (int i=0; i<1000; i++) {
    Spark spark = new Spark(width/2, height-4, 4);
    sparks.add(spark); 
    spark.jump( mouseX, mouseY, colType);
  }
}
// --------------------------------------------------------------------------
// Tools
void mousePressedNew() {
  int colType=int(random (7));
  float x= random(44, width-44); 
  float y= random(44, height-44);  //     random(33, 220);
  for (int i=0; i<990; i++) {
    Spark spark = new Spark(width/2, height-4, 4);
    sparks.add(spark); 
    spark.jump( x, y, colType );
  }
}
// ================================================================
class Spark {
  float x, y, z; // position 
  float diameter; // Durchmesser 
  float gravity = 0.53; // Gravitation 
  color col;
  final int stateWait=0; 
  final int stateTriggered=1;
  final int stateJump=2;
  int state = stateWait;
  int timer;
  int duration; 
  float angle, radius, radius_Add; 
  float maxRadius=1000;
  float centerX, centerY; 
  boolean isDead=false; 
  // Constructor
  Spark(float x_in, float y_in, 
    float diameter_in) {
    x = x_in;
    y = y_in;
    diameter = diameter_in;
  }// Constructor 
  void move() {
    // Spark move 
    // move 
    x = centerX+cos(angle)*radius;
    y = centerY+sin(angle)*radius;
    radius+=radius_Add; 
    if (radius>maxRadius)
      isDead=true;
  }// function 
  // start spark 
  void jump( float x, float y, int colType ) {
    timer=millis();
    // duration for this spark to start after ignition 
    duration=int(random(0, 90));
    state=stateTriggered;
    centerX=x;
    centerY=y;
    angle=random(0, TWO_PI);
    maxRadius= random(90, 200);
    diameter=random(1.5, 7.7);
    // print(colType); 
    switch (colType) {
    case 0:
      col = color(random(256), random(256), random(256));
      break; 
    case 1:
      col =  color(random(256), 0, 0);
      break; 
    case 2:
      col =  color(random(256));
      break;
    case 3:
      col =  color(random(254, 256));
      break;
    case 4:
      // blue or white 
      if (random(100)>50) 
        col =  color(0, 0, random(254, 256));//blue
      else col =  color(random(254, 256)); // white
      break;
    case 5:
      // A or B 
      if (random(100)>50) 
        col = color(random(50, 256), random(50, 256), random(50, 256));
      else col = color(random(256), random(256), random(256));
      break;
    default:
      col = color(random(33), random(22), random(256));
      break;
    }
  }
  void script() {
    switch(state) {
    case stateWait:
      //
      diameter-=.1; 
      break;
    case stateTriggered:
      if (millis()-timer>duration)
        state=stateJump;
      break;
    case stateJump:
      jump2();
      state=0;
      break;
    default:
      println("Error 114");
      exit();
      break;
    }//switch
  }//method
  void jump2() {
    //starts explosion 
    radius_Add=random(2.1, 9.4);
  }// function 
  void display() {
    // Spark display 
    if (!keyPressed) {
      fill(col);
      ellipse(x, y, diameter, diameter);
    } else {
      pushMatrix();
      translate(x, y, 0);
      fill(col);
      sphere(diameter);
      popMatrix();
    }//else
    //
  }// function 
  //
}//class
//
Warm regards,
Chrisir