CS 419ab -- Winter Quarter 2019

Project #5

100 Points

Due: February 11

Simple Animation using Transformations


This page was last updated: February 4, 2018


Introduction:

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.

Requirements:

  1. 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.
  2. 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.)
  3. 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.
  4. Create a global variable at the top of the program:
    int Frame = 0;
  5. Make your animation do what it does using some math based on Frame. (The map function is good for this.)
  6. 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;
    
  7. 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.

Turn-in:

Use the Teach system to turn in your:

  1. Your PDF report, describing what you did, including some cool images.
  2. Your Processing .pde file

Sample Code We Looked at in Class

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;
}

Grading:

Item Points
Animates using rotate, scale, translate 80
Correctly starts over after some number of Frames 20
Potential Total 100