shapetween tweening multiple elements in an array

siyafrica

shapetween tweening multiple elements in an array

in Contributed Library Questions • 8 months ago

Hi guys

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();
}

Replies(3)

PhiLho

Re: shapetween tweening multiple elements in an array

8 months ago

I suppose you have trouble with:

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

These lines execute before setup() is run, so, before ani is initialized.
Just declare them:
float x;
float y;
and initialize them in setup() or in draw(), depending on the need:

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

siyafrica

Re: shapetween tweening multiple elements in an array

8 months ago

Thanks. I did so but I don't see the tween. The images move places when I test the sketch but the tween doesn't show. Please advise.

ijeoma

Re: Re: shapetween tweening multiple elements in an array

8 months ago

It's easier to use an animation library like ijeomamotion which will auto update the variables... Here's an example using ijeomamotion. For more examples check out https://github.com/ekeneijeoma/ijeomamotion.

import ijeoma.motion.tween.*;
import ijeoma.motion.*;
TeamImage[] teamImages;
int teamCount = 17;
float imageW, imageH;
void setup() {
size(800, 600);
Motion.setup(this);
imageW = 100;
imageH = (float)height/teamCount;
teamImages = new TeamImage[teamCount];
for (int i = 0; i < 17; i++) {
//TeamImage ti = new TeamImage("Team "+i, 0, i*imageH, "teamImage.jpeg");
TeamImage ti = new TeamImage("Team "+i, 0, i*imageH, imageW, imageH);
ti.moveTo(random(width-imageW));
teamImages[i] = ti;
}
}
void draw() {
background(255);
for (TeamImage ti : teamImages)
ti.draw();
}
void keyPressed() {
for (TeamImage ti : teamImages)
ti.moveTo(random(width-imageW));
}
class TeamImage {
String name;
float x, y;
float w, h;
PImage image;
Tween xTween;
TeamImage(String name, float x, float y, String file) {
this.name = name;
this.x = x;
this.y = y;
this.image = loadImage(file);
xTween = new Tween(this, "x", 0, 100);
}
TeamImage(String name, float x, float y, float w, float h) {
this.name = name;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
xTween = new Tween(this, "x", 0, 100);
}
void draw() {
if (image == null) {
fill(0);
rect(x, y, w, h);
fill(255);
textAlign(CENTER, CENTER);
text(name, x+w/2, y+h/2);
}
else
image(image, x, y);
}
void moveTo(float x) {
xTween.get("x").setEnd(x);
xTween.play();
}
}

Animation library for timeline/keyframe based tweens and more: www.ekeneijeoma.com/processing/ijeomamotion/

Top Reply