<!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="shortcut icon" href="../../img/favicon.ico">
<title>Week 02. 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 me</a>
</li>
<li class="navitem">
<a href="../../agreements/" class="nav-link">Agreements</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">Week 01. Principles and Practices / Project Management</a>
</li>
<li>
<a href="./" class="dropdown-item active">Week 02. Computer Aided Design</a>
</li>
</ul>
</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" class="nav-link disabled">
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>
</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>
<p>The second week of Fab Academy! I did a sketch of my project and added it to the <a href="../../final-project/">Final Project</a> page.</p>
<h2 id="assignments-for-this-week">Assignments for this week</h2>
<ul>
<li>model a possible final project</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>
<li></li>
</ul>
</li>
<li>Model a structure to express the glowing and flickering of candles<ul>
<li></li>
</ul>
</li>
<li>Model structrures that make silhouettes of birds flapping their wings<ul>
<li></li>
</ul>
</li>
</ol>
<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/IMG_6909.JPG" /></p>
<p><img alt="img from wonder 2" src="../../images/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>bash png2jpg.sh pngs(directory with PNG files)
</code></pre></div>
<p><img alt="png2jpg" src="../../images/png2jpg.jpg" /></p>
<p>This is what I got:</p>
<p><img alt="img from sd0" src="../../images/out-0.jpg" /></p>
<p><img alt="img from sd1" src="../../images/out-1.jpg" /></p>
<p><img alt="img from sd2" src="../../images/out-2.jpg" /></p>
<p><img alt="img from sd3" src="../../images/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/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/silhouette_trace1.jpg" /></p>
<p>Filled the line with black.</p>
<p><img alt="silhouette_trace2" src="../../images/silhouette_trace2.jpg" /></p>
<p><img alt="silhouette_trace3" src="../../images/silhouette_trace3.jpg" /></p>
<p>Edited the silhouetted to change the angle of the bird.</p>
<p><img alt="silhouette_trace4" src="../../images/silhouette_trace4.jpg" /></p>
<p><img alt="silhouette_trace5" src="../../images/silhouette_trace5.jpg" /></p></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>