shapetween tweening multiple elements in an array

Question

I am working on a project in which I am trying to visualize a log of soccer teams moving up and down in the ranks as a year goes by.

I saved the images representing the teams into an array and called it in the draw function. Now I want to tween their movements using shapetween but I don't know where to initialize the x and y positions of the teams. If I try to initialize them globally I get this error message:

Cannot reference a field before it is defined

And when I try to initialize the x and y values locally it says they need to be initialized. My code is below and I am running Processing 2.0b7 on a Mac using OS X, and oh though it may not show I have added the shapetween library to the sketch:

 PImage[] images = new PImage[17];
    PImage img = new PImage();
    float x1; //Current x-coord
    float y1; //Current y-coord
    float x2;
    float y2;
    float x = lerp(x1, x2, ani.position());
    float y = lerp(y1, y2, ani.position());
    Tween ani;
    void setup() {
      size(600, 1600);
      frame.setResizable(true);
      for (int i = 0; i < images.length; i++) {
        images[i] = loadImage(i + ".png");
      }
      for (int i = 0; i < images.length; i++) {
        images[i].resize(200, 60);
      }
      ani = new Tween(this, 2, Tween.SECONDS);
      background(0);
    }
    void draw() {
      image(images[0], 400, 100);
      image(images[1], 100, 100);
      image(images[2], 100, 160);
      image(images[3], 100, 220, 100, 160);
      image(images[4], 100, 280);
      image(images[5], 100, 340);
      image(images[6], 100, 400);
      image(images[7], 100, 460);
      image(images[8], 100, 520);
      image(images[9], 100, 580);
      image(images[10], 100, 640);
      image(images[11], 100, 700);
      image(images[12], 100, 760);
      image(images[13], 100, 820);
      image(images[14], 100, 880);
      image(images[15], 100, 940);
      image(images[16], 100, 900);
    }
    void mousePressed() {
      ani.start();
    }

Answer 1

Your problem is that you cannot reference 'ani' before your declare it and construct it. I.e, the

float x = lerp(x1, x2, ani.position());
float y = lerp(y1, y2, ani.position());

lines have to go after you have declared and constructed:

Tween ani;
void setup() {
  ani = new Tween(this, 2, Tween.SECONDS);
}

Otherwise, you are pointing to something that doesn't exist yet.

Try this code here:

PImage[] images = new PImage[17];
PImage img = new PImage();
float x1, y1, x2, y2, x, y;
Tween ani;

void setup() {
  size(600, 1600);
  frame.setResizable(true);
  for (int i = 0; i < images.length; i++) {
    images[i] = loadImage(i + ".png");
  }
  for (int i = 0; i < images.length; i++) {
    images[i].resize(200, 60);
  }
  ani = new Tween(this, 2, Tween.SECONDS);
  // values to x1, x2, y1 and y2 should be assigned here
  x = lerp(x1, x2, ani.position());
  y = lerp(y1, y2, ani.position());
  background(0);
}
void draw() {
  image(images[0], 400, 100);
  image(images[1], 100, 100);
  image(images[2], 100, 160);
  image(images[3], 100, 220, 100, 160);
  image(images[4], 100, 280);
  image(images[5], 100, 340);
  image(images[6], 100, 400);
  image(images[7], 100, 460);
  image(images[8], 100, 520);
  image(images[9], 100, 580);
  image(images[10], 100, 640);
  image(images[11], 100, 700);
  image(images[12], 100, 760);
  image(images[13], 100, 820);
  image(images[14], 100, 880);
  image(images[15], 100, 940);
  image(images[16], 100, 900);
}
void mousePressed() {
  ani.start();
}

Btw, you can do better than using one line per image call in the draw loop. Give a for loop a try man!