ijeomamotion TweenSequence issues

akiersky

ijeomamotion TweenSequence issues

in Contributed Library Questions • 2 years ago

Hi All!

Im using the ijeomamotion tween library to handle the movement of some PGraphic objects on the stage. I am using the TweenSequence class to setup three (intro, across, and outro) tweens to play in sequence for each object. have three different objects I want to animate so I have an Array of TweenSequences that holds each of the sequences for the different objects. each object is taking a slightly different path and has slightly different timing, so it is important to keep them septate. then in the draw loop I loop through the tweensequences and move the object they are attached to.

here's how I set one of them up:

ts[0] = new TweenSequence();
ts[0].appendChild(new Tween(0, 33, 2, MotionConstant.SECONDS, 0, MotionConstant.QUART_EASE_OUT));
ts[0].appendChild(new Tween(33, 66, 10, MotionConstant.SECONDS, 0, MotionConstant.SINE_EASE_BOTH));
ts[0].appendChild(new Tween(66, 100, 2, MotionConstant.SECONDS, 0, MotionConstant.QUART_EASE_IN));

and in my draw loop I grab the current tween of the sequence and the position of that tween, then calculate where the object should be and finally draw the object to stage.

float curTime = ts[i].getCurrentTween().getPosition();
println("Current time : "+curTime);
float pos = tweenStart[i]+(startEndDif[i]*(curTime/100));
image(EstoryArray[sn], pos, tweenY);

the problem is, it seems like on occasion, the current tween of the sequence gets reset before the position is reset. here's the println trace that is happening to describe the problem:

...
//all going well, animating nicely
Current time : 32.871094
Current time : 32.9472
Current time : 32.983295
Current time : 32.9967
Current time : 32.999794
//about to have problems
Current time : 66.0 //this is the end value for the next tween in the sequence
Current time : 66.0 //and again
//back to normal here
Current time : 33.03256
Current time : 33.073227
Current time : 33.130108
Current time : 33.20314
Current time : 33.29226
...

if it happened once, I could maybe understand maybe it sets the current tween on one draw loop then grabs the value the next loop, but for it to happen twice in a row seems strange.

any thoughts?

thanks!

Replies(11)

ijeoma

Re: ijeomamotion TweenSequence issues

2 years ago

It's difficult to see what youre trying without seeing more code. But from what I can see you should be using the tweensequence to tween positions and not times. Using an array of begin and end positions to calculate positions using the tween maybe be more difficult than using either tweensequences with delays or a timeline. I'd say you should use the timeline object with keyframes for 0, 33, 66 and etc.

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

hi ijeoma!

thanks for the ideas, but im not sure how to set up the timeline object with keyframes, the example you have on your website does not seem to work. could you give an example?

thanks!

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

Still trying to get this working smoothly, looking at the example here: http://www.openprocessing.org/visuals/?visualID=13842 it looks like it is having a similar problem to mine, where it gets a little glitchy in the middle of the tweens. Like my trace above, it seems like when the tween is progressing, sometimes the tween returns the max/minimum value for that tween in the middle, causing it to jump from complete and back to where it should be.

I tried the Timeline KeyFrame example at http://www.ekeneijeoma.com/processing/ijeomamotion/examples/Timeline_KeyFrame/Timeline_KeyFrame.pde and I get a 'Cant Find a class or type named "KeyFrame"' error.

it seems like quite a bit has changed in the class with no updates to the examples? im not sure how to handle this. here's a minimal example I am trying to get working:

import ijeoma.motion.*;
import ijeoma.motion.timeline.*;
import ijeoma.motion.tween.*;
Timeline t;
int obj;
TweenObject[] objects;
void setup() {
objects = new TweenObject[10];
obj = 0;
for (int i = 0; i< objects.length; i++){
objects[i] = new TweenObject(i);
}
Motion.setup(this);
setupTweens();
t.play();
}
void setupTweens() {
t = new Timeline();
TimelineKeyFrame kf1 = new TimelineKeyFrame(t, "ONE", 0);
TimelineKeyFrame kf2 = new TimelineKeyFrame(t, "TWO", 33);
TimelineKeyFrame kf3 = new TimelineKeyFrame(t, "THREE", 66);
kf1.addChild(new Tween(0, 100, 2, MotionConstant.SECONDS, 0, MotionConstant.QUART_EASE_OUT));
kf2.addChild(new Tween(0, 100, 10, MotionConstant.SECONDS, 0, MotionConstant.SINE_EASE_BOTH));
kf3.addChild(new Tween(0, 100, 2, MotionConstant.SECONDS, 0, MotionConstant.QUART_EASE_IN));
t.addKeyFrame(kf1);
t.addKeyFrame(kf2);
t.addKeyFrame(kf3);
}
void draw() {
//what do I put to position the graphic at the timeline's position??
PGraphics g = objects[0].giveGraphic();
image(g, 5, 5);
}

