Looking for more resources about ArrayLists

Processing Beginners
#12

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.

:nerd_face:

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);
//    }
//  }
//}
1 Like
#13

In mousePressed ()

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

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

2 Likes
#14

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

1 Like
#15

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.

1 Like
#16

I will try this. Thank you!
:slight_smile:

#17

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…
:nerd_face:

#18

Shameless self-promotion:

4 Likes
#19

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

Chrisir


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
//
1 Like
#20

ArrayList is really like a more flexible array.

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

#21

here is a non-running part from a much bigger Sketch that shows

  • how to show bullets (it’s from a player who shoots) and
  • how to remove the bullets (in a backward for-loop) that are dead (because they left the screen or hit something, then the variable dead in the class Explosion is set to true). The core idea is to set a variable dead and don’t display the bullet when dead is true. Then in the backward for-loop we remove the dead ones finally from the ArrayList.

Chrisir

void ExplosionManager() {

  // this is a new for loop.
  // Actually for the Shrapnels.
  for (Explosion m : missiles) {
    m.decreaseLife(); // call the decrease life (for explosion)
    m.fly();             // call the "fly" method of the missile
    m.display();      // call the "display" method of the missile
  }
  //
  // remove dead ones (you need to have a conventional for-loop here, backwards)
  for (int i=missiles.size()-1; i>=0; i--) {
    Explosion m = (Explosion) missiles.get(i);
    if (m.dead) {
      missiles.remove(i);
    }
  }
} // func
//
#22

Somehow I missed your site in the returned results when I googled ArrayLists previously…
Thank you for this link!! It definitely adds to my understanding.
:nerd_face:

2 Likes
#23

My thinking is to make grids that are contained within selected grid cells.
Pseudocode:
1/ make a base grid of cells
2/ then loop thru the base grid cells
3/ determine which grid cells would then be subdivided into a grid of smaller grid cells via random, modulo, probability, or another determinant
4/ then make a grid of cells that is contained within a cell’s width and height

I think I understand how to do the first three steps. I’m not sure how to implement step #4.

#24

This code does run. And is starting to do what I want but not exactly.

  • The subdivided cells only remain during mousePressed, but I want the subdivisions to remain after mouse is pressed.

Code changes are in the mousePressed section.
:thinking: :thinking: :thinking:

ArrayList<PVector>resizeableGrid = new ArrayList();

ArrayList<PVector>subGrid = 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

  ArrayList<PVector>subGrid = new ArrayList();

  for (int i = 0; i < resizeableGrid.size(); i++) {
    PVector pv = resizeableGrid.get(i);

    // add a cell
    for (float x = 0; x <= width; x+=tile/2) {
      for (float y = 0; y <= height; y+=tile/2) {
        PVector pv2 = new PVector(x, y);
        subGrid.add(pv2);
      }
    }
    rect (pv.x/2, pv.y/2, tile/2, tile/2);
  }//for
}//func
//
1 Like
#25

How to store the size of the rectangles

You could make a second parallel ArrayList holding the size of it‘s cells (the two ArrayLists being a way to hold data; this you would do later with a class and objects stored in the ArrayList)

This line

This line:

This line should better add the rect to the two Arraylists instead, so a new rect would be added to the ArrayLists and then be displayed in draw() throughout.

  • When you display a rectangle in mousePressed it flashes only briefly (when you use background() in draw()). So better add it to the lists that are displayed in draw() permanently.

Then in draw() use both lists to display rects with position and size.

Chrisir

1 Like
#26

that could be done via mouse click as well (to select a cell to subdivide)

This new grid of cells could just go into the same ArrayList (if you store the rectangle’s size also). No matter whether you store the data in two parallel ArrayLists or in one ArrayList with a class: When you init the new sub-grid within a previous cell just assign the new sub-cells the right position and size. No need to come up with a new data structure or a new ArrayList.

Even setup and draw stay the same. Just how you sub-divide is new.

1 Like
#27

This is definitely helpful info as I had been wondering about whether I need a second ArrayList to store the sub-divides. Thank you so much!!
:nerd_face:

1 Like
#28

I don’t think you want me to do this for you

So I just wait what you come up with

1 Like
#29

This is where I’ve arrived. MousePressed is set to add subGrid cells with each click.

However this is currently not displaying properly. And I can’t figure out why.
In this case, I am aiming to have no extra space between the subGrid cells.

The color is not really important, only being used as an indicator of subCell positions.

My primary question at this point is why the subCells are not always abutting each other? Some are and others are not…
:thinking:

ArrayList <GridCell> grid;
ArrayList <SubGrid> sub;
float w;
float y = 0;

void setup() {
  size (800, 400);
  noLoop();
  background (255);

  grid = new ArrayList <GridCell>();
  sub = new ArrayList <SubGrid>();

  w = width/8; 
  float h = height;

  for (float x = 0; x <= width; x+=w) {
    grid.add(new GridCell(x, y, w, h));
  }
}
void draw() {
  
  float h = width/8;

  for (int i = 0; i < grid.size(); i++) {
    grid.get(i).display();
  }  

  for (int j = 0; j < sub.size(); j++) {
    sub.get(j).display();
  }
}
void mousePressed() {

  sub = new ArrayList <SubGrid>();
  
  float w = width/8;
  float h = w;

  for (int i = 0; i < grid.size(); i++) {
    sub.add(new SubGrid(grid.get(i).x, y, w, h));
  }
  redraw();
  y = y+100;
}

