We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexProcessing DevelopmentLibraries,  Tool Development › New animation library w/ timeline/keyframes tweens
Pages: 1 2 3 
New animation library w/ timeline/keyframes tweens (Read 22027 times)
Re: New animation library w/ timeline/keyframes tweens
Reply #30 - Apr 22nd, 2010, 3:35pm
 
Okay, looking forward to it  ;)

Maybe you can help here.. there seems to be an problem with the "MotionConstant.REVERSE". It kinda like jumps to its "Start size" before reversing..


import ijeoma.motion.tween.*;
import ijeoma.motion.*;
import ijeoma.motion.easing.*;

Tween shdX,shdY,shd;

void setup() {

   size(400,250);
   frameRate(30);
   smooth();

   shdX = new Tween(this, "shadow_x", 50, 10, 50);
   shdY = new Tween(this, "shadow_y", 50,10, 50);

 TweenGroup shd = new TweenGroup(this, new Tween[]{ shdX, shdY });
 
 shd.repeat(MotionConstant.REVERSE);
 shd.play();
}



void draw(){

 background(255);
 fill(50);
 noStroke();
 ellipse(200, 100,shdX.getPosition(), shdY.getPosition());

}



sorry if it´s all unclear ... me still learning processing.

thanx
dunn

...using the new version of Processing 1.1
Re: New animation library w/ timeline/keyframes tweens
Reply #31 - Apr 23rd, 2010, 4:15pm
 
Thanks for finding this native77; it seems there are some more bugs in TweenGroup repeat(TweenGroup.REVERSE) than I'd thought! It shouldn't be that difficult to fix though; I should have time this weekend. But until this has been fixed you can do the same animation using "ungrouped" Tween objects:

Code:

import ijeoma.motion.tween.*;

Tween shadow;

void setup() {
 size(400,250);;
 smooth();

 shadow = new Tween(this, "shadow", 50, 10, 50);
 shadow.repeat(Tween.REVERSE);
 shadow.play();
}



void draw() {
 background(255);
 fill(50);
 noStroke();
 ellipse(200, 100, shadow.getPosition(), shadow.getPosition());
}

Re: New animation library w/ timeline/keyframes tweens
Reply #32 - Jun 1st, 2010, 7:57pm
 
Fairly new to Processing, but love the library.  I have been struggling a little though trying to use the setBegin and setEnd methods.  In my sketch I am trying to let the user define the start,end, and duration of 3 tweens.  These should probably be in a TweenGroup or using motion parameters, but like I said fairly new and trying to understand from the bottom up.  I have no problem altering the duration using setDuration, but neither of the other methods seem to work.  In fact, now I am seeing even odder behavior where the Tween seems to build from one execution to another.

Here is my code:
import controlP5.*;
import ijeoma.motion.tween.Tween;
import ijeoma.motion.Motion;

Motion travtween;
Motion turtween;
Motion transtween;
ControlP5 controlP5;
PFont font;

float trav = 0.0;
float turtle = 0.0;
float rot = 0.0;
float trans = 0.0;
float strav = 0.0;
float sturtle = 0.0;
float strans = 0.0;
float etrav = 300;
float eturtle = 360;
float etrans = 20;

float runtime = 300;
PShape bus;
String easetype = "LINEAR_EASEBOTH";

void setup() {
 size(600, 600);
 controlP5 = new ControlP5(this);
 
 controlP5.addSlider("strav",0,300,100,50,480,100,10);
 controlP5.addSlider("sturtle",0,360,0,50,520,100,10);
 controlP5.addSlider("strans",-20,20,0,50,560,100,10);
 controlP5.addSlider("etrav",0,300,100,400,480,100,10);
 controlP5.addSlider("eturtle",0,360,0,400,520,100,10);
 controlP5.addSlider("etrans",-20,20,0,400,560,100,10);
 controlP5.addKnob("runtime",0,600,0,400,420,40);

 font = createFont("Calibri",14);
 textFont(font);
 
 travtween = new Motion (this, "tween1",strav,etrav,runtime);
 turtween = new Motion (this, "tween2",sturtle,eturtle,runtime);
 transtween = new Motion (this, "tween3",strans,etrans,runtime);
 
 //tween.play();
 
 
 frameRate(30);
 
 
 smooth();
 bus = loadShape("bus.svg");
 strokeWeight(1.0);
 stroke(0, 100);
 rectMode(CENTER);
 ellipseMode(CENTER);
 shapeMode(CENTER);
}