Class TweenObject:

class TweenObject {
int id;
float xx;
float yy;
PGraphics graphic;
TweenObject(int number) {
id = number;
graphic = makeGraphic();
}
PGraphics makeGraphic () {
PGraphics g = createGraphics(20, 20, JAVA2D);
g.beginDraw();
g.noStroke();
g.fill(0);
g.rect(0,0,20,20);
g.endDraw();
return g;
}
PGraphics giveGraphic () {
return graphic;
}
}

Any Ideas?

thanks,

ijeoma

Re: Re: ijeomamotion TweenSequence issues

2 years ago

I ran the example from the latest library download on the library website and didnt have problems but it looks like you mayve tried to run the example from openprocessing which doesnt work with the latest download. I havent updated the openprocessing sketches but I did update the examples and reference that is in the latest download which is ijeomamotion 3.9.1. Anyhow I made another more basic example which uses timeline keyframes to fade in columns of rect objects in a grid layout. Let me know if it helps...

import ijeoma.motion.*;
import ijeoma.motion.timeline.*;
import ijeoma.motion.tween.*;
PFont font;
Timeline timeline;
Rect[] rects;
int rows = 3;
int columns = 3;
void setup() {
size(200, 200);
font = createFont("Arial", 36);
Motion.setup(this);
timeline = new Timeline();
int duration = 50;
rects = new Rect[rows*columns];
float rectW = (float)height/columns;
float rectH = (float)width/rows;
for (int i = 0; i< columns; i++) {
KeyFrame keyFrame = new KeyFrame(str(i), i*duration);
for (int j = 0; j< rows; j++) {
Rect rect = rects[i+columns*j] = new Rect(i*rectW, j*rectH, rectW, rectH);
Tween tween = new Tween();
tween.addProperty(new Property(rect, "rectA", 0, 255));
tween.setDuration(duration);
keyFrame.addChild(tween);
}
timeline.addKeyFrame(keyFrame);
}
timeline.play();
}
void draw() {
background(255);
for (int i = 0; i < rects.length; i++)
rects[i].draw();
KeyFrame[] currentkeyFrames = timeline.getCurrentKeyFrames();
// println(currentkeyFrames);
for (int i = 0; i < currentkeyFrames.length; i++) {
String keyFrameName = "time: " + (int)timeline.getTime()+" / "+(int)timeline.getDuration()+" keyframe: "+currentkeyFrames[0].getName();
noStroke();
fill(255, 0, 0);
textFont(font, 12);
text(keyFrameName, 12, height-12);
}
}
void keyPressed() {
timeline.play();
}
//Note that both the class and its variables you want to tween have to be public
public class Rect {
int id;
public float rectX, rectY, rectW, rectH;
public float rectA;
Rect(float _rectX, float _rectY, float _rectW, float _rectH) {
rectX = _rectX;
rectY = _rectY;
rectW = _rectW;
rectH = _rectH;
rectA = 0;
}
void draw() {
stroke(0,rectA);
fill(255);
rect(rectX, rectY, rectW, rectH);
}
}

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

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

Hello again,

Sorry I didnt' get back sooner, busy programming! :)

I still can not find the KeyFrame Object, but it seems like the TimelineKeyFrame may be the same thing, or at least works similarly enough to make it work. Here's my end solution:

I call makeTween() with the array key and a duration property, which in turn grabs the height of the object and figures out the in/out stops based on a couple of variables. This creates a set of tweens in a matched array to the objects, which can directly move the objects y value (parameter tweening was a great solution):

