-
Notifications
You must be signed in to change notification settings - Fork 0
/
418153535.html
90 lines (77 loc) · 19.8 KB
/
418153535.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
<!DOCTYPE html>
<html>
<head>
<title>Di Luo : Di Luo's CS151 Project 10: Non-Photorealistic Rendering</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 10: Non-Photorealistic Rendering
</span>
</h1>
</div>
<div id="content" class="view">
<div class="page-metadata">
Created by <span class='author'> Di Luo</span>, last modified on Nov 30, 2018
</div>
<div id="main-content" class="wiki-content group">
<p><strong><u>Description</u></strong></p><p>In Project 10, we continued working on drawing shapes with turtle interpreter, L-system and the shape classes to create images. However, this time we <span style="color: rgb(34,51,68);">implemented Non-Photorealistic Rendering (NPR) and other styles of drawing into our turtle interpreter class and shape class, and we also improved the classes so that we can handle </span><span style="color: rgb(34,51,68);">parameterized L-systems. NPR makes the lines that we draw seem like being sketched by hand. Other styles like dotted make the <span>line</span> that we draw more abstract. Parameterized L-systems gives us much more flexibility in defining shapes and complex L-system objects. Then we </span><span style="color: rgb(34,51,68);">enhanced my scene from the last project by making use of the various styles and parameterized L-systems.</span></p><p><span style="color: rgb(34,51,68);"><br/></span></p><p><strong><u>Task 1</u></strong></p><p>First I implement a style "jitter3" that would draw the line segment as three, cross-crossing jittered line, which is similar to the "jitter' style in the lab. All three lines began at a point that was a short, random distance from the turtle's initial position and then would end at a point that is at a short, random distance from the desired end point. Several goto statements were used to accomplish this and the jx and jy values in goto statements were regenerated from a Gaussian distribution with a zero mean and jitterSigma as the standard deviation. To ensure that the turtle was correctly positioned I determined the normal ending position before I moved the turtle.</p><p> </p><p><strong><u>Task 2</u></strong></p><p>Then I created a 'dotted' style that draws a series of circles separated by spaces, which is similar to how we created two other styles before. The field dotSize is created in the TurtleInterpreter and the shape class to hold the dotSize as the radius of the circle. setDotSize is also created in both turtle interpreter class and shape class. To create each dotted line, the number of dots were counted by distance divided by dot size*2 and then circles were drawn and each two of them were separated by the diameter of the circle (dot size*2). To ensure that the turtle was correctly positioned I also determined the normal ending position before I moved the turtle.</p><p> </p><p><strong><u>Task 3</u></strong></p><p><span style="color: rgb(34,51,68);">Next, I created a file demo_line_styles.py that draws multiple copies of one of my shapes from last week – </span>Rhombus<span style="color: rgb(34,51,68);">. The four groups of shapes show the four different styles: 'normal', 'jitter', and 'jitter3', and 'dotted' styles and they are shown in the picture below. The group on the top of <span>left</span> side is the normal style, which has two rhombi with 2 different line widths. The groups on the top of right side and on the bottom of left side are jitter style and jitter3 style, which respectively have two rhombi with 2 different jitterSigme. Dotted style group is<span style="color: rgb(34,51,68);"> on the bottom of right side</span>, containing 2 rhombi with 2 different dot sizes.</span></p><p><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="400" src="attachments/418153535/418317319.png" data-image-src="attachments/418153535/418317319.png" data-unresolved-comment-count="0" data-linked-resource-id="418317319" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-27 at 10.38.26 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span>(Required Image 1)</span></p><p><strong><u><br/></u></strong></p><p><strong><u>Task 4</u></strong></p><p>Then I m<span style="color: rgb(34,51,68);">ade a copy of your home scene code from last week and put it in a new file home.py. I edited my scene so that it made use of the four different drawing styles. <span>NPR made the scene seem more like a picture drawn by hand. </span>A picture of the updated home scene is shown below. In the scene there is a house with a red jitter style triangle as the roof, a <span>black</span> jitter3 style block as the body and a brown jitter3 block as the door. In the center of the roof there is a dotted style yellow star. On the two sides of the house, there are two groups of trees and each group has two L-system trees. The L-system in the file systemJ.txt was used and the trees were drawn with jitter style with jitterSigma as 1. These shapes created this scene of my home.</span></p><p><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="500" src="attachments/418153535/418317320.png" data-image-src="attachments/418153535/418317320.png" data-unresolved-comment-count="0" data-linked-resource-id="418317320" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-27 at 11.00.42 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span>(Required Image 2)</span></p><p><strong><u><br/></u></strong></p><p><strong><u>Task 5</u></strong></p><p><span style="color: rgb(34,51,68);">Finally I made my own new parameterized stochastic multi-rule L-system and save it in a file named myLsystem.txt. It is a variation on the L-system in systemJ.txt. Ornaments (berries and leaves) were added and a lot of parameterized strings were used to make the angle different from each other and to make t<span style="color: rgb(34,51,68);">he width of turtle change frequently to make the tree seem more irregular</span>. The color of branches changed from brown to green sometimes. The structure was also slightly changed so that the tree looks more curving. </span></p><p>Then I made a scene or image that includes my L-system in a file named demo_myLsystem.py. The scene is similar to the home scene but the trees are changed to the new ones, which looks closer to the trees in reality than the original ones.</p><p>A picture of the scene with new L-system is shown below.</p><p><strong><u><br/></u></strong></p><p><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="500" src="attachments/418153535/418317321.png" data-image-src="attachments/418153535/418317321.png" data-unresolved-comment-count="0" data-linked-resource-id="418317321" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-30 at 3.54.05 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span>(Required Image 3)</span></p><p><span style="color: rgb(34,51,68);"><br/></span></p><p><strong><u><strong>Extensions</strong></u></strong></p><p>For extensions, firstly I created an animation with a few screenshots of the home scene, which is shown below. Because of the <span style="color: rgb(34,51,68);">Non-Photorealistic Rendering we used to draw the house, the animation seems like the house is changing all the time, but because of the limited jitter Sigma, the general shape of the house stays the same. Also because the trees are drawn with multi-rule L-system, the shape of the trees changes all the time.</span></p><p><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="300" src="attachments/418153535/418317341.gif" data-image-src="attachments/418153535/418317341.gif" data-unresolved-comment-count="0" data-linked-resource-id="418317341" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="output_HWLC0v.gif" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/gif" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span></span></p><p><span style="color: rgb(34,51,68);">Secondly, I added two</span> other drawing styles - brush and angledLines, and I used them to create two more groups of rhombi in demo_line_styles.py, one using brush style and the other using angledLines style, which are shown below. The brush style simulates a brush by drawing many approximately parallel lines. There are light variations in color between the different lines, making the lines look a rainbow. The angledLines style draws a series of straight lines at an angle to the direction of the actual line. For the brush style rhombi, I changed the width of turtle and for angledLines style I changed the length of the angled lines. In order to change the length of angled lines, I added the field lineSize and a function setLineSize in both turtleinterpreter and shape class, as same as what we did when we created jitter, jitter3 dotted style.</p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/418153535/418317342.png" data-image-src="attachments/418153535/418317342.png" data-unresolved-comment-count="0" data-linked-resource-id="418317342" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-30 at 10.20.15 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span></p><p>Thirdly I modified drawString so that when drawing a tree the branches droop down like gravity is pulling at them. As the picture of code snippets shown below, I created droop (Boolean) to determine whether to apply gravity effect or not. droop is added as a parameter of drawString in turtle interpreter and draw function in Tree class. Then when the effect is on, If the current heading is in the first or fourth quadrant (<span style="color: rgb(181,206,168);">0</span><=turtle.heading()<=<span style="color: rgb(181,206,168);">90</span> <span style="color: rgb(86,156,214);">or</span> <span style="color: rgb(181,206,168);">270</span><turtle.heading()<=<span style="color: rgb(181,206,168);">360 <span style="color: rgb(0,0,0);">in the code snippet</span></span><span style="color: rgb(0,0,0);">), t</span>hen gravity will make a right turn angle larger. If the current heading is in second or third quadrant (<span style="color: rgb(181,206,168);">90</span><turtle.heading()<=<span style="color: rgb(181,206,168);">270 <span style="color: rgb(0,0,0);">in the code snippet</span></span>), then gravity will make a right turn angle smaller. If the effect is off, original function will run. The second picture below shows two trees drawn by the test function in tree.py, the one on the left doesn't have the gravity effect and the other one does have.</p><p><span style="color: rgb(34,51,68);"> </span></p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/418153535/418317343.png" data-image-src="attachments/418153535/418317343.png" data-unresolved-comment-count="0" data-linked-resource-id="418317343" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-30 at 11.04.18 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span></p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/418153535/418317344.png" data-image-src="attachments/418153535/418317344.png" data-unresolved-comment-count="0" data-linked-resource-id="418317344" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-30 at 11.08.56 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span></p><p>Fourthly, I created a Ngon class to draw n-gon. The string for drawing in Ngon class is dynamic depending on the number of the sides that imported from the user.</p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-external-resource" draggable="false" width="300" src="attachments/416812911/417497102.png" data-image-src="https://wiki.colby.edu/download/attachments/416812911/Screen%20Shot%202018-11-11%20at%208.18.42%20PM.png?version=1&modificationDate=1541985698113&api=v2"></span></p><p> </p><p>Fifthly, all the shape subclasses have a parameter fill, which determines whether to add "{" at the beginning of the string and "}" at the end of the string in order to fill the shape.</p><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="300" src="attachments/418153535/418317345.png" data-image-src="attachments/418153535/418317345.png" data-unresolved-comment-count="0" data-linked-resource-id="418317345" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="Screen Shot 2018-11-30 at 11.39.32 PM.png" data-base-url="https://wiki.colby.edu" data-linked-resource-content-type="image/png" data-linked-resource-container-id="418153535" data-linked-resource-container-version="7"></span></p><p> </p><p><strong><u><strong>Reflection</strong></u></strong></p><p>In Project 10, I learned how to improve different aspects of turtle interpreter class, shape class and lsystem class step by step to enable them to draw more and more complex shapes. I learned how to create different drawing styles to make the lines different from each other and to make the scene more interesting. I learned how to use parameterized strings in L-system to adjust parts of the systems at a time instead of all at once. Besides, it is interesting to be able to change my home scene with more irregular shapes to make it closer to the reality.</p><p><strong><u><strong><strong><u><strong>Source</strong></u></strong></strong></u></strong></p><p>I worked on project 10 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/418153535/418317319.png">Screen Shot 2018-11-27 at 10.38.26 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317320.png">Screen Shot 2018-11-27 at 11.00.42 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317321.png">Screen Shot 2018-11-30 at 3.54.05 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317341.gif">output_HWLC0v.gif</a> (image/gif)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317342.png">Screen Shot 2018-11-30 at 10.20.15 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317343.png">Screen Shot 2018-11-30 at 11.04.18 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317344.png">Screen Shot 2018-11-30 at 11.08.56 PM.png</a> (image/png)
<br/>
<img src="images/icons/bullet_blue.gif" height="8" width="8" alt=""/>
<a href="attachments/418153535/418317345.png">Screen Shot 2018-11-30 at 11.39.32 PM.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>