COMP 141 Project 2: Avatar Browser

Many virtual worlds allow you to create an "avatar" to represent yourself in the environment: a pictorial representation of a person that you can customize in appearance. Another way to think about this is it’s a modern day version of Mr. Potato Head --- you can build a character with interchangeable facial characteristics.

As a class, we are going to build a program that lets you browse through various avatars. Each member of the class will design a program that draws the face of an avatar, consisting of eyes, hair, and a mouth. The trick is that everyone will build the picture of their avatar through the use of functions, allowing different combinations of eyes, hair, and mouths to be combined when everyone is done. This is possible because everyone will use a separate function for their avatar's eyes, hair, and mouths, and therefore one person's hair can be combined with someone else's eyes, and someone else's mouth. Without functions, this would be more difficult because people might use identical variable names to mean different things. With those variables hidden inside functions, as long as everyone picks different function names, everything should work OK.

To make it easy for to combine facial features designed by different people, we will use the following guidelines. We will assume everyone's avatar is being designed for a face that is a circle of radius 300. When we put the final product together, however, we may need to draw a face on different sections of the screen. Therefore, the location of the center of the face may vary, and your drawing functions (for the eyes, hair, and mouth) must be able to draw the facial characteristics anywhere on the screen. To enable this, each of your drawing functions will take two arguments corresponding to the (x, y) position of the center of the 300-radius circle. Each of your functions must calculate the correct placement of the facial features based on these arguments!

What you need to do

Start with the Python code below. Copy it into a new file and save it as avatar_yourLastName_yourFirstName.py.
Rename the the drawing functions (for eyes, hair, and mouth) to use more descriptive names by changing the "USEBETTERNAME" portion of the name. For instance, if your avatar is going to have spiky blond hair, change the hair function to be named draw_hair_spiky_blond. All of the functions should still take centerx and centery as arguments; do not remove or alter the arguments! Make your function names descriptive so they won't clash with anyone else's.
Edit your main function so it does the following:
- Open a canvas large enough to hold a 300-radius circle.
- Draw a 300-radius circle somewhere on the canvas.
- Call your eyes, mouth, and hair functions in that order, passing the (x,y) center of the circle to the functions so they know where on the canvas to draw.
- Wait for a mouse click on the canvas and close it after the click.
Edit the three drawing functions for eyes, mouth, and hair so that they draw the appropriate facial features on the face. Each function should call appropriate drawing functions (from the CS 141 Graphics Library) to draw the facial characteristics. The facial characteristics can be embellished with other appropriate things in that area of the face. For instance, you may also draw a nose in your mouth function, or ears in the hair function.

Important

Remember that your drawing functions should not assume the location of the circle for the face is at a fixed location! This means that the proper locations of the hair, mouth, and eyes functions must be calculated based off of centerx and centery. This will involve doing some math. For instance, if you want to draw circles for eyes that are to the left and right of the center point of the face, you would do something like draw_circle(centerx - 100, centery, 50) for the left eye and draw_circle(centerx + 100, centery, 50) for the right eye. That way, if the center of the circle changes to a different location, the eyes will also shift locations accordingly.

Start with this code

You should use the following program structure:

# CS 141, Spring 2013
# Programming Project 2: Avatar Browser
# Your name

from simplegraphics import *

def main():
	# open canvas
	# draw a 300-radius circle at an (x,y) position you choose
	# call eyes, mouth, hair, passing the (x,y) position you chose as arguments
	# wait for mouse click and close canvas

def draw_eyes_USEBETTERNAME(centerx, centery):
	# draw eyes in this function, calculating the position of the eyes
	# from the center of the face being at (centerx, centery)

def draw_hair_USEBETTERNAME(centerx, centery):
	# draw hair in this function, calculating the position of the hair
	# from the center of the face being at (centerx, centery)

def draw_mouth_USEBETTERNAME(centerx, centery):
	# draw a mouth in this function, calculating the position of the mouth
	# from the center of the face being at (centerx, centery)

# Call the main function.
main()

Testing your program

Because everyone's program will create different pictures, I can't tell you exactly what the output should look like. What I can tell you is that you should make sure that your can draw the avatar at different locations on the screen. You should be able to change the arguments to the draw_circle function in main() (the part that draws the outline of the face), and correspondingly change the arguments to the eyes, hair, and mouth functions, and all of the components should shift to follow the center of the face.

Hints

Use the procedure we discussed in class for writing programs: before even thinking about code, write down the algorithm in pseudocode, and decide on what variables you will need, what their names will be, what their data types will be, and most importantly, what each variable represents in the program.

What to turn in

Through Moodle, turn in your code as a file called avatar_yourLastName_yourFirstName.py.