# Looking for more resources about ArrayLists

**URL:** <https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025>\
**Category:** Beginners\
**Created:** [May 18, 2020, 5:43pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025 "2020-05-18T17:43:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2020, 5:43pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/1 "2020-05-18T17:43:28Z")

</div>

Can someone/anyone direct me to any additional **beginner-coder-friendly tutorial(s) on ArrayLists**?

- **I am watching the Coding Train tutorials** in _The Nature of Code_ playlist. And the explanations ARE indeed clear.
- **I have also read the [processing.org](http://processing.org) reference.**
- **And, surfed through java tutorials on youtube.**

I want to understand so that I can use them in service to creating grid systems – at first, simple, and then more complex – that allows me to easily manipulate without needing to consider predetermined length/size.

I found this **piece of code** , and I’m trying to understand how this works compared to garden-variety array[] syntax and what’s happening under the hood:

/////////////////////////////////

```auto
ArrayList<GridPoint>points = new ArrayList<GridPoint>();
float tileWidth, tileHeight = 100;

for (float x = 0; x <= width; x+= tileWidth){
  for (float y = 0; y <= height; y += tileHeight){
    points.add(new GridPoint (x, y, tileWidth, tileHeight));
  }
}

```

Any guidance is greatly appreciated!  
🤓

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [May 18, 2020, 6:10pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/2 "2020-05-18T18:10:27Z")

</div>

The method **add()** by default appends values to the end (tail) of its List:

- [Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/util/List.html#add(E)](http://Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/util/List.html#add(E))

A List’s internal capacity (its underlying array) automatically doubles whenever **size()** \>= _length_.

For further explanation see link below:

- [Forum.Processing.org/two/discussion/8080/why-use-arraylist-instead-of-array-with-append](http://Forum.Processing.org/two/discussion/8080/why-use-arraylist-instead-of-array-with-append)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 18, 2020, 6:16pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/3 "2020-05-18T18:16:17Z")

</div>

For the specific case of a grid, I think that using an `ArrayList` is not worth it because the size of the grid is fixed. Using an `ArrayList` is useful when you need to store dynamically objects and you don’t know how much.

So you should use a raw 2d array :

```auto
GridPoint[][] points = new GrigPoint[tileWidth][tileHeight];

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2020, 6:19pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/4 "2020-05-18T18:19:32Z")

</div>

Thank you @josephh,  
I plan to interact with the grids. So they will not be a fixed size…  
Hence the need for an ArrayList approach. 🙂

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2020, 6:24pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/5 "2020-05-18T18:24:18Z")

</div>

Thank you @GoToLoop,  
The second link is helpful! Broadens my understanding… And have bookmarked the Docs.Oracle reference. 🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 18, 2020, 6:30pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/6 "2020-05-18T18:30:40Z")

</div>

ArrayList is pretty straight forward

You can tell it the object type with `<>`

I like the short form of a for loop :  
for(Type t1 : list) { that’s possible here.

To remove from list, for loop backwards…

Otherwise it’s good when you have a size that varies like bullets, or in your case a flexible grid.

Chrisir

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 18, 2020, 7:41pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/7 "2020-05-18T19:41:34Z")

</div>

> [@Chrisir](#):
>
> ArrayList is pretty straight forward

Thank you @Chrisir,  
Yeah, I’m probably overthinking… 🤓

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 18, 2020, 9:36pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/8 "2020-05-18T21:36:45Z")

</div>

See reference: [https://processing.org/reference/ArrayList.html](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:

```auto

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.

```auto

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

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 20, 2020, 10:42pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/9 "2020-05-20T22:42:46Z")

</div>

Hi @Chrisir I just saw this full post with the 2 examples. Thank you!  
What I notice now — and didn’t realize before — is that objects are not initialized in the setup for an ArrayList. Which does make sense as the array is to be used dynamically.  
I’ll spend some more time looking through your examples above. May have additional comments or questions … But for now greatly appreciate this info!  
🤓

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 21, 2020, 9:59am UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/10 "2020-05-21T09:59:46Z")

</div>

> [@debxyz](#):
>
> objects are not initialized in the setup for an ArrayList

That is true for the two Sketches I posted above.

But it is not a principle rule for ArrayLists, it was more random that this was the case in the two Sketches.  
Whether you have an initial (partial) fill of the ArrayList at start up or not is your decision and depends on your goal with the sketch, its purpose.

Below is an example of a Sketch with an initial fill of the ArrayList but you can still add rectangles.

Chrisir

```auto

final color WHITE = color(255); 
final color BLACK = color(0); 
final color RED = color(255, 0, 0); 

ArrayList<PVector> listOfRectangles = new ArrayList();

void setup() { 
  size(800, 800); 

  // fill ArrayList with a few rectangles
  for (int i = 0; i<12; i++) {
    PVector pv = new PVector(40+int(random(9))*40, 40+int(random(9))*40);
    listOfRectangles.add(pv);
  }//for
}//function setup()

void draw() { 
  background(WHITE); 

  fill(BLACK);
  text("Click mouse to add cells", 
    13, 13);

  showArrayList();
}// function draw()

//--------------------------------------------------------------

void mousePressed() {
  listOfRectangles.add(new PVector(mouseX, mouseY));
}//func

void showArrayList() {
  for (int i = 0; i<listOfRectangles.size(); i++) { // short form would be: for(PVector pv : listOfRectangles) {
    fill(RED);
    PVector pv = listOfRectangles.get(i);
    rect(pv.x, pv.y, 
      24, 24);
  }//for
}//func
//

```

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 21, 2020, 8:03pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/11 "2020-05-21T20:03:20Z")

</div>

Ah ha! This is starting to become clearer now…  
Thank you!  
🤓

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 23, 2020, 1:01am UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/12 "2020-05-23T01:01:54Z")

</div>

I tried using one of your examples for starting with a partial array and then adding to it. Though am having a problem trying to translate it to altering a grid by subdividing random tiles. This is what I have – along with pseudocode in the mousePressed() section.  
Any pointers on how I should approach this is greatly appreciated.

🤓

```auto
ArrayList<PVector>resizeableGrid = new ArrayList();
float tile;

void setup() {
  size (600, 600);
  noLoop();

  tile = width/3;

  for (float x = 0; x <= width; x+=tile) {
    for (float y = 0; y <= height; y+=tile) {
      PVector pv = new PVector(x, y);
      resizeableGrid.add(pv);
    }
  }
}
void draw() {
  background(255);
  for (PVector pv : resizeableGrid) {
    stroke(0);
    rect(pv.x, pv.y, tile, tile);
  }
}
//void mousePressed() {

// for (int i = 0; i < resizeableGrid.size(); i++) { *** count thru array
// if (random(1)>0.5) { *** randomly select tiles to be subdivided
// ***pseudocode here to subdivide the tile in half each time mousePressed;***
// for (float x = ([i].x); x <= tile; x+=tile/2){
// for (float y = ([i].y); y <= tile; y+=tile/2){
// PVector pv = new PVector (x, y);
// subGrid.add (pv);
// }
// }
//}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 23, 2020, 9:09am UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/13 "2020-05-23T09:09:24Z")

</div>

In mousePressed ()

> [@debxyz](#):
>
> `PVector pv = new PVector (x, y);`

Please try to derive x and y from a previous rectangle and modify it like

```auto
x = resizeableGrid.get(i).x + tile/2;
y = resizeableGrid.get(i).y;
PVector pv = new PVector (x, y);

```

With `i` from the for loop that you already have

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 23, 2020, 9:27am UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/14 "2020-05-23T09:27:41Z")

</div>

Or use the short for-loop form ` for (PVector pv1 : points)` then you don’t need `.get()`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 23, 2020, 12:11pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/15 "2020-05-23T12:11:50Z")

</div>

Also in this scenario when you want to split up a rectangle into two parts, it might be worthwhile to consider making a class Rectangle. Then you can store its size and in the event of splitting reduce its size by half. And you can store a different color.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 23, 2020, 6:57pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/16 "2020-05-23T18:57:09Z")

</div>

> [@Chrisir](#):
>
> Please try to derive x and y from a previous rectangle and modify it like x = resizeableGrid.get(i).x + tile/2;

I will try this. Thank you!  
🙂

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [May 23, 2020, 7:11pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/17 "2020-05-23T19:11:43Z")

</div>

> [@Chrisir](#):
>
> it might be worthwhile to consider making a class Rectangle.

Yes, I will likely end up doing that.

Though, at this point, since I don’t yet have a good understanding of what is happening with the syntax **OR** what is happening under the hood in terms of add, get I thought it might be easier to understand if I limit myself to solving with PVector only. And then move on to creating separate object classes.  
However perhaps my reasoning is faulty in following that rationale… This is a case of I don’t know what I don’t know…  
🤓

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [May 23, 2020, 7:38pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/18 "2020-05-23T19:38:35Z")

</div>

> [@debxyz](#):
>
> Can someone/anyone direct me to any additional **beginner-coder-friendly tutorial(s) on ArrayLists**?

Shameless self-promotion:

> **[ArrayLists](https://happycoding.io/tutorials/processing/arraylists)**
>
> Learn how to use ArrayLists in Processing.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 23, 2020, 8:37pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/19 "2020-05-23T20:37:09Z")

</div>

here is a Sketch that adds cells as discussed (almost)

Chrisir

```auto

ArrayList<PVector>resizeableGrid = new ArrayList();
float tile;

void setup() {
  size (600, 600);

  tile = width/3;

  for (float x = 0; x <= width; x+=tile) {
    for (float y = 0; y <= height; y+=tile) {
      PVector pv = new PVector(x, y);
      resizeableGrid.add(pv);
    }
  }
}

void draw() {
  background(255);
  for (PVector pv : resizeableGrid) {
    stroke(0);
    rect(pv.x, pv.y, tile, tile);
  }
}

void mousePressed() {
  // *** count thru array
  for (int i = 0; i < resizeableGrid.size(); i++) {
    PVector pv = resizeableGrid.get(i);

    if (mouseX>pv.x&&
      mouseX<pv.x+tile&&
      mouseY>pv.y&&
      mouseY<pv.y+tile) {
      // add a cell
      PVector pvNew = new PVector (pv.x+tile/2, pv.y);
      resizeableGrid.add (pvNew);
      return;
    }//if
  }//for
}//func
//

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 23, 2020, 8:46pm UTC](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025/20 "2020-05-23T20:46:51Z")

</div>

> [@debxyz](#):
>
> And then move on to creating separate object classes.

ArrayList is really like a more flexible array.

I think you can move on to ArrayList of a class now.

[Next page](https://discourse.processing.org/t/looking-for-more-resources-about-arraylists/21025.md?page=2)