<!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/">
<link rel="shortcut icon" href="../../img/favicon.ico">
<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">
<a href="../../about/" class="nav-link">About</a>
</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>
<ul class="dropdown-menu">
<li>
<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>
</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>
</li>
<li>
<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>
</ul>
</li>
<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">
<a rel="next" href="../week03/" class="nav-link">
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>
<ul class="nav flex-column">
</ul>
</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>
</ul>
</li>
</ol>
<!-- 3. Using Rhino
* -->
<!-- 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>
<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>
</code></pre></div>
<p><img alt="png2jpg" src="../../images/week02/png2jpg.jpg" /></p>
<p>This is what I got:</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>Filled the line with black.</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>
<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
</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>
</ul></div>
</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>