Simple Animation using Transformations


This page was last updated: July 6, 2018


Requirements:

  1. The goal of this project is to create an animation by using the Processing transformation calls rotate( ), scale( ), and translate( ). The choice of what the animation does is up to you, but it must use all of those 3 functions. It can use any other functions you want.
    It can use any keyboard keys to do anything you want.
  2. Create an animation by using the Processing transformation calls rotate( ), scale( ), and translate( ). You can also use shearX( ) and shearY( ), but they are not required.
  3. Draw one or more 2D objects. Each object can undergo the same transformation. (They can also undergo different transformations now, but that is what we are doing in Project #6.)
  4. Make a call to background( ) in the top of draw( ). By erasing the screen then, we will be creating an animation, not a paint program.
  5. Create a global variable at the top of the program:
    int Frame = 0;
  6. Make your animation do what it does using some math based on Frame. (The map function is good for this.)
  7. Increment Frame at the end of draw( ) and set it back to zero if it gets too big:
    Frame = Frame + 1;
    if( Frame > some number you pick )
    	Frame = 0;
    
  8. You can also use a keyboard key ('r' for "reset"? 'z' for "zero"?) to set the Frame back to zero anytime you'd like, but this isn't required.

Sample Code

int Frame = 0;         // current frame number
int MaxFrame = 100;    // maximum frame number

void
setup( )
{
  size( 800, 800 );
  background( 200, 200, 255 );
  fill( 255, 0, 0 );
  stroke( 0, 0, 0 );
}

void
draw( )
{
  background( 200, 200, 255 );
  int red = int(  map( Frame,  0, MaxFrame,  255, 0 )  );
  fill( red, 100, 100 );
  pushMatrix( );
    translate( 300, 300 );
    float deg = map( Frame, 0, MaxFrame,  0, 360 );
    rotate( radians(deg)  );
    rect( 0, -25,  200, 50 );
  popMatrix( );
  Frame = Frame + 1;
  if( Frame > MaxFrame )
    Frame = 0;
}