CMSC 110 (Introduction to Computing)

Spring 2012 - Section 02

Assignment #04

Due by 2:15 pm on Tuesday, February 27, 2012

Task: Design an interactive art composition based on classes.  A new object should appear wherever the user clicks on the sketch, and each object should be animated over time.  For example, clicking could generate a snowflake that falls, or a set of concentric circles that expand outward in a rainbow and then collapse inward.  The objects can layer on top of each other in any order.  In this project, we will be limiting the overall number of objects that can appear in the sketch, but this limit should be set via a variable and can be changed easily.

To get you started, write a class for your object using the following template:

/** Your header comments go here to describe the class */
class MyObjectNameGoesHere {

  // the object's x-coordinate
  int x;
  
  // the object's y-coordinate
  int y;

  // a parameter for tracking the ellapsed lifetime of the object, which can be used for animating it
  int t = 0;

  /** Constructor
   * @param xCoordinate the initial x coordinate of the object
   * @param yCoordinate the initial y coordinate of the object
   */
  MyObjectNameGoesHere (int xCoordinate, int yCoordinate) {
    ...
  }

  /** Draw the object.  
   *  This function should be called every iteration of draw() to display the object.
   */
  void draw() {
  
    // drawing code for your object, with an animation based on t
    ...
  }

  /** Advance the object's animation.  
   *  This function should be called every iteration of draw() to advance it's animation.
   */
  void step() {
    // increment the time counter
    t++;   
    ...
  }
}

You do not need to follow this template for your class exactly, it is merely a suggestion.  You must also create the controlling code that creates new objects based on where the user clicks and drawing code that displays all of the animated objects.  Again, here is a template to get you started:

// The maximum number of objects that can be displayed at once
int MAX_NUM_OBJECTS = 20;

// An array of all the created objects
MyObjectNameGoesHere[] myObjects = new MyObjectNameGoesHere[MAX_NUM_OBJECTS];

// An index into the myObjects array to show where to save the next new object.  
// Note that this index cannot ever be allowed to exceed MAX_NUM_OBJECTS; 
// instead it should cycle from 0 to MAX_NUM_OBJECTS and then be reset to begin again at 0.

int idxMyObjects = 0;

/** Processing's setup function */
void setup() {
  size(500,500);
  ...
}

/** The main drawing loop for Processing */
void draw() {

  background(255);  // NOTE:  you are welcome to change this background 

  // use a for loop to display all of the objects and advance their animations
  // NOTE:  When writing this loop, you will need to test each element 
  //        of the myObjects array to see if it is an object or is empty.  
  //        Use the following code to test for an object: 
  //        if (myObjects[i] != null) { ... }
  //        This example uses i as the loop variable; your implementation may 
  //        use something different.
  ...
}

void mousePressed() {
  // create a new object based on the location clicked 
  // and store it into myObjects[idxMyObjects]
  ...

  // increment the index into myObjects, keeping it in the range 0...MAX_NUM_OBJECTS
  // NOTE:  Make sure you understand how this line of code works!  
  // It is complete as-is.  You don't need to do anything else 
  // to make the idxMyObjects counter work correctly.
  
  idxMyObjects = (idxMyObjects+1) % MAX_NUM_OBJECTS;
}

Be sure to note that you must fill in code wherever youn are instructed, but you will most likely need to add other variables and functions as well.  Be creative and artistic!  For example, add a background that moves behind the objects.

Hints:

• Keep it simple at first.  Start with something basic, get it working, and then build upon it piece by piece, each time ensuring it is working before you move on to the next piece.
• Start with a hand-drawing of what you want, preferrably on graph paper.
• Then start with designing your object class.
• Test your object design by drawing ONE object first. Draw it simply without arrays, mouse interaction or even animation. Just insert a few lines in setup that will create an object and call the object's draw() method.
• Once you have a working class design from which you can create an object and have a still version of it drawn in the sketch window, add in animation. Then move on to mouse interaction and eventually multiple objects with an array.
• START EARLY!

Requirements:

• Include a gif/jpg/png image of your finished sketch in your sketch folder.
• Hand in the entire sketch folder in your Dropbox folder.
  • If you use any images, you must make sure they are submitted with the sketch, or your program will not run properly!
    
• Make sure to name the sketch file/folder properly.
• Include the standard header in your source code.
• Put your paragraph/description in the header of the source code file.
• Comment your code liberally with meaningful descriptions.
• Upload your sketch to openprocessing.org by 2:15pm, Wed 2/28. Make sure you drag your sketch to the proper subfolder and upload a screenshot after uploading.

Extra Credits:

• Design your program so that it scales properly regardless of the size of the sketch.
• As always, extra credit will be given for creativity, aesthetics and work that goes above and beyond what's required.