Homework 1: Interactive Drawing

• The sketch size should be at least 500 x 500 pixels.
• You should draw a start and finish line with "Start" and "Finish" text.
• Each competitor will be represented as an image. We have provided the Penn and Princeton pennant images, but you are welcome to chose your own.
  • When you draw each competitor image to the screen, your code should ensure that the image is exactly 100 pixels in width (and the proportionally correct height).
• The two competitors should start completely behind the starting line.
• Each iteration of the draw loop, each competitor's image should move one pixel towards the finish line with probability 0.5 (independent of whether the other pennant moves).
• To keep this simple, we will say that a competitor wins the moment the center of the image has crossed the finish line before the center of the other image has.
• As soon as one of the competitors wins, freeze the animation and display text in the sketch telling who won.
• Since the competitors move randomly, the outcome of the race might be different each time.
• You are welcome to make the background as fancy or as simple as you'd like. Your sketch does not need to look exactly like the sample shown above.

1. Create your sketch, naming it "Race" and save it to your sketchpad folder. Make sure to use this exact name for your sketch.
2. Download the penn.png and princeton.png images, and note the directory where you saved them. (The ".png" extension may not be shown in your Save dialog box. Don't worry about that, it will still be there.) Then, add each image to your Race sketch using the Sketch -> Add File menu option (select each image in turn via Add File, and Processing will copy that image to the data directory under your Race sketch.
   • While you are welcome to use your own images, we recommend that you use the Penn and Princeton pennant first, get your program working, and then change images later.
3. Setup the canvas size in setup(). Be sure to use width and height throughout your program when referencing the canvas size; don't hardcode the canvas size except in calling size().
4. Draw the start and finish lines. Since you are doing an animation, all drawing code should go in draw(). Compile and test your code.
5. Use the image() method provided below to draw one image at a particular x,y coordinate. Use this method to draw the one image before the start line. Compile and test your code.
6. Animate the image so that it moves one pixel toward the finish line each iteration of draw(), following the animation examples from class. Test your code!
7. Make the image's movement forward random, so that it takes a step forward with probability 0.5 instead of all of the time. Test your code!
8. Add in and animate a second image.
9. Add code to detect when one of the competitors hits the finish line and freeze the animation. Print an appropriate message indicating the winner. To display text on a sketch, use the text() command.

Feel free to use code in your MySketch program from HW0 if you feel it will be useful.

/**
 * TODO - file header
 * 
 */
 
 
// TODO declare variables
  
void setup() {
	// TODO set up the drawing
	drawBackground();  // call the drawBackground() method
}


void draw() { /* remains empty */ }


void mousePressed() {
	// TODO Use the mouseX, mouseY position to change the physical size of your object
	// TODO Draw the object
}


void keyPressed() {
	drawBackground();  // call the drawBackground() method
}


// clear the entire image and redraw the background
void drawBackground() {
      // TODO draw a background that contains random elements and repetition using a for loop
}
			

• Generated background using randomness and for/while loop iteration
  
• Pressing a key clears the sketch and redraws a new background
  
• On mousePressed, different types of objects are drawn on the sketch at the mouse location
  
• The physical shape of the object (size, shape, etc.) changes based on the mouse location
• Conditional if or if-else tests are used somewhere in the assignment
• Variables used appropriately in the remainder of the assignment
  
• Includes proper header and adequate comments

Restrictions:

• You cannot use Processing's built-in scale() command to scale the object.  We will cover this command about halfway through the semester when we talk about transformations.  All scaling must be done manually using variables and mathematical computations.
  

• Make sure that it is at least 500 pixels by 500 pixels.  Your sketch should not be larger than 1000 x 1000 pixels.
  
• Your program must work perfectly if these values are changed in the size() command.  Therefore, you should rely on the width and height variables throughout your program instead of hard-coded values.
  
• Your objects or characters can be simple.  For example, clouds could be made of multiple ellipses, flowers could be made with nested colored ellipses and a green rectangle.
• Your code should use variables as appropriate.
  
• Include proper source code header and adequate comments.
• We recommend the following steps to develop your program.  After each step, you should run and test your program thoroughly, ensuring that it works.

1. Begin by randomly generating the background.  Develop this slowly, building up complexity as you go.  Test it to make sure it works after every few lines of code.
   
2. Add in the keyPressed() method that clears the background.  Test that it works.
   
3. Add in the mousePressed() method to draw a simple shape (e.g., a single ellipse) at the mouse location upon a click.  Test that you can draw multiple objects and randomly regenerate the background.
4. Scale size of the simple shape based on the distance from the horizon.
   
5. Change the simple shape to the more complex looking object you want to draw.  Test your code.
   
6. Modify your complex object to adjust some aspect of its appearance (i.e. shape or size) based on the mouse location.  Test your completed program.

• Do not try to write the entire program at once. Trying to do everything at once and expecting it to work is the pathway to frustration.  Instead, build your program up slowly, testing as you go to ensure that you always have a working program (and if it doesn't work, the error was in the small bit of code you just wrote).