# Grid From Objects - Array Out of Bounds

**URL:** <https://discourse.processing.org/t/grid-from-objects-array-out-of-bounds/27964>\
**Category:** Coding Questions\
**Created:** [February 20, 2021, 9:42pm UTC](https://discourse.processing.org/t/grid-from-objects-array-out-of-bounds/27964 "2021-02-20T21:42:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![L0RDZed](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l0rdzed/32/1136_2.png) [@L0RDZed](https://discourse.processing.org/u/L0RDZed)\
**Post date:** [February 20, 2021, 9:42pm UTC](https://discourse.processing.org/t/grid-from-objects-array-out-of-bounds/27964/1 "2021-02-20T21:42:13Z")

</div>

Hey, I’m trying to use a for loop to create a grid of objects and getting an out-of-bounds issue. I can’t get _int k_ to increment through the inner loop…actually, when I place it in the **outer for loop** it increments and produces the objects with the specified amount but it doesn’t create the grid. It will create a single column or row instead.

Thanks,

///////////////////// main//////////////////////

```auto
Image [] animations = new Image[4];

void setup() {
  size(640, 640);
  frameRate(30);

  PImage [] seq = new PImage[15];
  for (int i = 0; i < seq.length; i++) {
    seq[i] = loadImage("anthro/anthro" + nf(i+1, 2) + ".jpg");
    seq[i].resize(width/animations.length, height/animations.length);
  }

  float x = 0;
  float y = 0;
  int k = 0;

  ////grid.

  for (int i = 0; i<animations.length; i++) {
    for (int j = 0; j<animations.length; j++) {
      animations[k] = new Image(seq, x+i*seq[0].width, y+j*seq[0].height);

       k++;
    }
   

  }

}

void draw() {

  background(0);

  for (int i = 0; i<animations.length; i++) {

    animations[i].display();
    animations[i].next();

  }
}

```

////////////////class////////////////////////////////

```auto
class Image {

  PImage[] images;

  float x;
  float y;

  float index = 0;
  float speed;

  Image(PImage[] images_, float x_, float y_) {

    images = images_;
    x = x_;
    y = y_;
    speed = 1;
    index = random(0,14);
  }

  void next() {

    index += speed;
    if (index>=images.length) {
      index -= images.length;
    };

  }

  void display() {

    int imageIndex = int(index);
    image(images[imageIndex], x, y);

 
  }

  void move() {
    x += speed;
    if (x>=width) {
      x = -images[0].width;
    }
 
  }
}

```

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [February 21, 2021, 7:16am UTC](https://discourse.processing.org/t/grid-from-objects-array-out-of-bounds/27964/2 "2021-02-21T07:16:18Z")

</div>

You are using a nested for loop with a animation essentially looking up 16 indexes, or animation.length squared. You should use a single loop or change the size of the animation array.

Keep in mind you are using this `x+i*seq[0].width`

That nested for loop seems like it fits the seq size though

---

<div class="post-metadata">

**Author:** ![L0RDZed](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/l0rdzed/32/1136_2.png) [@L0RDZed](https://discourse.processing.org/u/L0RDZed)\
**Post date:** [February 21, 2021, 2:12pm UTC](https://discourse.processing.org/t/grid-from-objects-array-out-of-bounds/27964/3 "2021-02-21T14:12:48Z")

</div>

Thanks! When you pointed out that I was squaring values by using a nested loop it pointed me in the right direction. Turned out I was missing a few pieces… namely: _a col_ value and _a row_ value.

I’ve never thought about using one for loop to do a grid. I am going to experiment with it. Found a post on the old forum about using a combo of _%_ and _/_

Updated _setup_ below for reference.

```auto
Image [] animations;

void setup() {
  size(640, 360);
  frameRate(30);
  int col = width/4;
  int row = height/4;
  int count = col * row;

  animations = new Image[count];
  
  PImage [] seq = new PImage[15];
  for (int i = 0; i < seq.length; i++) {
    seq[i] = loadImage("anthro/anthro" + nf(i+1, 2) + ".jpg");
    seq[i].resize(col, row);
  }

  float x = 0;
  float y = 0;
  int k = 0;

  ////grid

  for (int i = 0; i<col; i++) {
    for (int j = 0; j<row; j++) {
   
      animations[k] = new Image(seq, x+i*seq[0].width, y+j*seq[0].height);
   
      k++;
    }
  }

}

```