MAIN GRID CLASS //////////////////////////////////

class GridCell{
  float x, y;
  float w, h;
  
  GridCell(float x_, float y_, float w_, float h_){
    x = x_;
    y = y_;
    w = w_;
    h = h_;
  }
  
  void display(){
    stroke(0);
    noFill();
    rect (x, y, w, h);
  }

SUBGRID CLASS //////////////////////////////

class SubGrid {
  float x, y;
  float w, h;

  SubGrid(float x_, float y_, float w_, float h_) {
    x = x_;
    y = y_;
    w = w_;
    h = h_;
  }

  void display() {
    stroke(0);
    fill(color(random(255), random(255), random(255)), 50);
    rect (x, y, w/2, h/2);
    rect (x, y/2, w/2, h/2);
    rect (x/2, y, w/2, h/2);
    rect (x/2, y/2, w/2, h/2);
  }
}
1 Like
#30

Remark

sub = new ArrayList <SubGrid>(); //

this deletes the whole thing

Remark

without background (255); at start of draw() you see the accumulated results of all drawings.

You can’t really see what the last mousePressed did!

Remark

I think this doesn’t do what you want:

    rect (x, y, w/2, h/2);
    rect (x, y/2, w/2, h/2);
    rect (x/2, y, w/2, h/2);
    rect (x/2, y/2, w/2, h/2);

for example, the rects are called with

0.0 0.0
100.0 0.0
200.0 0.0
300.0 0.0
400.0 0.0
500.0 0.0
600.0 0.0
700.0 0.0
800.0 0.0

in the first round.

but e.g. this line rect (x/2, y, w/2, h/2); results in

   rect (0, 0, w/2, h/2);
   rect (50, 0, w/2, h/2);
   rect (100, 0, w/2, h/2);
   rect (150, 0, w/2, h/2);

so it’s far more left than the initial rect (x, y, w/2, h/2);

That’s why you see the gaps on the right.

Here is my version of the code section (one cell is divided into four cells):

    fill( 255, 0, 0 );
    rect (x, y, w/2, h/2);
    fill( 0, 255, 0);
    rect (x, y+h/2, w/2, h/2);
    fill( 0, 0, 255);
    rect (x+w/2, y, w/2, h/2);
    fill( 255, 0, 255);
    rect (x+w/2, y+h/2, w/2, h/2);

Full Sketch

Full Sketch to demonstrate some of the above

ArrayList <GridCell> grid;
ArrayList <SubGrid> sub;
float w;
float yNew = 0;

void setup() {
  size (800, 400);
  background (255);

  grid = new ArrayList <GridCell>();
  sub = new ArrayList <SubGrid>();

  w = width/8; 
  float h = height;

  for (float x = 0; x <= width; x+=w) {
    grid.add(new GridCell(x, 0, 
      w, h-=9));
  }
}

void draw() {
  background (255);

  //float h = width/8;

  for (int i = 0; i < grid.size(); i++) { // can use short form of for-loop here
    grid.get(i).display();
  }  

  for (int j = 0; j < sub.size(); j++) {// can use short form of for-loop here
    sub.get(j).display();
  }
}

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

void mousePressed() {

  sub = new ArrayList <SubGrid>(); // this deletes the whole thing 

  float w = width/8;
  float h = w;

  for (int i = 0; i < grid.size(); i++) {
    if (mouseX>grid.get(i).x&&
      mouseX<grid.get(i).x+w ) {
      sub.add(new SubGrid(grid.get(i).x, yNew, w, h));
    }
  }

  yNew = yNew+55;
}

//MAIN GRID CLASS //////////////////////////////////

class GridCell {
  float x, y;
  float w, h;

  GridCell(float x_, float y_, 
    float w_, float h_) {
    x = x_;
    y = y_;
    w = w_;
    h = h_;
  }

  void display() {
    stroke(0);
    noFill();
    rect (x, y, 
      w, h);
  }
}//class 

//SUBGRID CLASS //////////////////////////////

class SubGrid {

  float x, y;
  float w, h;
  color col1 = color(random(255), random(255), random(255), 50); // set random color at the start of the class, so we don't have a flickering color
  color col2 = color(random(255), random(255), random(255), 50); // set random color at the start of the class, so we don't have a flickering color

  SubGrid(float x_, float y_, 
    float w_, float h_) {
    x = x_;
    y = y_;
    w = w_;
    h = h_;
  }

  void display() {
    stroke(0);
    fill( 255, 0, 0 );
    rect (x, y, w/2, h/2);
    fill( 0, 255, 0);
    rect (x, y+h/2, w/2, h/2);
    fill( 0, 0, 255);
    rect (x+w/2, y, w/2, h/2);
    fill( 255, 0, 255);
    rect (x+w/2, y+h/2, w/2, h/2);
  }
}//class
//

Chrisir

2 Likes
#31

Ah ha!! Ok now I see what’s going on. I was having a hard time trying to figure out how to anchor the x, y of the subGrid cells to the main grid cells. I can move forward with this now.
Thank you !!!
:nerd_face:

1 Like