Lab 3: Functions and Animation
CS145: Images and Imagination, Spring 2010

Goals

Become familiar with conditional expressions, animation, and functions.

Reading

In class we cover the basics of these topics. If you want more examples, more depth, or further explanations, please refer to the following pages of the text.

• Making Choices - Conditional expressions pp. 51-60
• pp. 173-192: Animation and Functions

Activities

• In the Processing Reference, lookup and read the descriptions for the following items:
  • Under the Structure category: setup() and draw()
  • Under the Control category: everything under Logical Operators - OR, AND, NOT
  • Under the Data category, Primitive subcategory: boolean
• Practice with setup() and draw(). Enter the following into a Processing sketch and run the program.

  int a = 0;
  
  void setup() {
    size(200, 200);
    background(0);
  }
  
  void draw() {
    rect(a, 0, 10, height); 
    a = a+1;
    if (a == width) {
      a = 0;
    }
  }
  

  There is a lot going in this program that isn't obvious:
  • setup() and draw() have special meaning in Processing
  • It is very important that you to understand the sequence of what happens. What is the first command that the program executes? What is the second, etc?
  • Does it matter where the declarations/assignment is placed (int a = 0;)? Try moving it around and see what happens.
  • What happens if you move some of the other commands such as size() or background() to be outside of the setup function?

• Experiment with boolean expressions and boolean operators: Modify the draw() function so that the rectangle moves differently, e.g. up/down, back and forth, other...

• Create a user defined function that combines several shapes into a more complex shape whose location, like the rectangle, is determined by the "a" variable. Call it from setup(). (remove draw() temporarily). For example:

  int a = 20;
  void setup() {
    size(200, 200);
    background(0);
    snowMan();
  }
  void snowMan() {
     ellipseMode(CENTER);
     ellipse(a, 30, 20,20);
     ellipse(a, 50, 30,30);
     ellipse(a, 85, 50,50);   
  }
  

• Now, instead of calling your function (e.g. snowMan) from seup(), insert draw() back into your code and replace the rect command with a call to your shape. For example:

  int a = 20;
  
  void setup() {
    size(200, 200);
    background(0); 
  }
  
  void draw() {
    background(0);
    snowMan();
    a = a+1;
    if (a == width) {
      a = 0;   
    }
  }
  
  void snowMan() {
     ellipseMode(CENTER);
     ellipse(a, 30, 20,20);
     ellipse(a, 50, 30,30);
     ellipse(a, 85, 50,50);   
  }
  

• Partner up with at one or two other people. Copy your partners' shape functions (e.g. snowMan) into to your code so that you have now have your shape function as well as theirs. Call all of the shape functions from draw(). (If their code is long you might want to exchange the code using a thumbdrive.) Can you get the different shapes to appear to move independently? Feel free to modify their code and expand on your code in any way.

• No matter what you do, make sure you:

  • Keep your code clean and easy to read. Add comments if necessary. Processing has an "auto format" command under the Tools menu that will fix indentations to make the code more readable.
  • Understand why the code is doing what it is doing. Does the order of execution make sense? Do the boolean expressions make sense?

• Saving a snapshot of your animation: If you add the function to your code:

  void keyPressed() {
    save("snowman.png");
  }
  

  then, Processing will save your animation to an image whenever you press a key on the keyboard. Add this code and save an image at an interesting point in your animation.

• Saving the animation as an applet: When you have an animation that you like, go to the Processing Menu and choose "file->Export". This will create and open up a folder that contains a Java applet and an html web page (you can place this on your own web page if you want). Double click on the file called index.html to watch your animation run.

Deliverables

Wednesday, Feb 10, 30 minutes before class:

You are to turn in via Wise a single zipped file containing your Processing sketch folder for your final animation. The sketch folder should include the 1) Processing code, 2) an image snapshot, and 3) the folder with the applet. In the submission text area of Wise, please list the names of your partners.

Before turning in any of your code, make sure that you have cleaned it up as follows:

• Delete any unused code.
• Formatted the code so that it is easy to read (e.g use the auto format tool).
• Added comments so that someone else looking at the code can follow what the code does.