-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDrawingAR.html
More file actions
479 lines (458 loc) · 28.6 KB
/
DrawingAR.html
File metadata and controls
479 lines (458 loc) · 28.6 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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Shuyang Du</title>
<link rel="shortcut icon" href="img/favicon.ico" type="images/x-icon"/>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/clean-blog.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Shuyang Du</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Other works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/素描1.jpg'); background-blend-mode: darken;">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1>A HoloLens appliaction that help the novice learn how to drawing.</h1>
<h2 class="subheading">Drawing AR</h2>
<span class="meta" style="font-family: 'PingFang SC';">Ongoing now, started from September, 2018</span>
</div>
</div>
</div>
</div>
</header>
<!-- Content -->
<article>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2 class="section-heading">The story begin with...</h2>
<p>For people who want to learn art and design, learning how to drawing is always the first step. Several months ago, I am also a novice who were learning drawing. However, for a student who major in computer science, it is not an easy task at first. Here are some episodes of my experience. </p>
<hr>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style="text-align:center;">
<img src="img/newArtboard.jpg" width="100%;"/>
</div>
</div>
<div class="container" style="font-family: 'PingFang SC';">
<hr>
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<p>In the studio I learned drawing, I noticed that these problems are usual for almost all beginner.
However, after several times practicing, we still feel very hard to solve these problems.
This phenomenon really attracted me, because it is truly a pain point for most drawing novices.
So I made a survey of both teachers and students, In order to figure out new problems and fully understand the pain point. </p>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2 class="section-heading">Survey</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; border-right: 1px solid lightgray;">
<h4>Teacher</h4>
<div class="row">
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; padding: 5px; ">
<h5>Questions</h5>
<p style="text-align: left; font-size: 16px;">1. Is there a orthodox process in drawing a sketch? </p>
<p style="text-align: left; font-size: 16px;">2. According to your observation, the novice usually have which kind of problem? </p>
<p style="text-align: left; font-size: 16px;">3. How did you do to help the students correct their fault? </p>
<p style="text-align: left; font-size: 16px;">4. Is there something could be improved in your teaching way, or something you should do better but you can't? </p>
</div>
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; padding: 5px;">
<h5>Answers</h5>
<p style="text-align: left; font-size: 16px;">1. Generally 3 steps, observing, sketching and rendering, but none of them are independent. </p>
<p style="text-align: left; font-size: 16px;">2. The result is shown in the graph below. </p>
<p style="text-align: left; font-size: 16px;">3. Basically just point it out, and show them the right way. </p>
<p style="text-align: left; font-size: 16px;">4. I often don't have enough time to review every student's work clearly, so I may not able to discover all the problems. </p>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-md-10 mx-auto" style=" text-align:center; padding: 5px;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
<li data-target="#myCarousel" data-slide-to="3" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/teacher1.JPG" alt="First slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/teacher2.JPG" alt="Second slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/teacher3.JPG" alt="Third slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/teacher4.JPG" alt="Third slide" style="height: 300px;">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; border-left: 1px solid lightgray;">
<h4>Student</h4>
<div class="row">
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; padding: 5px;">
<h5>Questions</h5>
<p style="text-align: left; font-size: 16px;">1. What is your drawing process? </p>
<p style="text-align: left; font-size: 16px;">2. What problems you have met in each step? </p>
<p style="text-align: left; font-size: 16px;">3. Is the teacher really help you a lot, or is there something could be improved? </p>
<p style="text-align: left; font-size: 16px;">4. Describe some details about your problems. </p>
</div>
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center; padding: 5px;">
<h5>Answers</h5>
<p style="text-align: left; font-size: 16px;">1. Also 3 steps(observing, sketching and rendering), but their answers are different in some details. </p>
<p style="text-align: left; font-size: 16px;">2. The result is shown in the graph below. </p>
<p style="text-align: left; font-size: 16px;">3. The teacher can always discover the problems I didn't notice. However, I often forgot her advice about how to correct my fault. </p>
<p style="text-align: left; font-size: 16px;">4. The result is shown in the graph below. </p>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-md-10 mx-auto" style=" text-align:center; padding: 5px;">
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel1" data-slide-to="1" ></li>
<li data-target="#myCarousel1" data-slide-to="2" ></li>
<li data-target="#myCarousel1" data-slide-to="3" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/student1.jpg" alt="First slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/student2.jpg" alt="Second slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/student3.JPG" alt="Second slide" style="height: 300px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/student4.JPG" alt="Second slide" style="height: 300px;">
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-10 col-md-10 mx-auto" style=" text-align:center;">
<img src="img/Artboard2.png" style="width: 80%;"/>
<p style="font-size: 16px; color: darkslategray; margin-top: 10px;">1. The observation is not meticulous enough; 2. There is a problem with the understanding of the shape; 3. The details are not accurate or their drawing skills are not enough to complete the details; 4. Their sequence is problematic; 5. Lack of necessary interpretation about sketching; 6. The posture of using pencil is incorrect; 7 Unfamiliar with drawing tools(different kind of pencils); 8. The scale and brightness of different objects are not unified, they are paradoxical (Lack of overall sense); 9. Lack of good sketching skills; 10. Lack of good rendering skills ; 11. Can not master the stroke strength well; 12. The character's look and the dynamic is difficult to grasp; 13. The texture of the specific material is hard to draw; 14. Used the eraser too much times and leave traces</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-10 col-md-10 mx-auto" style=" text-align:center;">
<img src="img/Artboard3.png" style="width: 80%;"/>
<p style="font-size: 16px; color: darkslategray; margin-top: 10px;">A: Problems in observation; (1)<Br>
B: Problems with the understanding of the shape; (2)<Br>
C: Problems in drawing details; (3,12,13)<Br>
D: Lack of overall sense, pay too more attention to one object; (8)<Br>
E: Lack of skills, not proficient enough to handle all the parts; (7,9,10,11,14)<Br>
F: Elementary problems, such as lack of interpretation, incorrect sequence and posture. (4,5,6)</p>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC';">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2 class="section-heading">Design & Development</h2>
<p></p>
<img src="img/Artboard4.png" style="width: 80%;"/>
<p>After confirming the developing tools and the device, I started to design the functions of my mixed reality application. </p>
<hr>
<h3>Functionality Design</h3>
<p>The functionality design is based on Stephen Krashen's Input Hypothesis[1], which is a group of five hypotheses of second-language acquisition.
However, I transformed its original meaning and tried using it in this project. The first hypothesis, which is known as i+1 hypothesis,
assume the learner's current level, and +1 means the next stage in learning. What I do in this project is to divide the learning process
into several "+1" stages, and let user acquire a part of knowledge or skills in each "+1" process, in order to help them make
a progress every time. </p>
<p>Here is the list functions, generally divided by the 3 steps of drawing a sketch according to the survey: </p>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:left;">
<h4>Observing</h4>
<p>1. You can label the objects by their distance(From the closet to the farthest). </p>
<h4>Rendering</h4>
<p>5. You can label each surface by their brightness(From the brightest to the darkest). </p>
<p>6. You can choose to display the line of termination of the objects, in order to better control the brightness of a curved surface. </p>
<p>7. You can choose to display shallow traces of strokes on order to help you render the details. </p>
<p>8. Recommend different kind of pencils according to the brightness of different surfaces. </p>
</div>
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:left;">
<h4>Sketching</h4>
<p>2. You can mark the polar point and adjust its scale to suit the drawing paper. </p>
<p>3. You can choose to display or hide the border of objects. This will help you sketch the shape correctly. </p>
<p>4. You can choose to display the light source and shadows, in order to help you better understand the location and shape of the shadows. </p>
<h4>Others</h4>
<p>9. Give the user some small tips when the user is drawing. </p>
<p>10. Use deep learning, training the data and images, establish an automatic scoring system. </p>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h4>View on Paper</h4>
<img src="img/Artboard_paper.jpg" width="100%;"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h3>Development Process</h3>
<p>As a student majors in Software Engineering, I am familiar with the current popular Agile Software Development[2], an approach to software
development under which requirements and solutions evolve through the collaborative effort of self-organizing and cross-functional teams and
their user(s). Scrum[3] is one of the development framework in Agile. However, for this individual project, I combined Scrum framework with some
features of iterative and incremental development[4]. Considering the difficulty of implementing each function is different: some functions won't
take a long time, others are hard or have a large workload, I divided them into 3 level: level 1 is the easiest, and level 3 is the hardest.
Starting from the easiest could bring self-achievement and shorten development time. The graphs below show the taxonomy of functions and the development process. </p>
<img src="img/pyramid.jpg" width="60%;"/>
<img src="img/Artboard_process.jpg" width="80%;"/>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center;">
<div id="Carousel_1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel_1" data-slide-to="0" class="active"></li>
<li data-target="#Carousel_1" data-slide-to="1" ></li>
<li data-target="#Carousel_1" data-slide-to="2" ></li>
<li data-target="#Carousel_1" data-slide-to="3" ></li>
<li data-target="#Carousel_1" data-slide-to="4" ></li>
<li data-target="#Carousel_1" data-slide-to="5" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/dev1.jpg" alt="First slide" style="height: 350px;">
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/dev2.jpg" alt="Second slide" style="height: 350px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/dev3.jpg" alt="Third slide" style="height: 350px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/dev4.jpg" alt="Forth slide" style="height: 350px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/dev5.jpg" alt="Fifth slide" style="height: 350px;">
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/dev6.jpg" alt="Sixth slide" style="height: 350px;">
</div>
</div>
<a class="carousel-control-prev" href="#Carousel_1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Carousel_1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span class="caption text-muted">Sprint 1, in developing</span>
</div>
<div class="col-lg-6 col-md-10 mx-auto" style=" text-align:center;">
<div id="Carousel_2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#Carousel_2" data-slide-to="0" class="active"></li>
<li data-target="#Carousel_2" data-slide-to="1" ></li>
<li data-target="#Carousel_2" data-slide-to="2" ></li>
<li data-target="#Carousel_2" data-slide-to="3" ></li>
<li data-target="#Carousel_2" data-slide-to="4" ></li>
<li data-target="#Carousel_2" data-slide-to="5" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="./img/test1.jpg" alt="First slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Instructions</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="./img/test2.jpg" alt="Second slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Function 1</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/test3.jpg" alt="Third slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Function 2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/test4.jpg" alt="Forth slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Function 2</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/test5.jpg" alt="Fifth slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Function 5</p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="third-slide" src="./img/test6.jpg" alt="Sixth slide" style="height: 350px;">
<div class="container">
<div class="carousel-caption text-center">
<p>Function 9</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#Carousel_2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#Carousel_2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<span class="caption text-muted">Sprint 1 user test, view on HoloLens display. </span>
</div>
</div>
</div>
<hr>
<div class="container" style="font-family: 'PingFang SC'; font-size: 18px;">
<div class="row">
<div class="col-lg-12 col-md-10 mx-auto" style=" text-align:center;">
<h2 class="section-heading">Reference</h2>
<p><a href="https://en.wikipedia.org/wiki/Input_hypothesis">
[1] Stephen Krashen's Input Hypothesis</a></p>
<p><a href="https://en.wikipedia.org/wiki/Agile_software_development">
[2] Agile Software Development</a></p>
<p><a href="https://en.wikipedia.org/wiki/Scrum_(software_development)">
[3] Scrum (Software Development)</a></p>
<p><a href="https://en.wikipedia.org/wiki/Iterative_and_incremental_development">
[4] Iterative and Incremental Development</a></p>
</div>
</div>
</div>
</article>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a target="view_window" href="https://twitter.com/DuShuyang">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a target="view_window" href="https://www.facebook.com/shuyang.du.1">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a target="view_window" href="https://github.com/Coldstream-Louis">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">© 2018 Shuyang Du, all rights reserved</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>