Simple Animation using Transformations
This page was last updated: July 6, 2018
Requirements:
-
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.
-
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.
-
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.)
-
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.
-
Create a global variable at the top of the program:
int Frame = 0;
-
Make your animation do what it does using some math based on Frame.
(The map function is good for this.)
-
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;
-
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;
}