Newer
Older
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sosuke Kanegae">
<link rel="canonical" href="https://fabacademy.org/2023/labs/kitakagaya/students/sosuke-kanegae/assignments/week02/">
<title>Week02. Computer Aided design - Sosuke Kanegae Fab Academy</title>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<link href="../../css/font-awesome.min.css" rel="stylesheet">
<link href="../../css/base.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/color-brewer.min.css">
<script src="../../js/jquery-1.10.2.min.js" defer></script>
<script src="../../js/bootstrap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="../..">Sosuke Kanegae Fab Academy</a>
<!-- Expander button -->
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Expanded navigation -->
<div id="navbar-collapse" class="navbar-collapse collapse">
<!-- Main navigation -->
<ul class="nav navbar-nav">
<li class="navitem">
<a href="../.." class="nav-link">Home</a>
</li>
<li class="navitem">
</li>
<li class="navitem">
<a href="../../final-project/" class="nav-link">Final Project</a>
</li>
<li class="dropdown active">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">assignments <b class="caret"></b></a>
<a href="../week01/" class="dropdown-item">Week01. Principles and Practices / Project Management</a>
</li>
<li>
<a href="./" class="dropdown-item active">Week02. Computer Aided design</a>
</li>
<li>
<a href="../week03/" class="dropdown-item">Week03. Computer controlled cutting</a>
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
</li>
<li>
<a href="../week04.md" class="dropdown-item">Week04. Embedded programming</a>
</li>
<li>
<a href="../week05.md" class="dropdown-item">Week05. 3D Scanning and printing</a>
</li>
<li>
<a href="../week06.md" class="dropdown-item">Week06. Electronics design</a>
</li>
<li>
<a href="../week07.md" class="dropdown-item">Week07. Computer controlled machining</a>
</li>
<li>
<a href="../week08.md" class="dropdown-item">Week08. Electronics production</a>
</li>
<li>
<a href="../week09.md" class="dropdown-item">Week09. Molding and casting</a>
</li>
<li>
<a href="../week10.md" class="dropdown-item">Week10. Output devices</a>
</li>
<li>
<a href="../week11.md" class="dropdown-item">Week11. Mechanical design & machine design</a>
</li>
<li>
<a href="../week12.md" class="dropdown-item">Week12. Input devices</a>
</li>
<li>
<a href="../week13.md" class="dropdown-item">Week13. Networking and communications</a>
</li>
<li>
<a href="../week14.md" class="dropdown-item">Week14. Interface and application programming</a>
</li>
<li>
<a href="../week15.md" class="dropdown-item">Week15. Wildcard week</a>
<a href="../week16.md" class="dropdown-item">Week16. Applications and implications</a>
</li>
<li>
<a href="../week17.md" class="dropdown-item">Week17. Invention, intellectual property and income</a>
</li>
<li>
<a href="../week18.md" class="dropdown-item">Week18. Project development</a>
<li class="navitem">
<a href="../../agreements/" class="nav-link">Agreements</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link" data-toggle="modal" data-target="#mkdocs_search_modal">
<i class="fa fa-search"></i> Search
</a>
</li>
<li class="nav-item">
<a rel="prev" href="../week01/" class="nav-link">
<i class="fa fa-arrow-left"></i> Previous
</a>
</li>
<li class="nav-item">
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
Next <i class="fa fa-arrow-right"></i>
</a>
</li>
<li class="nav-item">
<a href="https://gitlab.fabcloud.org/academany/fabacademy/2023/labs/kitakagaya/students/sosuke-kanegae" class="nav-link">Gitlab</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3"><div class="navbar-light navbar-expand-md bs-sidebar hidden-print affix" role="complementary">
<div class="navbar-header">
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#toc-collapse" title="Table of Contents">
<span class="fa fa-angle-down"></span>
</button>
</div>
<div id="toc-collapse" class="navbar-collapse collapse card bg-secondary">
<ul class="nav flex-column">
<li class="nav-item" data-level="1"><a href="#week-02-computer-aided-design" class="nav-link">Week 02. Computer Aided Design</a>
<ul class="nav flex-column">
<li class="nav-item" data-level="2"><a href="#assignments-for-this-week" class="nav-link">Assignments for this week</a>
<ul class="nav flex-column">
</ul>
</li>
<li class="nav-item" data-level="2"><a href="#what-ive-done-this-week" class="nav-link">What I've done this week</a>
<ul class="nav flex-column">
</ul>
</li>
<li class="nav-item" data-level="2"><a href="#1-draw-a-2d-model-of-the-silhouettes" class="nav-link">1. Draw a 2D model of the silhouettes</a>
<ul class="nav flex-column">
</ul>
</li>
<li class="nav-item" data-level="2"><a href="#2-model-a-structure-to-express-the-glowing-and-flickering-of-candles" class="nav-link">2. Model a structure to express the glowing and flickering of candles</a>
<ul class="nav flex-column">
</ul>
</li>
<li class="nav-item" data-level="2"><a href="#downloads" class="nav-link">Downloads</a>
</li>
</ul>
</li>
</ul>
</div>
</div></div>
<div class="col-md-9" role="main">
<h1 id="week-02-computer-aided-design">Week 02. Computer Aided Design</h1>
<h2 id="assignments-for-this-week">Assignments for this week</h2>
<ul>
<li>model a possible <a href="../../final-project/">final project</a></li>
<li>compress my images and videos</li>
<li>post a description with your design files on my class pages</li>
</ul>
<h2 id="what-ive-done-this-week">What I've done this week</h2>
<ol>
<li>Draw a 2D model of the silhouettes<ul>
<li>generator an image of a bird with AI</li>
<li>make a silhouette of a bird</li>
</ul>
</li>
<li>Model a structure to express the glowing and flickering of candles<ul>
<li>overlapping lattices</li>
<li>overlapping lattice shell structures</li>
<li>animation of the moving shells</li>
<!-- 3. Model structrures that make silhouettes of birds flapping their wings
* -->
<h2 id="1-draw-a-2d-model-of-the-silhouettes">1. Draw a 2D model of the silhouettes</h2>
<p>The first thing I did this week is to <strong>Draw the 2D model for silhouettes on my lamp</strong></p>
<h3 id="generator-an-image-of-a-bird-with-ai">generator an image of a bird with AI</h3>
<p>First, I used some AI art genorators to make some references of flying birds.</p>
<h4 id="wonder"><a href="https://apps.apple.com/jp/app/wonder-ai-art-generator/id1621278575">wonder</a></h4>
<p>First, I used the same iPhone app as last week, <a href="https://apps.apple.com/jp/app/wonder-ai-art-generator/id1621278575">wonder</a>, to generate images of birds.</p>
<p>This time I didn't select any style.</p>
<p>Set the aspect ratio to 3:2.</p>
<p>Set the keyword as "bird flying"</p>
<p>This is what I got:</p>
<p><img alt="img from wonder 1" src="../../images/week02/IMG_6909.JPG" /></p>
<p><img alt="img from wonder 2" src="../../images/week02/IMG_6910.JPG" /></p>
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
<h4 id="stable-diffusion"><a href="https://replicate.com/stability-ai/stable-diffusion">Stable Diffusion</a></h4>
<p>The next AI art generator I tried was <a href="https://replicate.com/stability-ai/stable-diffusion">Stable Diffusion</a>
I entered each options as followed:</p>
<table>
<thead>
<tr>
<th><strong>option</strong></th>
<th><strong>value</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>prompt</td>
<td>bird flying</td>
</tr>
<tr>
<td>negative_prompt</td>
<td>-</td>
</tr>
<tr>
<td>width</td>
<td>768</td>
</tr>
<tr>
<td>height</td>
<td>512</td>
</tr>
<tr>
<td>num_outputs</td>
<td>4</td>
</tr>
</tbody>
</table>
<p>The outputs were PNG files.
I converted the images to JPG file.</p>
<p>I made a bash file to convert every PNG file in a designated directory to JPG.</p>
<div class="highlight"><span class="filename">png2jpg.sh</span><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="k">for</span><span class="w"> </span>f<span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="nv">$1</span>/*.png<span class="p">;</span><span class="w"> </span><span class="k">do</span>
<a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w"> </span><span class="nv">g</span><span class="o">=</span><span class="k">$(</span>basename<span class="w"> </span><span class="si">${</span><span class="nv">f</span><span class="p">%.*</span><span class="si">}</span><span class="k">)</span>
<a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="o">[</span><span class="w"> </span>!<span class="w"> </span>-e<span class="w"> </span><span class="nv">$g</span>.jpg<span class="w"> </span><span class="o">]</span><span class="p">;</span><span class="w"> </span><span class="k">then</span>
<a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="w"> </span>convert<span class="w"> </span><span class="nv">$f</span><span class="w"> </span><span class="nv">$g</span>.jpg
<a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="w"> </span><span class="k">fi</span>
<a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a><span class="k">done</span>
</code></pre></div>
<p>To use this bash file, run the following command in cammoand line.</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>bash<span class="w"> </span>png2jpg.sh<span class="w"> </span>pngs<span class="w"> </span><span class="c1">#directory with PNG files</span>
<p><img alt="png2jpg" src="../../images/week02/png2jpg.jpg" /></p>
<p><img alt="img from sd0" src="../../images/week02/out-0.jpg" /></p>
<p><img alt="img from sd1" src="../../images/week02/out-1.jpg" /></p>
<p><img alt="img from sd2" src="../../images/week02/out-2.jpg" /></p>
<p><img alt="img from sd3" src="../../images/week02/out-3.jpg" /></p>
<h3 id="make-a-silhouette-of-a-bird">make a silhouette of a bird</h3>
<p>I chose this picture as an example.</p>
<p><img alt="img from wonder 2" src="../../images/week02/IMG_6910.JPG" /></p>
<p>I imported the picture into <a href="https://affinity.serif.com/en-us/designer/">Affinity Designer</a></p>
<p>Then I traced the outline of the bird.</p>
<p><img alt="silhouette_trace1" src="../../images/week02/silhouette_trace1.jpg" /></p>
<p><img alt="silhouette_trace2" src="../../images/week02/silhouette_trace2.jpg" /></p>
<p><img alt="silhouette_trace3" src="../../images/week02/silhouette_trace3.jpg" /></p>
<p>Edited the silhouetted to change the angle of the bird.</p>
<p><img alt="silhouette_trace4" src="../../images/week02/silhouette_trace4.jpg" /></p>
<p><img alt="silhouette_trace5" src="../../images/week02/silhouette_trace5.jpg" /></p>
<h3 id="tracing-bitmaps">Tracing bitmaps</h3>
<p>Since, there is no functions to trace bitmaps in Affinity designer, I used Inkscape.</p>
<p>It took me few steps to get the silhouette of the bird</p>
<p>I used "Path>Trace bitmap" in the tool bar to get the silhouette of the bird.
The bird was white, black, gray and blue.</p>
<p>First I traced the white part by cutting off the dark part, and traced the black part by cutting off the bright part.</p>
<p><img alt="cutoff dark" src="../../images/week02/inkscape_dark.jpg" /></p>
<p><img alt="cutoff bright" src="../../images/week02/inkscape_bright.jpg" /></p>
<p>Adding these paths together, I got a part of the silhouette of the bird.</p>
<p><img alt="bird inkscape" src="../../images/week02/bird_inkscape.jpg" /></p>
<p><img alt="bird inkscape silhouette" src="../../images/week02/bird_silhouette_inkscape.jpg" /></p>
<p>There were two difficult things I wasn't able to do:</p>
<ul>
<li>Get the silhouette of the head of the bird.<ul>
<li>Because, the head is overlapped with the left wing.</li>
</ul>
</li>
<li>Get the silhouette of the whole right wing<ul>
<li>Because, the gray part of the right wing was almost the same color with the shadows on the corners of the image.</li>
</ul>
</li>
</ul>
<p>I tried with a different image:</p>
<p><img alt="img from wonder 1" src="../../images/week02/IMG_6909.JPG" /></p>
<p>did the same process above and got:</p>
<p><img alt="bird inkscape2" src="../../images/week02/bird_inkscape2.jpg" /></p>
<p><img alt="bird inkscape silhouette2" src="../../images/week02/bird_silhouette_inkscape2.jpg" /></p>
<p>The gradient of brightness and the angle of the bird is an important factor in the term of selecting the image to use.</p>
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
<h2 id="2-model-a-structure-to-express-the-glowing-and-flickering-of-candles">2. Model a structure to express the glowing and flickering of candles</h2>
<p>Last week, I modeled the outline of the lamp I plan to make for my final project.</p>
<p>This week, I will model structure inside the lampshade. The structures will move and create shadow on the shade. the shadow will be a pattern that decorates the lamp.</p>
<p>For the candle mode, I will use lattice shells to express the glowing and flickering of candels.</p>
<h3 id="overlapping-lattices">overlapping lattices</h3>
<p>I will first draw an 2D example of lattices expressing candles flickering.</p>
<p>To draw the lattices, I use python.
Here are the python libraries I used.</p>
<table>
<thead>
<tr>
<th>library</th>
<th>version</th>
</tr>
</thead>
<tbody>
<tr>
<td>matplotlib</td>
<td>3.6.3</td>
</tr>
<tr>
<td>numpy</td>
<td>1.23.4</td>
</tr>
<tr>
<td>opencv</td>
<td>4.6.0.66</td>
</tr>
</tbody>
</table>
<p>These were installed by followings:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a>pip<span class="w"> </span>install<span class="w"> </span>matplotlib
<a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a>pip<span class="w"> </span>install<span class="w"> </span>numpy
<a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>pip<span class="w"> </span>instell<span class="w"> </span>opencv-python
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
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
</code></pre></div>
<div class="admonition caution">
<p class="admonition-title">Caution</p>
<p>I failed to successfully create a mp4 files with opencv.
A file was exported, but I could not open it.
Insted of using opencv, I used ffmpeg.</p>
</div>
<h4 id="step-1-import-libraries"><strong>Step 1.</strong> Import libraries</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kn">import</span> <span class="nn">cv2</span>
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="kn">import</span> <span class="nn">matplotlib.pyplot</span> <span class="k">as</span> <span class="nn">plt</span>
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="kn">import</span> <span class="nn">numpy</span> <span class="k">as</span> <span class="nn">np</span>
<a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a><span class="kn">import</span> <span class="nn">os</span>
<a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="kn">import</span> <span class="nn">shutil</span>
<a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="kn">import</span> <span class="nn">sys</span>
<a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a>
<a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a><span class="o">%</span><span class="n">matplotlib</span> <span class="n">inline</span>
</code></pre></div>
<h4 id="step-2-set-the-area-to-plot-curves"><strong>Step 2.</strong> Set the area to plot curves</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">()</span>
<a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">,</span> <span class="n">polar</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
<a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a>
<a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="n">ax</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>
<a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</span><span class="p">([])</span>
<a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span>
</code></pre></div>
<p><img alt="py_step2" src="../../images/week02/py_step2.jpg" /></p>
<h4 id="step-3-draw-a-curve-in-polar-coordinates"><strong>Step 3.</strong> Draw a curve in polar coordinates</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="n">ax</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">,</span> <span class="n">polar</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
<a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>
<a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="n">ax</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>
<a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</span><span class="p">([])</span>
<a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span>
<a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a>
<a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span><span class="o">/</span><span class="mi">3</span><span class="p">)</span>
<a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="n">y</span> <span class="o">=</span> <span class="n">x</span><span class="o">/</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span>
<a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a>
<a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a><span class="n">ax</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x</span><span class="p">,</span><span class="n">y</span><span class="p">,</span><span class="n">c</span><span class="o">=</span><span class="s1">'k'</span><span class="p">)</span>
</code></pre></div>
<p><img alt="py_step3" src="../../images/week02/py_step3.jpg" /></p>
<h4 id="step-4-multipy-curves-in-a-circular-pattern"><strong>Step 4.</strong> Multipy curves in a circular pattern</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="k">def</span> <span class="nf">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="n">num</span><span class="p">,</span> <span class="n">B</span><span class="p">,</span> <span class="n">color</span><span class="p">):</span>
<a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">num</span><span class="p">):</span>
<a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a> <span class="n">a</span> <span class="o">=</span> <span class="n">i</span> <span class="o">*</span> <span class="mi">2</span><span class="o">*</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span> <span class="o">/</span> <span class="n">num</span>
<a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a>
<a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a> <span class="n">x0</span> <span class="o">=</span> <span class="n">B</span><span class="o">*</span><span class="n">x</span><span class="o">+</span><span class="n">a</span>
<a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a> <span class="n">y0</span> <span class="o">=</span> <span class="n">x</span><span class="o">/</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span>
<a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a>
<a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a> <span class="n">ax</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x0</span><span class="p">,</span><span class="n">y0</span><span class="p">,</span><span class="n">c</span><span class="o">=</span><span class="n">color</span><span class="p">)</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">()</span>
<a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">,</span> <span class="n">polar</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
<a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a>
<a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a><span class="n">ax</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>
<a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</span><span class="p">([])</span>
<a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span>
<a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a>
<a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a><span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span><span class="o">/</span><span class="mi">3</span><span class="p">)</span>
<a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a>
<a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a><span class="n">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
</code></pre></div>
<p><img alt="py_step4" src="../../images/week02/py_step4.jpg" /></p>
<h4 id="step-5-create-curves-bent-in-the-oppsite-direction"><strong>Step 5.</strong> Create curves bent in the oppsite direction</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a><span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">()</span>
<a id="__codelineno-8-2" name="__codelineno-8-2" href="#__codelineno-8-2"></a><span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">,</span> <span class="n">polar</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
<a id="__codelineno-8-3" name="__codelineno-8-3" href="#__codelineno-8-3"></a>
<a id="__codelineno-8-4" name="__codelineno-8-4" href="#__codelineno-8-4"></a><span class="n">ax</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>
<a id="__codelineno-8-5" name="__codelineno-8-5" href="#__codelineno-8-5"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</span><span class="p">([])</span>
<a id="__codelineno-8-6" name="__codelineno-8-6" href="#__codelineno-8-6"></a><span class="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span>
<a id="__codelineno-8-7" name="__codelineno-8-7" href="#__codelineno-8-7"></a>
<a id="__codelineno-8-8" name="__codelineno-8-8" href="#__codelineno-8-8"></a><span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span><span class="o">/</span><span class="mi">2</span><span class="p">)</span>
<a id="__codelineno-8-9" name="__codelineno-8-9" href="#__codelineno-8-9"></a>
<a id="__codelineno-8-10" name="__codelineno-8-10" href="#__codelineno-8-10"></a><span class="n">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
<a id="__codelineno-8-11" name="__codelineno-8-11" href="#__codelineno-8-11"></a><span class="n">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
</code></pre></div>
<p><img alt="pystep5" src="../../images/week02/py_step5.jpg" /></p>
<h4 id="step-6-make-frame-of-two-lattices-rotating"><strong>Step 6.</strong> Make frame of two lattices rotating</h4>
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="k">def</span> <span class="nf">rotate</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="n">num</span><span class="p">,</span> <span class="n">B</span><span class="p">,</span> <span class="n">d</span><span class="p">,</span> <span class="n">color</span><span class="p">):</span>
<a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">num</span><span class="p">):</span>
<a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a> <span class="n">a</span> <span class="o">=</span> <span class="n">i</span> <span class="o">*</span> <span class="mi">2</span><span class="o">*</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span> <span class="o">/</span> <span class="n">num</span>
<a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a>
<a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a> <span class="n">x0</span> <span class="o">=</span> <span class="n">B</span><span class="o">*</span><span class="n">x</span><span class="o">+</span><span class="n">a</span> <span class="o">+</span> <span class="n">d</span>
<a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a> <span class="n">y0</span> <span class="o">=</span> <span class="n">x</span><span class="o">/</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span>
<a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a>
<a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a> <span class="n">ax</span><span class="o">.</span><span class="n">plot</span><span class="p">(</span><span class="n">x0</span><span class="p">,</span><span class="n">y0</span><span class="p">,</span><span class="n">c</span><span class="o">=</span><span class="n">color</span><span class="p">)</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="k">if</span> <span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">exists</span><span class="p">(</span><span class="s1">'frames'</span><span class="p">):</span>
<a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a> <span class="n">shutil</span><span class="o">.</span><span class="n">rmtree</span><span class="p">(</span><span class="s1">'frames'</span><span class="p">)</span>
<a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="n">os</span><span class="o">.</span><span class="n">mkdir</span><span class="p">(</span><span class="s1">'frames'</span><span class="p">)</span>
<a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a>
<a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a><span class="n">frame</span> <span class="o">=</span> <span class="mi">200</span>
<a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="k">for</span> <span class="n">j</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">frame</span><span class="p">):</span>
<a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a> <span class="n">fig</span> <span class="o">=</span> <span class="n">plt</span><span class="o">.</span><span class="n">figure</span><span class="p">()</span>
<a id="__codelineno-10-8" name="__codelineno-10-8" href="#__codelineno-10-8"></a> <span class="n">ax</span> <span class="o">=</span> <span class="n">fig</span><span class="o">.</span><span class="n">add_subplot</span><span class="p">(</span><span class="mi">111</span><span class="p">,</span> <span class="n">polar</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
<a id="__codelineno-10-9" name="__codelineno-10-9" href="#__codelineno-10-9"></a>
<a id="__codelineno-10-10" name="__codelineno-10-10" href="#__codelineno-10-10"></a> <span class="n">ax</span><span class="o">.</span><span class="n">grid</span><span class="p">(</span><span class="kc">False</span><span class="p">)</span>
<a id="__codelineno-10-11" name="__codelineno-10-11" href="#__codelineno-10-11"></a> <span class="n">ax</span><span class="o">.</span><span class="n">set_yticklabels</span><span class="p">([])</span>
<a id="__codelineno-10-12" name="__codelineno-10-12" href="#__codelineno-10-12"></a> <span class="n">ax</span><span class="o">.</span><span class="n">set_xticklabels</span><span class="p">([])</span>
<a id="__codelineno-10-13" name="__codelineno-10-13" href="#__codelineno-10-13"></a>
<a id="__codelineno-10-14" name="__codelineno-10-14" href="#__codelineno-10-14"></a> <span class="n">x</span> <span class="o">=</span> <span class="n">np</span><span class="o">.</span><span class="n">linspace</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span><span class="o">/</span><span class="mi">2</span><span class="p">)</span>
<a id="__codelineno-10-15" name="__codelineno-10-15" href="#__codelineno-10-15"></a>
<a id="__codelineno-10-16" name="__codelineno-10-16" href="#__codelineno-10-16"></a> <span class="n">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
<a id="__codelineno-10-17" name="__codelineno-10-17" href="#__codelineno-10-17"></a> <span class="n">multipy</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
<a id="__codelineno-10-18" name="__codelineno-10-18" href="#__codelineno-10-18"></a>
<a id="__codelineno-10-19" name="__codelineno-10-19" href="#__codelineno-10-19"></a> <span class="n">d</span> <span class="o">=</span> <span class="n">j</span> <span class="o">*</span> <span class="mi">2</span><span class="o">*</span><span class="n">np</span><span class="o">.</span><span class="n">pi</span> <span class="o">/</span> <span class="n">frame</span>
<a id="__codelineno-10-20" name="__codelineno-10-20" href="#__codelineno-10-20"></a>
<a id="__codelineno-10-21" name="__codelineno-10-21" href="#__codelineno-10-21"></a> <span class="n">rotate</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="n">d</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
<a id="__codelineno-10-22" name="__codelineno-10-22" href="#__codelineno-10-22"></a> <span class="n">rotate</span><span class="p">(</span><span class="n">ax</span><span class="p">,</span> <span class="mi">10</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="n">d</span><span class="p">,</span> <span class="s1">'k'</span><span class="p">)</span>
<a id="__codelineno-10-23" name="__codelineno-10-23" href="#__codelineno-10-23"></a>
<a id="__codelineno-10-24" name="__codelineno-10-24" href="#__codelineno-10-24"></a> <span class="n">fig</span><span class="o">.</span><span class="n">savefig</span><span class="p">(</span><span class="sa">f</span><span class="s1">'./frames/pic_</span><span class="si">{</span><span class="n">j</span><span class="si">:</span><span class="s1">02</span><span class="si">}</span><span class="s1">.jpg'</span><span class="p">)</span>
<a id="__codelineno-10-25" name="__codelineno-10-25" href="#__codelineno-10-25"></a>
<a id="__codelineno-10-26" name="__codelineno-10-26" href="#__codelineno-10-26"></a> <span class="n">plt</span><span class="o">.</span><span class="n">clf</span><span class="p">()</span>
<a id="__codelineno-10-27" name="__codelineno-10-27" href="#__codelineno-10-27"></a> <span class="n">plt</span><span class="o">.</span><span class="n">close</span><span class="p">()</span>
</code></pre></div>
<h4 id="step-7-make-video-file"><strong>Step 7.</strong> Make video file</h4>
<p>First I tried opencv</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="n">fourcc</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">VideoWriter_fourcc</span><span class="p">(</span><span class="o">*</span><span class="s1">'mp4v'</span><span class="p">)</span>
<a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="n">video</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">VideoWriter</span><span class="p">(</span><span class="s1">'lattice_rotate.mp4'</span><span class="p">,</span> <span class="n">fourcc</span><span class="p">,</span> <span class="mf">20.0</span><span class="p">,</span> <span class="p">(</span><span class="mi">100</span><span class="p">,</span><span class="mi">100</span><span class="p">))</span>
<a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a>
<a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a><span class="k">if</span> <span class="ow">not</span> <span class="n">video</span><span class="o">.</span><span class="n">isOpened</span><span class="p">():</span>
<a id="__codelineno-11-5" name="__codelineno-11-5" href="#__codelineno-11-5"></a> <span class="nb">print</span><span class="p">(</span><span class="s2">"can't be opened"</span><span class="p">)</span>
<a id="__codelineno-11-6" name="__codelineno-11-6" href="#__codelineno-11-6"></a> <span class="n">sys</span><span class="o">.</span><span class="n">exit</span><span class="p">()</span>
<a id="__codelineno-11-7" name="__codelineno-11-7" href="#__codelineno-11-7"></a>
<a id="__codelineno-11-8" name="__codelineno-11-8" href="#__codelineno-11-8"></a><span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="n">frame</span><span class="p">):</span>
<a id="__codelineno-11-9" name="__codelineno-11-9" href="#__codelineno-11-9"></a> <span class="n">img</span> <span class="o">=</span> <span class="n">cv2</span><span class="o">.</span><span class="n">imread</span><span class="p">(</span><span class="sa">f</span><span class="s1">'./frames/pic_</span><span class="si">{</span><span class="n">j</span><span class="si">:</span><span class="s1">02</span><span class="si">}</span><span class="s1">.jpg'</span><span class="p">)</span>
<a id="__codelineno-11-10" name="__codelineno-11-10" href="#__codelineno-11-10"></a>
<a id="__codelineno-11-11" name="__codelineno-11-11" href="#__codelineno-11-11"></a> <span class="k">if</span> <span class="n">img</span> <span class="ow">is</span> <span class="kc">None</span><span class="p">:</span>
<a id="__codelineno-11-12" name="__codelineno-11-12" href="#__codelineno-11-12"></a> <span class="nb">print</span><span class="p">(</span><span class="s2">"can't read"</span><span class="p">)</span>
<a id="__codelineno-11-13" name="__codelineno-11-13" href="#__codelineno-11-13"></a> <span class="k">break</span>
<a id="__codelineno-11-14" name="__codelineno-11-14" href="#__codelineno-11-14"></a>
<a id="__codelineno-11-15" name="__codelineno-11-15" href="#__codelineno-11-15"></a> <span class="n">video</span><span class="o">.</span><span class="n">write</span><span class="p">(</span><span class="n">img</span><span class="p">)</span>
<a id="__codelineno-11-16" name="__codelineno-11-16" href="#__codelineno-11-16"></a>
<a id="__codelineno-11-17" name="__codelineno-11-17" href="#__codelineno-11-17"></a><span class="n">video</span><span class="o">.</span><span class="n">release</span><span class="p">()</span>
<a id="__codelineno-11-18" name="__codelineno-11-18" href="#__codelineno-11-18"></a><span class="nb">print</span><span class="p">(</span><span class="s1">'written'</span><span class="p">)</span>
</code></pre></div>
<p>'lattice_rotate.mp4' was exported. However, I couldn't open it in my PC.</p>
<p>So, I tried ffmpeg, and got this:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a>ffmpeg<span class="w"> </span>-r<span class="w"> </span><span class="m">20</span><span class="w"> </span>-i<span class="w"> </span>./frames/pic_%02d.jpg<span class="w"> </span>rotate.mp4
</code></pre></div>
<video width="100%" controls>
<source src="../../images/week02/rotate.mp4" type="video/mp4">
</video>
<h3 id="overlapping-lattice-shell-structures">overlapping lattice shell structures</h3>
<p>Next, I modeled a 3D structure that make shadow like the video above.</p>
<h4 id="step-1-design-the-curve-on-lampshade"><strong>Step 1.</strong> Design the curve on lampshade</h4>
<p>Draw two curves (in purple) that corespond to Step 3 in the 2D lattice. Black lines are support line from the lightsource to points on the curves.</p>
<p><img alt="cad01" src="../../images/week02/cad01.jpg" /></p>
<h4 id="step-2-loft-the-black-lines-to-two-curved-surfaces"><strong>Step 2.</strong> Loft the black lines to two curved surfaces</h4>
<p><img alt="cad02" src="../../images/week02/cad02.jpg" /></p>
<h4 id="step-3-thicken-the-surfaces"><strong>Step 3.</strong> Thicken the surfaces</h4>
<p><img alt="cad03" src="../../images/week02/cad03.jpg" /></p>
<h4 id="step-4-create-the-base-shell-model-of-the-lattice-shell"><strong>Step 4.</strong> Create the base shell model of the lattice shell</h4>
<p><img alt="cad04" src="../../images/week02/cad04.jpg" /></p>
<h4 id="step-5-intersect-the-base-shell-and-curved-surface"><strong>Step 5.</strong> Intersect the base shell and curved surface</h4>
<p><img alt="cad05" src="../../images/week02/cad05.jpg" /></p>
<h4 id="step-6-multiply-the-intersections-by-cilrcular-pattern-and-union-all-to-get-a-llattice-shell"><strong>Step 6.</strong> Multiply the intersections by cilrcular pattern and Union all to get a llattice shell</h4>
<p><img alt="cad06" src="../../images/week02/cad06.jpg" /></p>
<h4 id="step-7-make-an-inner-lattice-shell"><strong>Step 7.</strong> Make an inner lattice shell</h4>
<p><img alt="cad07" src="../../images/week02/cad07.jpg" /></p>
<h4 id="step-8-make-a-movie-of-lattice-shells-rotating"><strong>Step 8.</strong> Make a movie of lattice shells rotating</h4>
<video width="100%" controls>
<source src="../../images/week02/lattice_shell_rotating.mp4" type="video/mp4">
</video>
<p>Shadow on shade will look like this:</p>
<video width="100%" controls>
<source src="../../images/week02/shade_rotate.mp4" type="video/mp4">
</video>
<p>The next problem will be how to fix the lattice shells on the base, and how to make the lattice shells to rotate.</p>
<h2 id="downloads">Downloads</h2>
<p>Here are the files I created this week.</p>
<ul>
<li><a href="../files/week02/silhouette_bird.afdesign">Bird silhouette in Affinity designer (.afdesign)</a></li>
<li><a href="../files/week02/bird_inkscape.svg">Bird silhouette in Inkscape (.svg)</a></li>
<li><a href="../files/week02/bird_inkscape2.svg">2nd bird silhouette in Inkscape (.svg)</a></li>
<li><a href="../files/week02/lamp_design%20v10.f3d">Lamp in Fusion360 (.f3d)</a></li>
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
</div>
</div>
<footer class="col-md-12">
<hr>
<p>Copyright 2023 Sosuke Kanegae - Creative Commons Attribution Non Commercial</p>
<p>Documentation built with <a href="https://www.mkdocs.org/">MkDocs</a>.</p>
</footer>
<script>
var base_url = "../..",
shortcuts = {"help": 191, "next": 78, "previous": 80, "search": 83};
</script>
<script src="../../js/base.js" defer></script>
<script src="../../search/main.js" defer></script>
<div class="modal" id="mkdocs_search_modal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="searchModalLabel">Search</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<p>From here you can search these documents. Enter your search terms below.</p>
<form>
<div class="form-group">
<input type="search" class="form-control" placeholder="Search..." id="mkdocs-search-query" title="Type search term here">
</div>
</form>
<div id="mkdocs-search-results" data-no-results-text="No results found"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div><div class="modal" id="mkdocs_keyboard_modal" tabindex="-1" role="dialog" aria-labelledby="keyboardModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="keyboardModalLabel">Keyboard Shortcuts</h4>
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<table class="table">
<thead>
<tr>
<th style="width: 20%;">Keys</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="help shortcut"><kbd>?</kbd></td>
<td>Open this help</td>
</tr>
<tr>
<td class="next shortcut"><kbd>n</kbd></td>
<td>Next page</td>
</tr>
<tr>
<td class="prev shortcut"><kbd>p</kbd></td>
<td>Previous page</td>
</tr>
<tr>
<td class="search shortcut"><kbd>s</kbd></td>
<td>Search</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</body>
</html>