Codekids Lesson 7

Animation with Alpha

Last time we created our first animations. This time we're going to make them cooler by adding more variables.

New Program

Grab this code and put it into processing. Then run it. 

//First, do the setup stuff
void setup(){
        size(400, 400);
        background(0); //start with a black background
        strokeWeight(20); //the size of the dot
        smooth();
}

//next, name set some variables to keep track of where each dot will go
    //starting location of the first dot
    int mrDot1X = 0;
    int mrDot1Y = 0;
    
    //starting location of the second dot
    int mrDot2X = 400;
    int mrDot2Y = 0;
    
    //starting location of the third dot
    int mrDot3X = 0;
    int mrDot3Y = 400;
    
    //starting location of the fourth dot
    int mrDot4X = 400;
    int mrDot4Y = 400;

//Now, start animating!
void draw(){
  fill(0,0,0,10); //set the fill colour to be 90% transparent black
  noStroke(); //turn off stroke so the outline of the box doesn't show
  rect(0,0,400,400); //cover everything with a semi-transparent box
  
  stroke(100,50,255); //the colour of the first dot
  point(mrDot1X, mrDot1Y);
  
  stroke(100,50,255); //the colour of the second dot
  point(mrDot2X, mrDot2Y);
  
  stroke(100,50,255); //the colour of the third dot
  point(mrDot3X, mrDot3Y);
  
  stroke(100,50,255); //the colour of the fourth dot
  point(mrDot4X, mrDot4Y);
  
  //now, move the dots
  mrDot1X = mrDot1X + 1;
  mrDot2X = mrDot2X - 1;
  mrDot3X = mrDot3X + 3;
  mrDot4X = mrDot4X - 3;
  mrDot1Y = mrDot1Y + 1;
  mrDot2Y = mrDot2Y + 1;
  mrDot3Y = mrDot3Y - 3;
  mrDot4Y = mrDot4Y - 3;


  //if the dots fell off the edges, move them back to their starting places
  if (mrDot1X > 400){mrDot1X = 0;}
  if (mrDot2X < 1)  {mrDot2X = 400;}
  if (mrDot3X > 400){mrDot3X = 0;}
  if (mrDot4X < 1)  {mrDot4X = 400;}
        
  if (mrDot1Y > 400){mrDot1Y = 0;}
  if (mrDot2Y > 400){mrDot2Y = 0;}
  if (mrDot3Y < 1)  {mrDot3Y = 400;}
  if (mrDot4Y < 1)  {mrDot4Y = 400;}

}

You should see something like this, except it will be moving:

animation 2

How does it work?

This sketch draws 4 dots everytime it goes through void draw(){}. These dots are made by the point commands:

 
		point(mrDot1X, mrDot1Y);
		point(mrDot2X, mrDot2Y);
		point(mrDot3X, mrDot3Y);
		point(mrDot4X, mrDot4Y);

Each time it draws a point, it's at an X-Y (over-down) location in the window. The X and Y numbers a set by 8 int variables. The way it moves the dots is by changing the values of each of these variables every time it goes through void draw(){}.

Transparency (Alpha)

How does it make trails? We can do this by covering it each time with a semi-transparent box. Before we learned how you can create colours from Red-Green-Blue. For example, this will set the stroke colour to bright green:

stroke(0,240,0);

If you add a 4th number between 0-100, it tells Processing how transparent to make it. This is called the alpha number. So the following is a half-transparent shade of green because alpha is set to 50:

stroke(0,240,0,50);

Our program covers our dots each time with a 400-by-400 black box, that is 90% transparent:

fill(0,0,0,10);

rect(0,0,400,400);

This means it takes 10 times through void draw(){}, for a dot to get erased. You can change the length of your trails by changing the alpha value!

Hack your Program

Now that you've got your program running, do these things:

  1. change your dot colours by changing the stroke(100,50,255);commands
  2. change strokeWeight(20); to different sizes
  3. change the alpha value, which is the last number in this fill command: fill(0,0,0,10);
  4. add alpha numbers to your stroke() commands
  5. add more point(x,y); commands to get more moving dots. Try mixing up the variables.
  6. add a new variable and commands to changes the sizes of the dots:

//first, do this in the place between void setup() and void draw():
int mrPointSize = 20;

Then, set it at the beginning of void draw():

strokeWeight(mrPointSize);

 

Lower in void draw(), change it:

mrPointSize = mrPointSize + 1;

if (mrPointSize > 100 ) {mrPointSize = 1};

If you create something cool, use Grab to copy it and email it to me!

Go back to the home page.