( back )

Nesting animations
Here an ellipse motion is nested inside a default motion. The default motion's rectangle has zero height, so the motion produced is entirely horizontal. Also, the default motion's rectangle is defined with negative width, so the motion produced moves from right to left.

Animation littlecloud;
Animation littlecloud_ellipse;
BFont font;

void setup()
{
  size(400,200);
  font = loadFont("RotisSanSer.vlw.gz");
  textFont(font, 20);
  
  // inner animation: loops in a circle.
  littlecloud_ellipse = new Animation(this, loadImage("circler.gif"), 0,0, 100,100);
  littlecloud_ellipse.setDuration(5000);
  littlecloud_ellipse.setStep("ELLIPSE");
   
  // outer animation: scrolls back-and-forth.
  littlecloud = new Animation(this, littlecloud_ellipse, 350,50, -300,0);
  littlecloud.setStep("BOUNCE");
  littlecloud.setDuration(20000);
}

void loop()
{
  background(0,77,156);
  noFill();
  littlecloud.draw();
  fill(255);
  text("Click to toggle the animation-rectangles.", 25, 25);
}

// toggles rectangles' visibility.
void mousePressed()
{  
  if (littlecloud.rectangleVisible())
  {
    littlecloud.hideRectangle();
    littlecloud_ellipse.hideRectangle();
  }
  else
  {
    littlecloud.showRectangle();
    littlecloud_ellipse.showRectangle();
  }  
}