-
Notifications
You must be signed in to change notification settings - Fork 0
/
416219535.html
111 lines (98 loc) · 22 KB
/
416219535.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>Di Luo : Di Luo's CS151 Project 6</title>
<link rel="stylesheet" href="styles/site.css" type="text/css" />
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="theme-default aui-theme-default">
<div id="page">
<div id="main" class="aui-page-panel">
<div id="main-header">
<div id="breadcrumb-section">
<ol id="breadcrumbs">
<li class="first">
<span><a href="index.html">Di Luo</a></span>
</li>
<li>
<span><a href="413631037.html">Di Luo’s Home</a></span>
</li>
<li>
<span><a href="474513786.html">Di Luo's CS151</a></span>
</li>
</ol>
</div>
<h1 id="title-heading" class="pagetitle">
<span id="title-text">
Di Luo : Di Luo's CS151 Project 6
</span>
</h1>
</div>
<div id="content" class="view">
<div class="page-metadata">
Created by <span class='author'> Di Luo</span>, last modified on Oct 22, 2018
</div>
<div id="main-content" class="wiki-content group">
<p><strong><u>Description</u></strong></p><div><strong><u><br/></u></strong></div><div>In Project 6, I needed to continue working with Zelle graphic objects, create a scene that is a collection of complex objects and let the objects move or change color to create an animation. <span style="color: rgb(34,51,68);">The complex objects are collections of Zelle graphics primitives and each complex object has a function that initializes it (object_init()) and any complex object that changes in location or color has a function that animates it (object_animate()). In my project I decided to create a city scene including buildings and moving cars. In the _init() functions of each objects I created multiple Zelle graphics primitives and stored them in a list so that when I needed to draw the object, the primitives in the list would be drawn one by one by using for loops and finally combined to be the object. Then the _animate() function would make the object move. By using <span style="color: rgb(34,51,68);">top-down design and the coding knowledge that I learned previously in my code, such as for loops and while loops, I successfully created a scene with multiple stationary buildings and some moving cars. </span></span></div><div><strong><u><br/></u></strong></div><div><div><u><strong>Task 1</strong></u><strong><u><br/></u></strong></div><div><u><strong><br/></strong></u></div><div>First I created the function building_init() to create and return a list of graphics objects to make up a building. The building is combined by a big brown rectangle with five small rectangles in side, four being the windows and one being the door. The windows are blue and the door is gray. The function also has three variables, x, y, and scale so that the complex shape can be drawn on any (x,y) location in the window and can have different sizes by changing the scale.</div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail" draggable="false" width="100" src="attachments/416219535/416186771.png" data-image-src="attachments/416219535/416186771.png" data-unresolved-comment-count="0" data-linked-resource-id="416186771" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.04.31 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/416219535/416186772.png" data-image-src="attachments/416219535/416186772.png" data-unresolved-comment-count="0" data-linked-resource-id="416186772" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.04.35 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail" draggable="false" width="100" src="attachments/416219535/416186775.png" data-image-src="attachments/416219535/416186775.png" data-unresolved-comment-count="0" data-linked-resource-id="416186775" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.08.10 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail" draggable="false" width="100" src="attachments/416219535/416186778.png" data-image-src="attachments/416219535/416186778.png" data-unresolved-comment-count="0" data-linked-resource-id="416186778" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-20 at 9.54.10 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span>(The Building)</div><div> </div><div>Then I created the function car_init(), which is similar to building_init(), to create and return a list of graphics objects to make up a car. The car is combined by one bigger blue rectangle as base, one smaller purple rectangle as top, and two identical black circles as wheels. The car_init() function also has three variables, x, y, and scale.</div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail" draggable="false" width="100" src="attachments/416219535/416186779.png" data-image-src="attachments/416219535/416186779.png" data-unresolved-comment-count="0" data-linked-resource-id="416186779" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.12.23 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span>(The Car)</div><div> </div><div>After that, in order to make the car objects move, I wrote the function car_animate(), which has three variable shapes, frame_num, and win. By giving the function the car list, a frame number, and a window, it draws the car in the window for the given frame number.</div><div> </div><div>Then I created the function draw() containing two variables objlist and win. The function can draw all of the objects in objlist in the window (win).</div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/416219535/416186773.png" data-image-src="attachments/416219535/416186773.png" data-unresolved-comment-count="0" data-linked-resource-id="416186773" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.05.05 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div> </div><div>Finally I created two functions, test_car() and test_building() and each of them can<span style="color: rgb(34,51,68);"> create a window, create multiple versions of the complex object, and then wait for a mouse click to quit</span>. The function test_building() draws three buildings with different sizes and the function test_car() draws three cars with different sizes that moves from the left to the right of the window.</div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="250" src="attachments/416219535/416186776.png" data-image-src="attachments/416219535/416186776.png" data-unresolved-comment-count="0" data-linked-resource-id="416186776" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.08.26 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="250" src="attachments/416219535/416186777.png" data-image-src="attachments/416219535/416186777.png" data-unresolved-comment-count="0" data-linked-resource-id="416186777" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.08.38 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><u><strong><br/></strong></u></div><div><u><strong><br/></strong></u></div><div><div><u><strong>Task 2</strong></u></div><div><u><strong><br/></strong></u></div><div>First, I created the file scene.py with my <span style="color: rgb(34,51,68);">complex_shape package, <span style="color: rgb(34,51,68);">graphicsPlus package, and the time package </span>imported. Then I wrote the main function which<span style="color: rgb(34,51,68);"> initialize the complex objects in the scene, draw them, and <span style="color: rgb(34,51,68);">then execute a loop and animate the car objects. The lists in the list were created to store the objects and the function would show the animation and <span style="color: rgb(34,51,68);">wait for a mouse click to quit.</span></span></span></span></div><div><span style="color: rgb(34,51,68);"><span style="color: rgb(34,51,68);"><span style="color: rgb(34,51,68);"><span style="color: rgb(34,51,68);"><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="250" src="attachments/416219535/416186784.png" data-image-src="attachments/416219535/416186784.png" data-unresolved-comment-count="0" data-linked-resource-id="416186784" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.21.59 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></span></span></span></span></div></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="250" src="attachments/416219535/416186782.png" data-image-src="attachments/416219535/416186782.png" data-unresolved-comment-count="0" data-linked-resource-id="416186782" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.22.06 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="250" src="attachments/416219535/416186783.png" data-image-src="attachments/416219535/416186783.png" data-unresolved-comment-count="0" data-linked-resource-id="416186783" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-10-21 at 12.22.25 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><u><strong><br/></strong></u></div><div>Finally, I took some screen shots for the window of the animation and used the order below in Terminal to create a gif of my animation stored in myanimation.gif.</div><div><p><samp>convert -delay 60 *.png myanimation.gif</samp></p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/416219535/416187152.png" data-image-src="attachments/416219535/416187152.png" data-unresolved-comment-count="0" data-linked-resource-id="416187152" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2018-10-22 23:4:46.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><u><strong><br/></strong></u></div><div><u><strong><br/></strong></u></div><div><div><u><strong>Extensions</strong></u></div><div><u><strong><br/></strong></u></div><div>For extension, firstly, I created the function cloud_init() to create and return a list of graphics objects to make up a cloud. Then I wrote the function cloud_animate() to make the cloud move between the left side and the right side of the window. Moreover, I wrote another animate function to make one of the cars move in the opposite direction. Besides, I created a traffic light in the scene and everything moves when the light is green; when the traffic light turned red, everything stops moving and the window will <span style="color: rgb(34,51,68);">wait for a mouse click to quit. Finally I created another animation of the city scene.</span></div><div><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/416219535/416186770.gif" data-image-src="attachments/416219535/416186770.gif" data-unresolved-comment-count="0" data-linked-resource-id="416186770" data-linked-resource-version="2" data-linked-resource-type="attachment" data-linked-resource-default-alias="myanimation.gif" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/gif" data-linked-resource-container-id="416219535" data-linked-resource-container-version="17"></span></div><div><u><strong><br/></strong></u></div><div><u><strong><br/></strong></u></div><div><u><strong><u><strong>Reflection</strong></u></strong></u></div></div><div><u><strong><br/></strong></u></div><div>In Project 6, I reviewed and applied the knowledge I learned in class and lab, including but not only <span style="color: rgb(34,51,68);">Zelle graphics package,</span> for loops, while loops, and the concept of list. I learned how to create a complex shape by putting the components of it, which are simple objects, into a empty list. By doing this I can make my code more organized and readable and when I need to draw the complex shape, I just need to print out the objects in the list by using for loops. I also learned to use lists in a list to store different versions of my complex shapes together, which also makes my code <span style="color: rgb(34,51,68);">succinct. Besides, I learned how to use time package, for loops, while loops and the _animate() functions to create an animation. Moreover, I also reviewed the parameters by using three parameters (x, y and scale) in order to put my shapes on different locations in the window and change the sizes of them. Furthermore, I also learned how to create convert a group of pictures into gif by using convert command in Terminal.</span></div><strong><u><br/></u></strong></div><div><u><strong>Source</strong></u></div><p>I worked on this project by myself.</p><p> </p>
</div>
<div class="pageSection group">
<div class="pageSectionHeader">
<h2 id="attachments" class="pageSectionTitle">Attachments:</h2>
</div>
<div class="greybox" align="left">
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416187149.gif">myanimation.gif</a> (image/gif)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186771.png">Screen Shot 2018-10-21 at 12.04.31 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186772.png">Screen Shot 2018-10-21 at 12.04.35 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186773.png">Screen Shot 2018-10-21 at 12.05.05 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186774.png">Screen Shot 2018-10-21 at 12.07.52 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186775.png">Screen Shot 2018-10-21 at 12.08.10 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186776.png">Screen Shot 2018-10-21 at 12.08.26 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186777.png">Screen Shot 2018-10-21 at 12.08.38 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186778.png">Screen Shot 2018-10-20 at 9.54.10 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186779.png">Screen Shot 2018-10-21 at 12.12.23 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186782.png">Screen Shot 2018-10-21 at 12.22.06 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186783.png">Screen Shot 2018-10-21 at 12.22.25 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186784.png">Screen Shot 2018-10-21 at 12.21.59 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416186770.gif">myanimation.gif</a> (image/gif)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/416219535/416187152.png">image2018-10-22 23:4:46.png</a> (image/png)
<br/>
</div>
</div>
</div> </div>
<div id="footer" role="contentinfo">
<section class="footer-body">
<p>Document generated by Confluence on Aug 29, 2022 09:29</p>
<div id="footer-logo"><a href="http://www.atlassian.com/">Atlassian</a></div>
</section>
</div>
</div> </body>
</html>