Grid From Objects - Array Out of Bounds

Processing Coding Questions
1

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//////////////////////

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////////////////////////////////

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;
    }
 
  }
}
2

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

1 Like
3

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.

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++;
    }
  }



}
2 Likes