void draw() {
 background(50);
 stroke(0,100);

 travtween.setDuration(runtime);
 turtween.setDuration(runtime);
 transtween.setDuration(runtime);
 
 boolean a = (travtween.isPlaying);
 println ("a="+a);
 
 if (!a) {
 travtween.setBegin(strav);
 turtween.setBegin(sturtle);
 transtween.setBegin(strans);
 
 travtween.setEnd(etrav);
 turtween.setEnd(eturtle);
 transtween.setEnd(etrans);
 }
println("strav="+strav);
println("sturtle="+sturtle);
println("strans="+strans);


println("travBegin="+travtween.getBegin());
println("turBegin="+turtween.getBegin());
println("transBegin="+transtween.getBegin());

println("travEnd="+travtween.getEnd());
println("turEnd="+turtween.getEnd());
println("transEnd="+transtween.getEnd());

println("trav="+travtween.getPosition());
println("turEnd="+turtween.getPosition());
println("transEnd="+transtween.getPosition());

 trav = travtween.getPosition();
 rot = radians(turtween.getPosition());
 trans = transtween.getPosition();

 
 pushMatrix();
 translate(300,trav+100);
 rect(0,0,25,100);
   
   
   ellipse(0,0,30,30);
   stroke(0,255);
     pushMatrix();
     segment(0,0,rot);
       pushMatrix();
          rect(0,trans,10,40);
          pushMatrix();
            translate(0,trans);
            stroke(1);
            scale(.25);
            rotate(HALF_PI);
            shape(bus,0,0);
         popMatrix();
         ellipse(0,0,10,10);
       popMatrix();
     popMatrix();
 popMatrix();

 noStroke();
 fill(255);
 
 String knobtime = runtime/30 + "secs";
  text(knobtime, width - textWidth(knobtime) - 10, 440);
 String timeAsString = travtween.getTime() + " / " + travtween.getDuration();
 text(timeAsString, width - textWidth(timeAsString) - 10, 20);

}


void keyPressed() {
 if (key == ' ') {
   if ((travtween.isPlaying)||(turtween.isPlaying)||(transtween.isPlaying)){
     travtween.pause();
     turtween.pause();
     transtween.pause();
   } else{
     travtween.resume();
     turtween.resume();
     transtween.resume();
 }}
 else if (keyCode == ENTER) {
     travtween.play();
     turtween.play();
     transtween.play();
 }
}


void segment(float x, float y, float a) {
 translate(x, y);
 rotate(a);
 line(0, 0, 15, 0);
//rotate(-a);
}

Any help / guidance would be greatly appreciated.  I have a more complex question as well, but I think I;ll get over this hurdle first.

Thanks,

Chuck
Re: New animation library w/ timeline/keyframes tweens
Reply #33 - Jun 2nd, 2010, 7:12pm
 
So I think I may have found the root of my problem.  In looking through the source on GoogleCode I was able to find the setEnd() method:

Code:

public void setEnd(float _end) {
begin = position;
end = _end;
change = end - begin;
}


I am confused by the first line of this method.  It makes me think that anytime I call setEnd(), that I am really going to alter my Begin as well since the begin in going to be reset to the current position.  This would seem to be a bug, or maybe I am using these methods incorrectly.

My goal is to allow the user to set the start and end positions for the objects, as well as duration through some user controls.  Essentially they can adjust the animation and then execute until they get a set of values they like.

Ultimately the goal is to add some physics processing such that users could enter a start, end , duration, acceleration time, and deceleration time and then the animation would run using the user values.  I would like to get all of this working inside a class, as hopefully there would be multiple objects all running concurrently for each "scene".

Any help/guidance is appreciated.

Chuck
Re: New animation library w/ timeline/keyframes tweens
Reply #34 - Jun 2nd, 2010, 7:14pm
 
So I think I may have found the root of my problem.  In looking through the source on GoogleCode I was able to find the setEnd() method:

Code:

public void setEnd(float _end) {
begin = position;
end = _end;
change = end - begin;
}


I am confused by the first line of this method.  It makes me think that anytime I call setEnd(), that I am really going to alter my Begin as well since the begin in going to be reset to the current position.  This would seem to be a bug, or maybe I am using these methods incorrectly.

My goal is to allow the user to set the start and end positions for the objects, as well as duration through some user controls.  Essentially they can adjust the animation and then execute until they get a set of values they like.

Ultimately the goal is to add some physics processing such that users could enter a start, end , duration, acceleration time, and deceleration time and then the animation would run using the user values.  I would like to get all of this working inside a class, as hopefully there would be multiple objects all running concurrently for each "scene".

Any help/guidance is appreciated.

Chuck
Pages: 1 2 3