-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
214 lines (198 loc) · 21.8 KB
/
Copy pathindex.html
File metadata and controls
214 lines (198 loc) · 21.8 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html>
<!-- CS559 Workbook Pages - page content © 2021, Michael Gleicher -->
<!-- This page is part of a Workbook developed for the
CS559 Computer Graphics Class at the University of Wisconsin
https://graphics.cs.wisc.edu/Courses/559-sp2021/ -->
<head>
<meta name="generator" content="Hugo 0.110.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/workbook.css">
<script src="./js/resizeIFrames.js"></script>
</head>
<body>
<div class="container container--outer"><div class="maincolumn">
<main class="main list" role="main">
<header class="main__header">
<h1 class="main__title">Workbook 5: Curves in 2D</h1>
</header>
<div class="content main__content clearfix">
<div class="dimbox">
<h2>CS559 Spring 2023 Sample Solution</h2>
<p>This is a sample solution for the Workbook.
You are welcome to refer to it to learn one way to do the assignment
but only after you have turned in your own assignment
</p>
</div>
<p>In this workbook, we’ll get beyond straight lines to consider curves in 2D.</p>
<p>This is an exta large workbook. In the past it was 1 1/2 workbooks, but that didn’t work out for various reasons. This year, it is a “large” workbook - with a different set of rules about timing and late policy.</p>
<p>This workbook is due on <strong>Monday, March 6th.</strong> That gives you 2 weeks to do it on time! Be aware that the cutoff (1 week later) is during Spring Break and there will be no consulting hours during break. Note that you cannot drop your score for this workbook.</p>
<p>The workbook is due the same week as the exam. The workbook is a good way to learn the key concepts (which will appear on the exam).</p>
<p>The “programming project” that goes with Curves is to make a train. It is now the last pages of this workbook.</p>
<p>Since it is bigger, this workbook has more points than most other workbooks. The scoring system still applies - 90=A, but this is your opportunity to score lots of points to raise your average!</p>
<p>Several pages have required exercises on them. But, as always, feel free to tinker with all of the provided example demos.</p>
<p>A warning: some of the things you need to complete the later parts of the workbook will only be discussed in the second week of curve lectures.</p>
<h2>Learning Goals</h2>
<ol>
<li>To understand the concepts of parametric curves and parameterizations</li>
<li>To understand curve tangents, derivatives, and continuity conditions</li>
<li>To understand piecewise polynomial representations of curves</li>
<li>To understand cubic segments, and the need for different forms</li>
<li>To understand arc-length parameterizations and how we approximate it</li>
<li>To understand the ideas and properties of Bezier curves including their geometric and algebraic formulations</li>
<li>To understand how we draw curves, including adaptation</li>
<li>To be able to use curves in various APIs, including curve format conversion</li>
<li>To practice some key computations with curves. (train)</li>
<li>To implement various aspects of curves in the context of an application. (train)</li>
<li>To appreciate why curve concepts, such as arc length parameterization and smoothness, are useful. (train)</li>
<li>To write an interesting graphics program. (train)</li>
</ol>
<h2 id="required-readingwatching">Required Reading/Watching</h2>
<p>The basic concepts are best learned visually. The workbook has interactive gadgets. The lectures will use the interactive gadgets and handwaves. And there are fantastic videos online. Two excellent ones are <a href="https://www.youtube.com/watch?v=jvPPXbo87ds" target="_blank">The Continuity of Splines</a> and <a href="https://www.youtube.com/watch?v=aVwxzDHniEw" target="_blank">The Beauty of Bezier Curves</a> - these use fantastic animations to illustrate the concepts. Watch them. I don’t know if its better to watch them first, or to watch the lectures and read through the workbook first. The videos present things in a different way and a different order.</p>
<p><strong>Textbook:</strong> You will want to look at the book to see a bit more formalism and to have the equations written out (although, most of them are in the workbook). Curves are covered in <a href="https://canvas.wisc.edu/files/30140455/download?download_frd=1">FCG4_Ch15.pdf (0.5mb)</a>. It is best to read this after you watch the lectures and videos - the intuitions were hard to explain in writing (I can say that - I wrote the chapter). The workbook and lectures represent 20 years of me trying to find a better way to explain it. And the videos show what happens if you can spend a ton of time to make high quality animations.</p>
<ol>
<li>FCG 15.1 - basic ideas of curves, including parameterizations and piecewise representations</li>
<li>FCG 15.2 - curve properties (especially continuity)</li>
<li>FCG 15.3 - polynomial pieces - you need to have the basic intuitions, however, you will not need to do the derivations yourself.</li>
<li>FCG 15.4 - putting pieces together - this makes things sound more complicated than they are</li>
<li>FCG 15.5 - cubics - again, you won’t have to derive the different cubic types, but make sure you know what hermites and cardinals are</li>
<li>FCG 15.6.1 - Bézier curves - very important, since they are what gets used in Canvas and many other things. The workbook and lectures will give you the intuitions, the book will show you the equations.</li>
</ol>
<p>Section 15.6.2 discusses B-Splines, a really cool topic, but one we will only touch on in class. Reading about it (either in FCG 15.6.2 or Hart) is totally optional. It is useful for some of the advanced points at the end of the workbook - and if you want to do graphics beyond class.</p>
<details class="myexpand" >
<summary class="myexpand-head">Hart's Book - optional</summary>
<div class="markdown-inner myexpand-content">
<p>The Chapter of Hart’s book (<a href="https://canvas.wisc.edu/files/30140486/download?download_frd=1">Hart20-jan19.pdf (2.4mb)</a>) gets at the same material in a different way. You might find it helpeful. But it is optional. I recommend the YouTube videos instead.</p>
<ol>
<li>Hart 20.0 - basics of curves, a good review of the terms discussed in FCG 15.1-15.3</li>
<li>Hart 20.1 - the wiggle theorem - make sure you have the intuition that an nth degree polynomial has n-1 wiggles. I usually call this “varation diminishing”.</li>
<li>Hart 20.2 - Lagrangian curves - this is also 15.3.6 in FCG - understand the basic idea to know why we don’t use these things.</li>
<li>Hart 20.3 - Hermite curves - these are in 15.3.4 and 15.5.2 of FCG. You won’t need to derive them, but understanding what they are will be useful for Béziers and Cardinals, which we will use a lot.</li>
<li>Hart 20.4 - Bézier curves - these are important, so seeing them more than once may help.</li>
</ol>
<p>The rest of the Chapter focuses on B-Splines and rational curves, which we won’t cover in detail in class.</p>
</div>
</details>
<p><strong>Videos:</strong> The video <a href="https://www.youtube.com/watch?v=jvPPXbo87ds" target="_blank">The Continuity of Splines</a> is a 60 minute crash course in splines. It is well animated with nice examples to motivate topics, and illustrations of what is going on with the math. The topics aren’t exactly the ones we do in class, but it provides excellent to many topics - and the animations are fantastic. It has an awesome explanation of continuity, local control, and a bunch of things we won’t get to in lecture or the workbook.</p>
<p>The YouTube Video <a href="https://www.youtube.com/watch?v=aVwxzDHniEw" target="_blank">The Beauty of Bezier Curves</a> is a really nice introduction to Bezier curves. It is more focused than the longer video above. The video is a very nicely animated version of the same math in the workbook and my whiteboard derivations below. It goes on to explain arc length, and the methods for computing it. There is some overlap between this video and <a href="https://www.youtube.com/watch?v=jvPPXbo87ds" target="_blank">The Continuity of Splines</a> - but the redundant parts are important, so seeing them multiple times isn’t a problem.</p>
<p>A few years ago, I made some videos of me at the whiteboard to explain the algorithms for Bézier curves. The <a href="https://www.youtube.com/watch?v=aVwxzDHniEw" target="_blank">The Beauty of Bezier Curves</a> shows it much better, but this is useful for showing you what you would actually do solving a problem yourself (like on an exam):</p>
<ul>
<li><a href="https://mediaspace.wisc.edu/media/1_ht8bd4ii" target="_blank">DeCastlejau 2</a> - Showing the algorithm for 3 points (a second degree curve)</li>
<li><a href="https://mediaspace.wisc.edu/media/1_yfe2pejr" target="_blank">DeCastlejau 3</a> - Showing the algorithm for 4 points (a third degree curve)</li>
<li><a href="https://mediaspace.wisc.edu/media/1_b45evtd7" target="_blank">DeCastlejau 4</a> - Shows the connection between the geometric constructions and the polynomial forms</li>
</ul>
<h2 id="rubric-for-grading">Rubric for Grading</h2>
<p>This workbook has a lot of points - you can get an A without doing any advanced points, and you can earn a lot of advanced points if you try. As always, your best bet is to focus on the basic points first - you get a lot of them for doing (relatively) easier things; the advanced points are trickier.</p>
<div class="page-rubric-container">
<details class="page__rubric">
<summary>Workbook Rubric (110 points total)</summary>
<br/>
<div class="page-rubric-grid">
<div class="page-rubric-grid-header rubric-box-regular">Points (90):</div><div class="page-rubric-grid-box rubric-box-regular"></div>
<div class="page-rubric-grid-points rubric-box-regular">30 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">correct hand-in</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-01-02</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">implement the correct tangent vector for the parabola</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-03-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">cubic coefficients question</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-04-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">evaluate Hermite</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-07-03</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">divide the Bezier curve</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">recreated the picture using canvas</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-09-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">didn't use quadratic commands but got the correct shape using cubics</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-09-02</div>
<div class="page-rubric-grid-points rubric-box-regular">5 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">draw a picture that demonstrate the use of bezierCurveTo in Canvas</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-09-02</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">explained where there is G(1) continuity between Bezier segments</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-10-03</div>
<div class="page-rubric-grid-points rubric-box-regular">5 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">make the green dot go around the triangle with arc-length parameterization</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-11-01</div>
<div class="page-rubric-grid-points rubric-box-regular">5 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">draw the spiral</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-11-01</div>
<div class="page-rubric-grid-points rubric-box-regular">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">checkbox control of lines</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-11-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">slider control of number of points</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-12-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">make a cardinal spline through the points</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-12-02</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">split the Bezier</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">4 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Drawing the track as a single simple curve (cardinal spline) that interpolates the control points</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">5 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Train goes around the track correctly ('evenly in parameter space' - continuous looping motion)</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">The interface still works (the track can be moved and the run slider works, even while the train is in motion)</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Train has a front</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Train points in the right direction as it goes around the track</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Train direction and motion is correct even as points are added/removed</div><div class="page-rubric-grid-box rubric-box-regular">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-regular">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-regular">Default track configuration shows off arc length (train should speed up and slow down if arc length parameterization is turned off or not implemented)</div>
<div class="page-rubric-grid-header rubric-box-bonus">Advanced points (30 possible, of which you can earn a maximum of 20):</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-11-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">approximate spiral with Beziers, have a switch for lines/Beziers</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Arc Length parameterization (train goes at a relatively constant speed as it goes around the track, no matter what the control point spacing is). You must add a checkbox to turn this on and off. This one is hard, but it enables several of the other things, so it is actually worth a lot</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Rail Ties drawn perpendicular to track</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Rail Ties drawn with correct spacing (this is simple once you have arc-length</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Parallel rails</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">5 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Multiple cars (requires keeping the cars a fixed distance apart)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">3 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Trucked wheels (requires keeping the pairs of wheels the correct distance apart and on the track, and having the train car positioned appropriately - this is only for people who are into trains and appreciate this detail)</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Slider to control tension</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Switchable B-Splines</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">2 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Smoke</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Scenery</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Scenery adapts to the track</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Artistic merit: nice looking train</div><div class="page-rubric-grid-box rubric-box-bonus">Box 05-14-01</div>
<div class="page-rubric-grid-points rubric-box-bonus">1 pt</div>
<div class="page-rubric-grid-desc rubric-box-bonus">Artistic merit: nice looking track</div></div>
</details>
</div>
<p>As you go through the workbook pages, feel free to tinker with the programs we have given you as a way to understand how they work!</p>
<h2 id="get-started">Get Started</h2>
<p>Don’t forget to commit and push as you work!</p>
<h3 class="get__started">Get started on
<a href="./docs/1/">Page 1 (Curves)</a>!</h3>
</div>
</main>
</div>
<div class="sidebar">
<h2 class="Side_Title">Workbook 5: Curves in 2D</h2>
<p class="Side__Note">Pages:</p>
<ul class="Side__List">
<li class="Side__Item Side__Selected">Index (CS559 Workbook 5: Curves in 2D) </li>
<li class="Side__Item Side__Unselected"> <a href="./docs/1/">1: Curves </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/2/">2: Piecewise Parameteric Curves and Continuity </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/3/">3: Cubics </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/4/">4: Interpolation and Hermite Cubics </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/5/">5: Cardinal Cubics and Interpolation </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/6/">6: Bézier Curves </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/7/">7: DeCastlejau Constructions </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/8/">8: Bézier Cubics </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/9/">9: Béziers in APIs </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/10/">10: Arc-Length Parameterizations </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/11/">11: Drawing Curves </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/12/">12: Curve review </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/13/">13: The Train: Intro </a></li>
<li class="Side__Item Side__Unselected"> <a href="./docs/14/">14: The Train: Assignment </a></li>
</ul>
</div>
</div>
</body>
</html>