DUE ON 5PM NOV 20, 2020 EECS 12 Fall 2020 HW4 Description: In this assignment, you are required to use the knowledge acquired on lectures to construct an animated scenic drawing program. The scene is composed of a sun/moon, a cloud, mountains, a forest. The cloud is moving in the breeze. There are five buttons for the user to click, each of which will affect different things on the scene. You will learn to create a window and then draw the sky, the ground, the sun, the cloud with random shape, the mountains and the forest with trees at random positions and colors. You will know how to display the message and draw buttons on the screen. In addition, you will need to move the cloud and change the mode of the scene or stop the program once each of the buttons is pressed. There are four modes: Sunny day, Moon Night, Sunny windy day, and Moon windy night. The program always starts with a Sunny day. Four buttons provide the transition between the four modes as the following graph. 1 DUE ON 5PM NOV 20, 2020 Day button makes only night modes like Moon Night and Moon Windy Night transit to day modes, respectively. For example, from Moon Night to Sunny Day and from Moon Windy Night to Sunny Windy Day. Reverse effects should be done for the Night button. For example, from Sunny Windy Day to Moon Windy Night, and from Sunny Day to Moon Night. Windy button makes the cloud move faster and transit to Windy modes, for example it transforms from Sunny Day to Sunny Windy Day, or from Moon Night to Moon Windy Night. Breeze button restores the normal cloud speed and transits to non-Windy mode like from Sunny Windy Day or Moon Windy Night to Sunny Day or Moon Night, respectively. You can find the template file on the canvas page and complete it by following the steps below. The steps of this homework helps you to understand how to build this program from what was provided, by following each step IN THE ORDER, you would progressively understand how the program works and complete this homework. 2 DUE ON 5PM NOV 20, 2020 Step 1: Window, Sky, Ground, Mountains, Sun, Moon, and Message. First of all, you need to create a window of size 800 pixels x 600 pixels (width x height) and set virtual coordinates of the window to run from (0, 0) in the lower-left corner to (40, 30) in the upper-right corner. The following coordinates used in this document are based on the new coordinate system instead of the old standard one with (0,0) at upper-left corner and (800, 600) at bottom-right corner. You need to draw the sky by the object of Rectangle covering the upper half of the window with color “light blue”, draw the ground by the object of Rectangle covering the lower half of the window with color “light green”, and draw the sun by the object of Circle at (20, 25) with radius 2 pixels and color “yellow” and outline color “yellow”. Then you create the moon by two objects of Circle: one at (20, 25) with radius 2 pixels and color “white” and outline color “white”, the other one at (20.75, 26) with radius 2 pixels and color "navy" and outline color "navy". Make sure the moon does not show or block the sun for the first time. You draw the mountains by implementing the two “dark green” objects of Polygon: one with coordinates (0, 15), (15, 25), (35, 15) and the other one with coordinates (10, 15), (23, 23), (40, 15). For all these objects, call setFill and setOutline to set wanted colors. It is also important to note that the order of drawing these objects to make sure anything will not be covered. Finally, you draw the message by the object of Text at (20, 29) with bold and red font showing “Sunny Day” for the first time. After you have completed the above, you should be able to see the following screen: 3 DUE ON 5PM NOV 20, 2020 Step 2: Cloud In this step, you implement a function to draw a cloud in front of the mountains and call the function. drawCloud (win, x1,x2,y1,y2) ● You draw a cloud by several objects of Circle at different random positions. ● Using a loop statement, you are to randomly produce a point (Point(x,y)) in each iteration as the center of the circle to draw a circle with radius of 2, color “white”, outline color “white” and append that circle to a list. ● win is the window to draw the cloud. x1, x2, y1, y2 are coordinates on the lower and upper limit of x coordinates and the lower and upper limit of y coordinates, respectively, of the area where you randomly set the centers of the circles. ● This function should return a list of all circles. After you have completed the above, You should be able to see something similar to the following screenshot: 4 DUE ON 5PM NOV 20, 2020 Step 3: Forest Given the function drawTree(), you need to draw a forest by composing a function, drawForest() by calling drawTree(). drawTree(x, y, color, unit, win) ● x and y are the coordinate of the center of the bottom of a tree trunk. ● color is the green-related color of the upper polygons (leaves) ○ The color of the trunk is “brown”. ● unit is the basic length to depend on to draw the objects. ● win is the window to draw. ● There is no return for the function. ● This function draws a tree by one object of Rectangle and three objects of Polygon. The points are defined in the following specification: ○ Height of the trunk is 0.825 * unit ○ Distance from peak of the lowest polygon (triangle) to the bottom of the trunk is 3.125 * unit ○ Distance from peak of the middle polygon (triangle) to the bottom of the trunk is 4 * unit ○ Distance from peak of the highest polygon (triangle) to the bottom of the trunk is 4.575 * unit ○ Width of the lowest polygon (triangle) is 4 * unit ○ Width of the middle polygon (triangle) is 3 * unit ○ Width of the highest polygon (triangle) is 2.5 * unit 5 DUE ON 5PM NOV 20, 2020 You are supposed to draw a forest by calling drawTree() repeatedly in the function drawForest(). First, you will need to randomly generate the x and y coordinates for each tree with reasonable space between them. Thus, you define a rectangular area (like the drawing of cloud), for example, between point (4, 3) and point (36, 13), where you want to draw the trees, then you draw trees row by row (for example, 2 pixels between rows from y=13 to y=3, top to bottom) so that they will be less likely covered by other trees. In the same row, you generate the random x and y coordinates of the bottom of trunks by dividing the width of the area by the numTreeInRow and adding random values to the divided values so that the trees are planted in variations.. Additionally, you will be given a list of colors so every time you call drawTree() you randomly select a color from the following colors: "forestgreen", "darkolivegreen", "olivedrab", "yellowgreen", "limegreen", "seagreen", "darkseagreen", "mediumseagreen", "lightseagreen", "springgreen","greenyellow", and "lime". drawForest (win, numTreeInRow) ● You draw a forest by calling the drawTree() function iteratively. As stated in the previous paragraph, within the area, you row-by-row randomly produce a point (Point(x,y)) for the bottom of the trunk for the first two arguments of the drawTree() function and randomly pick a color from the green color list for the third argument and randomly set the unit from 0.4 to 0.8 for the fourth argument. ● win is the window to draw ● numTreeInRow is the upper limit of the number of the tree in each row. ● This function doesn’t return. After you have completed the above, you should be able to see something similar to the following screenshot: 6 DUE ON 5PM NOV 20, 2020 Step 4: Create buttons: Day, Night, Windy, Breeze, and Exit. createButtons(win): ● win is the window to draw the buttons. ● This function returns a list of the buttons in the same order of the given list of strings “Day”, “Night”, “Windy”, “Breeze”, and “Exit. ● All buttons are of size 4 x 2 (width x height) with color “gray”. All text labels are bold white fonts. It is better using a loop statement. ● Day button is composed of a rectangle with lower-left point (2, 2) and a text centered at (4, 3) ● Night button is composed of a rectangle with lower-left point (7, 2) and a text centered at (9, 3) ● Windy button is composed of a rectangle with lower-left point (12, 2) and a text centered at (14, 3) ● Breeze button is composed of a rectangle with lower-left point (17, 2) and a text centered at (19, 3) ● Exit button is composed of a rectangle with lower-left point (22, 2) and a text centered at (24, 3) After you have completed the above, you should be able to see something similar to the following screenshot: 7 DUE ON 5PM NOV 20, 2020 Step 5: Move the cloud and button clicking handlers: In main(), you need to construct a forever-running loop statement to prevent the program stop. Inside the infinite loop, you need to move the cloud by iterating through each of the circle objects in the list and call their move() functions one by one to let the cloud drift from left to right each time with a fixed amount in a speed variable, for example, 0.05. Whenever a circle reaches the right border of the window (hint: compare x coordinate of p1 to a value), you move it back to the left border of the window so that the cloud can show again without generating a new one. (Note that move() function requires the relative offset instead of absolute coordinates). After you have completed the above, you should see the following examples: Next, in the infinite loop, you need to capture the mouse event by using the checkMouse() function of the window object. The return value should be checked for None or the value should be a point having the x and y attributes to access. You should check a clicked point is within each of the buttons and perform the corresponding changes: 8 DUE ON 5PM NOV 20, 2020 ● “Day” button: draw the sun, undraw the components of the moon, the sky should be “light blue”, and the cloud should be of color “white” and outline color “white”. Set the message to “Sunny Day” if either the “Breeze” button was clicked right before or the window just started. Otherwise, display “Sunny Windy Day” if the “Windy” button was clicked right before. ● “Night” button: draw the sun, undraw the components of the moon, the sky should be “navy”, and the cloud should be of color “gray” and outline color “gray”. Set the message to “Moon Night” if either the “Breeze” button was clicked right before or the window just started. Otherwise, display “Moon Windy Night” if the “Windy” button was clicked right before. ● “Windy” button: change the variable controlling the speed of the cloud to be 4 times faster. Set the message either from “Moon Night” to “Moon Windy Night” or from “Sunny Day” to “Sunny Windy Day” depending on the day or night it is now. ● “Breeze” button: change the variable controlling the speed of the cloud to be original normal one. Set the message to either from “Moon Windy Night” to “Moon Night” or from “Sunny Windy Day” to “Sunny Day” depending on the day or night it is now. ● “Exit” button: your program should get out of the infinite loop and close the window and stop. One possible way to do this is to keep track of the state of the program, gameState. You can set it to 0 for sunny day, 1 for moon night, 2 for sunny windy day, and 3 for moon windy night. For each button click, you check for the value of the gameState, and do the designated graphical changes, and then set it to the next value of the gameState. For example, if a Day button is clicked, if right now it is in moon night mode (gameState is 1), you need to undraw the moons, draw the sun, set the background color and also the cloud colors, and finally set the gameState to be 0 and change the message text according to the new gameState. Similar actions should be done for moon windy night (gameState is 3) when the Day button click occurs. Note that no action is needed for the sunny day (gameState is 0) or sunny windy day (gameState is 2) since it is already in day time when you click on the Day button. After you have completed all the above, you should see something similar to the following examples. 9 DUE ON 5PM NOV 20, 2020 Sunny Day (Breeze) scene: Moon Night (Breeze) scene: Sunny Windy Day scene: 10 DUE ON 5PM NOV 20, 2020 Moon Windy Night scene: Please come to your discussion and lab sections. TA will give you a demo and necessary instructions for you to write your own code. Grading criteria: 1. Step 1 (10 points) 2. Step 2 (10 points) 3. Step 3 (30 points) 4. Step 4 (10 points). 5. Step 5 (30 points) Submission: ● Submit your homework before the deadline to the canvas page. ● Submit only the Python source file (.py) with your UCI ID number appended to the filename (for example, ”hw4-87654321.py”). ● Only Canvas submission is accepted. Late submission will be penalized as announced in the first week of the quarter (80% before 5pm Saturday, 60% before 5pm Sunday, and 0% after 5pm Sunday) 11
欢迎咨询51作业君
