Q1: Draw an animal Write a non-active Processing program (containing no setup() or draw() functions)

that will draw an animal on the canvas, with or without a frame around it.

based on the following rules: Follow the Shape Dependency Model

Include 6 to 16 shapes (ellipses, rectangles, lines or other shapes). 14 shapes (12 ellipses, 1 line and a rectangle for the frame). Your script must contain: o at least one ellipse, o at least one rectangle (this can be, but doesnt have to be, a frame around your animal) o at least one line, triangle or quad (shapes defined only by coordinates) It should contain at least 3 different colors. It can be a pretty basic animal, even more, basic than the one shown. You must use a 500 x 500 canvas for this question. you are going to scale the animal in the horizontal and vertical directions. Because of this, you should avoid using circles/squares and instead only use ellipses and rectangles. The animal must be medium to large and use up a good proportion of the canvas, It should be roughly centered in the window. your animal will move, grow, and shrink. To make that easier, you MUST write your code following the shape dependency model.

In the shape dependency model, you choose one shape as the root or parent shape. You define its size and its position using constants. Then, every other shape is defined in relation to the first (root or parent) shape, either directly or indirectly. This way, if you move the root shapes position, all the other shapes follow along automatically. Also, if you make the root shape bigger or smaller in either the X or Y dimension (or both), the other shapes will also scale appropriately. Define constants for your root shape. These can depend on the canvas width and height. Hint: use a rectangle or ellipse as the root shape of your animal, since they have both position coordinates and separate horizontal and vertical dimensions (width and height). Shapes that are only defined by coordinates (lines, triangles, quads) are fine to add to your animal, but using one of those for the root shape would make the code MUCH more difficult. For the rest of your shapes, you can use variables. But these must all depend on the width, height and coordinates of your root shape (not the canvas width and height). Your drawing commands (like rect(), ellipse() etc. should only contain constants or variable names, no numbers. The variables you create can be defined using other constants and variables combined with simple numbers like 2, 3, 4, 5, 6, 7 or 8 to get sizes that are divisions or multiplications relative to other body parts. For example,

you can have something like this: leftEyeX = headX - headWidth/3; ellipse(leftEyeX, .)

Use good, descriptive variable names that highlight the difference between locations and dimensions (leftEyeX, which tells where the left eye is, vs. eyeWidth, which says how wide the eye is). Every shape you draw will need at least a few variables defined for it. Pay attention to when you can reuse variables. For example, eyes are both at the same height, we need leftEyeX, rightEyeX and eyeY (only one variable for eye height is needed).

Save a copy of your original Question 1 program

Q2: Move the Animal Convert your program from Question 1 into an Active Processing program, with the animal centered on the canvas. To do this, follow these instructions: 1. Create the usual setup()and draw() functions. Create a drawAnimal() function (or a similar name). 2. Move all of your existing code from Question 1 into the appropriate place in these new functions. All of the code that draws your animal should go into the drawAnimal() function, not into the draw() function directly. The functions should call each other as needed. 3. You will need to change the two constants that define the position of the root shape into global variables. 4. Create a moveAnimal() function (or use a similar name). The moveAnimal() function should use the mouse cursor position to set the X and Y values for the location of your animal. The center point of your animals root shape should always exactly match the mouse cursor position. If you have followed the instructions in Question 1 carefully, following the shape dependency model, all the parts of your animal should move together, underneath the cursor.

Save a copy of your original Question 2 program

Q3: Scale the Animal Make the following changes: 1. Copy in the function you created in Q2 to draw your animal. 2. In this question, the animal doesnt move, but it does scale. You will need to make the root shape positions global constants in this question. And the root shapes width and height will need to be turned into variables since they are going to change. Update the code so that your animal shows up in the center of the screen, looking just like it did in Q1. Note that the sliders have no effect on the animal yet. 3. Create constants that define a minimum and maximum size for your animals root shape. 4. Create two float variables to store the amount of x scaling and the amount of y scaling (float variables are covered in Week 4 these are variables that can hold decimal numbers and a percentage is a decimal number: 40% is 0.4). 5. Implement the updateXScaleFactor() and the updateYScaleFactor() functions that are provided to you as empty functions in the template code. These are very short functions (one line of code in each). The updateXScaleFactor function must calculate the percentage of X scaling (from 0.0 to 1.0) based on the position of the horizontal slider and store that in the x scale variable you added in Step 3. If the horizontal slider is all the way to the left, the x scale factor variable should be 0.0, if the slider is all the way to the right, it should be 1.0. Similarly, the updateYScaleFactor() must calculate the percentage of Y scaling (from 0.0 to 1.0) based on the position of the vertical slider. If the slider is at the bottom, the y scale factor should be 0.0, if the slider is at the top, the y scale factor should be 1.0. To do these calculations make sure that you make use of the constants defined at the top of the file. Look at how these constants are used to draw the sliders in the drawXSlider() and drawYSlider() functions. Be careful to avoid integer division errors. 6. Add a scaleAnimal() function. This function should use the scale factors calculated in the previous step to scale the width and height of the root shape of your animal. Once you have this working, your animal should scale both vertically and horizontally using the sliders, as shown in the demo code. To give you a sense of how this should work, if you have a torso as the root shape of your animal, and you have set the minimum torso width to be 50 and the maximum torso width to be 250, and the horizontal slider is halfway across, the x scale should be 0.5 (50%) and the animal torso width should be set to 150 (halfway between 50 and 250). You will need to figure out how to code that into an equation that will work as the scale factor varies between 0.0 and 1.0. Again, assuming that your code from Question 1 followed the shape dependency model appropriately, scaling the root shape in both the x and y direction based on the scale factors calculated in Step 5 should be all you need to do to get this to work.

Q4: Animal Part Follows Cursor In this Question, you will extend your Q3 program. Save a copy of Q3 , and copy it into a new script for Q4. Your job is to add/edit a single part of the animal so that that part appears to follow the cursor around the screen. In the Q4 demo code, we have added a tongue to the animal, which appears to follow the cursor. The tongue is drawn as a triangle, with two coordinates anchored to the frogs face, and one coordinate that moves around, not too far from the face, but always towards the direction of the cursor. In this Question, you have a fair amount of freedom. You could make eyeballs move in eye sockets, you could make a wing move or an animals tail move. You just have to make some part of the animal visibly pay attention to or seem to follow the mouse cursor as it moves around, even as the cursor is being used to adjust the scaling with the sliders.