void makeTween(int i, int duration) {
float del = random(5);
float sH = myArray[i].h;
float pH = 900;
float travel = (sH/pH)*550;
float inStop = pH-travel;
float outStop = inStop-travel;
Etl[i] = new Timeline();
TimelineKeyFrame kf1 = new TimelineKeyFrame(Etl[i], "IN", 0);
TimelineKeyFrame kf2 = new TimelineKeyFrame(Etl[i], "PERSIST", 2+del);
TimelineKeyFrame kf3 = new TimelineKeyFrame(Etl[i], "OUT", 2+del+duration);
kf1.addChild(new Tween(myArray[i], "yy", parent.height, inStop, 2, MotionConstant.SECONDS, del, MotionConstant.QUART_EASE_OUT));
kf2.addChild(new Tween(myArray[i], "yy", inStop, outStop, duration, MotionConstant.SECONDS, 0, MotionConstant.SINE_EASE_BOTH));
kf3.addChild(new Tween(myArray[i], "yy", outStop, -myArray[i].h, 2, MotionConstant.SECONDS, 0, MotionConstant.QUART_EASE_IN));
Etl[i].addKeyFrame(kf1);
Etl[i].addKeyFrame(kf2);
Etl[i].addKeyFrame(kf3);
}

Then I am able to draw each object with it's changed y value each draw loop (giveGraphic() returns a PGraphic of the object):

public void draw() {
if (tweensReady) {
if (secondFrame) {//first frame of tweens produces odd results???
//println("yy = "+myArray[playing].yy+" :: "+myArray[playing].h+" :: "+playing);
//external story draw
image(myArray[playing].giveGraphic(), myArray[playing].xx, myArray[playing].yy);
//if (myArray[playing].yy <= -myArray[playing].h) {
if(!Etl[playing].isPlaying){
playing++;
if (playing== Etl.length) {
playing= 0;
}
Etl[Eplaying].play();
}
}
secondFrame = true;
}
}

the only hitch is that I have to wait for the second frame of the tween, it seems like the first frame puts it somewhere in the middle of the tween? strange results with that, but skipping the first one seems to fix it.

thanks for the help! and for the great lib!

aaron

ijeoma

Re: ijeomamotion TweenSequence issues

2 years ago

TimelineKeyFrame is named Keyframe in the newest version so you should try downloading and installing it again. To see what version is installed call println( Motion.VERSION);. Also there may be some bugs which were fixed in the newest version which may solve the problems your having. So first install the newest version then try to run the code I posted again.

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

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

Aah, I did have an old version. good call,

Ive got the new version now, but in the process of updating my tween setups for the keyframes, im getting some undefined constructor errors. here's how I am trying to do it:

new Tween("tI", objectArray[i], "yy", parent.height, 600, 2, 2, MotionConstant.QUART_OUT)

I also tried with the Property object:

new Tween("tI", new Property(EstoryArray[i], "yy", parent.height, inStop), 2, del, MotionConstant.QUART_OUT)

I see in the docs that it is expecting a String[] for the properties, which seems unnecessary since I only have one object, Do I just need a single object String[]?

thanks,

aaron

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

Ok, I think I got it by breaking up the setup functions:

KeyFrame kf1 = new KeyFrame("IN", 0);
Property[] p1 = {new Property(EstoryArray[i], "yy", parent.height, inStop)};
Tween t1 = new Tween("t1", p1, 2, del, MotionConstant.QUART_OUT);
t1.setTimeMode(MotionConstant.SECONDS); //dosen't seem to work??

the only thing I am having a problem with now is setting it to seconds. the set time mode does not seem to affect it as expected. is there a new way to do this? I tried building it right into the Tween init, but that gives an error.

Thanks,

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

Aah, I needed to set the timeline to use seconds too... now it is mostly working.

The only problem I am having now is during the delay of the first KeyFrame, it seems when I set the delay on the tween, the timeline starts, but places the object about half way up (looks like the end of the second tween/beginning of the third tween) during that delay. I can set the delay on the timeline, but that seems to sometimes never start?? I can't tell, but the objects never appear.

ijeoma

Re: ijeomamotion TweenSequence issues

2 years ago

Delays arent meant to be used in a Timeline object. If you want a tween to play after calculate the time in seconds when you want it to play. Then either use the insertChild shortcut call to add a tween at X seconds to the Timeline or create a keyframe at that X seconds and add the tween to it. Look at these examples to see how to use timelines

and also these

to see how you to use properties. And let me know if you have more problems.

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

akiersky

Re: ijeomamotion TweenSequence issues

2 years ago

So I tried the new version of the lib and just ran in to some issues with other parts of my sketch, so Im going back to the old lib for now, to not change course mid project.

I noticed it takes quite a few more lines to set up the new version of the Timeline with KeyFrames, whereas before I was able to make a new keyframe and build the entire tween in the setup, now I must build a tween, add some properties then add that to the keyframe. I like the old version of only one line, it was about a third of the code to setup.

Thanks for the help!

Top Reply