OK, there's an object-oriented way to do this, and I'm going to have a go.  Additions/corrections welcome.

You could define a simple interface, say AnimationController, thus:

Code:

interface AnimationController {
  boolean isActive();
  void perform();
}

 

An interface is a special kind of class, which defines a set of methods which other classes must implement.  If several different classes all implement AnimationController, it means we can treat them all the same way, even if they perform different tasks.

So you would make an array (or a Vector) to hold all your animation controllers, and loop through them all inside the draw function.  You can also count the number of frames inside of draw().

Inside setup(), you need to create the controllers array.  Because AnimationController is just an interface, we need to implement it with actual classes which do useful things.  Here's an example program, with two animation controllers:

Code:

interface AnimationController {
  boolean isActive();
  void perform();
}

AnimationController controllers[];
int frames = 0;
int thingToGrow = 0;

class Grower implements AnimationController {
  boolean isActive() {
    return frames >= 0 && frames < 200;
  }
  void perform() {
    thingToGrow++;
  }
}

class Shrinker implements AnimationController {
  boolean isActive() {
    return frames >= 200 && frames < 400;
  }
  void perform() {
    thingToGrow--;
  }
}

void setup() {
  size(300,300);
  controllers = new AnimationController[2];
  controllers[0] = new Grower();
  controllers[1] = new Shrinker();
}

void draw() {
  background(255);
  frames++;
  // quick reset
  if (frames > 400) {
    frames = 0;
  }
  for (int i = 0; i < controllers.length; i++) {
    if (controllers[i].isActive()) {
	controllers[i].perform();
    }
  }
  rectMode(CENTER);
  fill(thingToGrow,0,0);
  rect(width/2,height/2,thingToGrow,thingToGrow);
}

 

That's probably how I'd do it, anyway. Essentially, there is still just a big "if" statement, but now you can have multiple animations happening at once, and you have a modular implementation.

Obviously, you can add as much or as little functionality into the perform() methods, but I would recommend creating parameters for the things you want to change (like thingToGrow) and doing all the drawing after the AnimationControllers have run.

Hope that helps.

Hello

I'm writing to thank again.
I haven't understood the Sun documentation on it very well (actually, it's greek to me) but your coding example was very clear, and I'll be able to use it. Thanks!



PS: maybe one day, I'll be able to develop a timeline plugin like they use for coding the assembly demos... oh yeah, maybe one day.

Thanks for the explanation. I've been wondering about the differences and uses of interfaces and extending/implementing. This helps a lot.

steve

Thanks for this, Tom. Yep! it certainly makes sense. I looked at your code and have had a go using abstract classes. I've got a procedural programming hangover and so this kind of jargon cutting-type example has been useful to me. I know it's probably beyond the scope of this board to look to indepth at OOP concepts, but it can be bloody helpful!

Anyhow, here's my attempt at a timeline using your original example as a kind of blueprint.

On the question of animation, you just slot.add() your images where and when you want them to appear in the sequence and bob's your uncle. A better way would be to write an animation element that dealt with iter. But this'll should do it in lieu of something better.

Code:

// ToDo:
// Add mini controller and on/off flag.
// mini controller will provide an offset from master head 

// Generates a timeline Vector() of elements.
public abstract class Timeline {

float  head;
int stageLength;
Vector slot;

   public Timeline(int stageLength) {
   
     this.stageLength = stageLength;
     slot = new Vector();
   } 
  
  void perform() { 
      
    for(int i=0; i<slot.size(); i++) {
        TimelineElement element = (TimelineElement)slot.elementAt(i);
         if(element.isActive((int)head)) {
           element.display((int)head); 
         }
     }
  }  
} // class Timeline


// Timeline slots contain elements derived from this class.
public abstract class TimelineElement {

int begin, end;

  TimelineElement (int begin, int end) {
  
  this.begin = begin;
  this.end = end;  
  }
  
  boolean isActive(int head) {
    return head >= begin && head <= end; 
  } 
  
  abstract void display(int head);
} // class





Timeline timelines[];   // array to hold timelines.
float head;

void setup() {

  size(200, 200);
      
  timelines = new Timeline[2]; 
  timelines[0] = new tLine1(width);       // insert timeline length and pass to constructor and imbed headpos
  timelines[1] = new tLine2(width);       // insert timeline length and pass to constructor and imbed headpos
}

void draw() {
  background(255);
    
  for (int i = 0; i < timelines.length; i++) { 

    head = mouseX*(timelines[i].stageLength/width%timelines[i].stageLength);

    timelines[i].head = head;  //*timelines[i].stageLength;
    timelines[i].perform(); 
  } 
}


// User defined timelines and contents
// Uses vectors to increase future flexibility 
// Any defined element can exist on any timeline

class tLine1 extends Timeline{ 

  tLine1(int stageLength) {
    super(stageLength);
    
    slot.add(new Timeline_FadeImage(20,110,"t1.gif",0,0,200,200));
    slot.add(new Timeline_FadeImage(90,180,"t2.gif",0,0,200,200));

  }
} // class Visual


class tLine2 extends Timeline{ 

  tLine2(int stageLength) {
    super(stageLength);
    
    slot.add(new Timeline_FadeImage(20,190,"t3.gif",0,0,200,200));
  }
} // class Visual




// Timeline element definitions.
// ToDo: 
// backgroundTask(); maintain element method


// Display a static image with no effects
class Timeline_Image extends TimelineElement { 

PImage img;
int x,y;
int xsize, ysize;

Timeline_Image(int begin, int end, String _filename, int x, int y, int xsize, int ysize) {

  super(begin, end);
  img=loadImage(_filename);
  this.x = x;
  this.y = y;
  this.xsize = xsize;
  this.ysize = ysize;
}

  void display(int head) {
    
    noTint();
    image(img,x,y,xsize,ysize);
  } 
} // Class



// Display image with proportional fade using the tint() method
class Timeline_FadeImage extends TimelineElement { 

PImage img;
int x,y;
int xsize, ysize;

Timeline_FadeImage(int begin, int end, String _filename, int x, int y, int xsize, int ysize) {

  super(begin, end);
  img=loadImage(_filename);
  this.x = x;
  this.y = y;
  this.xsize = xsize;
  this.ysize = ysize;
}

void display(int head) {

  int span = abs(begin-end);   // time available for this slot
  int headoffset = abs(head-begin);  // current heads postion 0'ed to this time slice.
  int distance = (abs(-span/2+headoffset));  // calculate the distance from middle
  
  tint(255,255-(distance*2)*255/span);
  
  image(img,x,y,xsize,ysize);
}

} // Class