tag:crieit.net,2005:https://crieit.net/tags/%E8%AB%96%E7%90%86%E5%9B%9E%E8%B7%AF/feed Crieitでタグ「論理回路」に投稿された最近の記事 2023-12-06T18:30:01+09:00 https://crieit.net/tags/%E8%AB%96%E7%90%86%E5%9B%9E%E8%B7%AF/feed tag:crieit.net,2005:PublicArticle/16851 2021-04-16T04:38:28+09:00 2023-12-06T18:30:01+09:00 https://crieit.net/posts/relay-logic-circuit-simulator-1bit-cpu <ul> <li>「1bit CPU」というのは、書籍『CPUの創りかた』に載っている「オリジナルCPU 試作3号機（エレキ式）」のことです。</li> <li>※ ブログに書いていた記事のクロス投稿です。元の公開日は 2020-05-03 です。</li> </ul> <h1 id="概要"><a href="#%E6%A6%82%E8%A6%81">概要</a></h1> <p>リポジトリ:<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/sonota88/kairo-gokko">https://github.com/sonota88/kairo-gokko</a></p> <p>デモ（ブラウザで動かせます）:<br /> <a target="_blank" rel="nofollow noopener" href="https://sonota88.github.io/kairo-gokko/pages/39/index.html">https://sonota88.github.io/kairo-gokko/pages/39/index.html</a></p> <ul> <li>音量を小さめにしていますが、音が出ます</li> <li>表示サイズや負荷の関係でPCブラウザ推奨です <ul> <li>とりあえず富豪的に作っていて、まだ最適化などやってません</li> </ul></li> <li>最初は発振するので、スイッチを適当に操作して発振を止める必要があります。操作については<a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2020/04/12/094629">こちら</a>も参照してください。</li> </ul> <hr /> <p>製作過程のメモ（どういうステップを踏んで何を実装していったか、具体的な話はこっちにまとめています）:<br /> <a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2020/04/21/065800">https://memo88.hatenablog.com/entry/2020/04/21/065800</a></p> <hr /> <p>動かしている様子です。</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/5a779825-a252-aad1-2aab-7d51fd708363.gif" alt="x00_1bit_cpu.gif" /></p> <p>左下のスイッチがクロックで、右下のスイッチで命令（ <code>MOV A, A</code> と <code>NOT A</code> ）を切り替えています。</p> <hr /> <p>回路図を描いて動かすまでの流れ:</p> <ul> <li>回路図を LibreOffice Draw で描いて <code>.fodg</code> 形式で保存</li> <li>fodg ファイルを読んで前処理し、中間データ（JSON）に変換</li> <li>シミュレータのプログラムと中間データを使ってブラウザで実行</li> </ul> <p>LibreOffice Draw で描いた回路図はこんな感じ。</p> <p><a href="https://crieit.now.sh/upload_images/1649cf3b27696c4991dcb814567a0522607893c592e6a.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1649cf3b27696c4991dcb814567a0522607893c592e6a.png?mw=700" alt="image" /></a></p> <p>直線と矩形、矩形内のテキストだけです。部品はグリッドに合わせて配置します。ナナメの配線は禁止。</p> <hr /> <p>使っている部品:</p> <ul> <li>導線<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/efabd580-0a0f-8416-6f0d-40726d049b25.png" alt="image.png" /></li> <li>電池のプラス極・マイナス極<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/6b688ff5-4cba-7f71-97b9-6389c156dfb9.png" alt="image.png" /></li> <li>ランプ<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/f5f8fb2e-f463-4c52-ca30-3a1524ac5de1.png" alt="image.png" /></li> <li>スイッチ。マウスでクリックすると ON/OFF が切り替わります。<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/31b10750-be58-028c-f8d7-d7b1171b9232.png" alt="image.png" /></li> <li>リレー（2種類）<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/bc167c9e-ce38-fa7b-8801-bce4c74a5f95.png" alt="image.png" /></li> </ul> <p>ランプ、リレーには極性なし（プラス極・マイナス極を入れ替えても動作は変わらない）</p> <hr /> <p>小さい回路の例をいくつか:</p> <p>NOT（を3つ繋げたもの）<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/0d1eca62-ac93-db69-6edd-c3231e72d81d.gif" alt="x01_not.gif" /></p> <p>NAND<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/068b2a43-015f-7c83-b368-fd8a2967ca1f.gif" alt="x02_nand.gif" /></p> <p>XOR<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/9f42f922-272f-800c-2978-47eea147aaba.gif" alt="x03_xor.gif" /></p> <p>RSフリップフロップ<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/34bb8ab3-60ad-679d-2fbf-950164903d1e.gif" alt="x04_rsff.gif" /></p> <hr /> <p>ほぼ Ruby 製。ブラウザで動かす部分は <a target="_blank" rel="nofollow noopener" href="https://github.com/yhara/dxopal">DXOpal</a> を使っています。</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234055/6902942b-3509-c3f6-46aa-2d96e0380459.png" alt="image.png" /></p> <p>（一応残してあるが）不要になっている部分、補助ツール的なスクリプト、コメントなどを除くと主な部分は 2000行弱（2021-04-11 時点）。途中いろいろありましたができあがってみると意外と小さい。</p> <pre><code>$ wc -l *.rb 283 child_circuit.rb 456 circuit.rb 114 drawer_dxopal.rb 137 libo_draw.rb 237 main.rb 26 preprocess.rb 307 unit.rb 346 view.rb 1906 合計 </code></pre> <h1 id="製作期間"><a href="#%E8%A3%BD%E4%BD%9C%E6%9C%9F%E9%96%93">製作期間</a></h1> <p>2019-12-31 〜 2020-02-02<br /> （プロトタイプを作り始めてから 1bit CPU が動くまで）</p> <p>始める前からいろいろ調べたりはしていて、書き始めたのが 12/31 だったか 12/30 だったか。</p> <p>回路図エディタの部分を <a target="_blank" rel="nofollow noopener" href="https://qiita.com/sonota88/items/4c280ac13b7f7709abeb">LibreOffice Draw に丸投げ</a>することにより、製作期間を短縮しシミュレータ部分に集中することができました。</p> <h1 id="どのくらいの電気の知識で始めたか"><a href="#%E3%81%A9%E3%81%AE%E3%81%8F%E3%82%89%E3%81%84%E3%81%AE%E9%9B%BB%E6%B0%97%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%A7%E5%A7%8B%E3%82%81%E3%81%9F%E3%81%8B">どのくらいの電気の知識で始めたか</a></h1> <ul> <li>小学校、中学校の理科レベル <ul> <li>電池、エナメル線、豆電球、電磁石、直列・並列つなぎ</li> </ul></li> <li>大学の頃にちょっとだけ電子工作やろうとするも鉱石ラジオ作った程度で終わった</li> <li>『CPUの創りかた』のうっすらした記憶</li> <li>リレーは名前は聞いたことあったけどどういうものか知らなかった</li> <li>トランジスタの前は真空管を使っていたらしい</li> <li>GND って何？</li> </ul> <p>……という程度。</p> <h1 id="コンセプト・方針"><a href="#%E3%82%B3%E3%83%B3%E3%82%BB%E3%83%97%E3%83%88%E3%83%BB%E6%96%B9%E9%87%9D">コンセプト・方針</a></h1> <ul> <li>ガチャガチャ動く機械仕掛けのおもちゃ</li> <li>ピタゴラ装置みたいなの</li> <li>電圧や抵抗は考慮しない <ul> <li>難しそうなので</li> <li>電気が流れているか、流れていないかだけ考える</li> </ul></li> <li>小学校の理科の工作の延長程度のもの</li> <li>なるべく寄り道せずに曳光弾を通す <ul> <li>遅すぎて辛い、ということがなければ最適化は後回し</li> <li>そもそも作れるのか、（論理）回路を動かすには最低限何が必要なのかなど、よく分かっていなかった</li> </ul></li> </ul> <h1 id="なぜ作ったか / 作り始めるまでの経緯"><a href="#%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%8B+%2F+%E4%BD%9C%E3%82%8A%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE%E7%B5%8C%E7%B7%AF">なぜ作ったか / 作り始めるまでの経緯</a></h1> <p>並行してボンヤリと考えていたのですっきりまとめることができませんが、思い出して雑に書き出してみました。</p> <p>列挙の順序も適当です。</p> <h2 id="そもそもは『CPUの創りかた』"><a href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E3%81%AF%E3%80%8ECPU%E3%81%AE%E5%89%B5%E3%82%8A%E3%81%8B%E3%81%9F%E3%80%8F">そもそもは『CPUの創りかた』</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://book.mynavi.jp/ec/products/detail/id=22065">CPUの創りかた | マイナビブックス</a></p> <ul> <li>最初に読んだのは 4年くらい前</li> <li>かなり基本的なところから手取り足取り説明されていてとっても良い本だが、 単に読むだけだと後半で分からなくなる</li> <li>さすがに何も知らない私みたいなド素人が さらっと読んだだけで理解できるほど甘くはない</li> <li>（自分のような初心者は）作りながら読まないと分からないのでは <ul> <li>回路図を読むところがネックになる</li> <li>回路図というものは抽象化された図なわけで、 そこから具体的な回路や動作がどうなるかよく分からない</li> </ul></li> <li>しかし作るのは面倒 <ul> <li>部品の調達</li> <li>また部屋が散らかる……</li> <li>知識・経験がなさすぎてゴールが遠い</li> </ul></li> <li>物理CPU作るのは老後の楽しみにしよう……</li> <li>とはいえ、先にしくみだけでも理解したい</li> <li>しくみを理解するには、やはり自分で作って電子回路についての経験を積む必要があるんだろうな…… <ul> <li>→ 「しかし作るのは面倒」に戻る</li> <li>ブートストラップ問題</li> </ul></li> <li>しくみを理解するだけなら、枝葉の部分を捨ててもっと簡素化してハードルを下げられないか</li> </ul> <p>こういうのって、実際に手を動かして作って壊して、回路図とにらめっこしたり計算をやりなおして試行錯誤を繰り返すうちにだんだん勘が養われていくものだと思いますが、そういう経験がない状態なのでなかなか大変です。</p> <h2 id="論理回路シミュレータ"><a href="#%E8%AB%96%E7%90%86%E5%9B%9E%E8%B7%AF%E3%82%B7%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF">論理回路シミュレータ</a></h2> <ul> <li>そもそも論理回路シミュレータというものをよく知らなかった</li> <li>シミュレータで CPU（TD4など）を作っている人たちがいると知る</li> <li>物理CPU作る前にこれで試すのは良さそう <ul> <li>手間・時間をかけずに好きなだけスクラップ＆ビルドできる</li> <li>部屋も散らからない</li> </ul></li> </ul> <h2 id="nand2tetlis"><a href="#nand2tetlis">nand2tetlis</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://www.oreilly.co.jp/books/9784873117126/">O'Reilly Japan - コンピュータシステムの理論と実装</a></p> <ul> <li>通称（？） nand2tetlis</li> <li>物理的な電子回路でなぜ論理回路が動くのか、という部分がよく分からないまま HDL に進んでしまうのがちょっと不満</li> <li>そこの部分のブラックボックス感を解消したいのに</li> </ul> <h2 id="そもそも論理回路が動くしくみがよく分かってない"><a href="#%E3%81%9D%E3%82%82%E3%81%9D%E3%82%82%E8%AB%96%E7%90%86%E5%9B%9E%E8%B7%AF%E3%81%8C%E5%8B%95%E3%81%8F%E3%81%97%E3%81%8F%E3%81%BF%E3%81%8C%E3%82%88%E3%81%8F%E5%88%86%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%84">そもそも論理回路が動くしくみがよく分かってない</a></h2> <ul> <li>入力側から電流が流れてきて、それが出力側に伝わるというのは分かる</li> <li>NOTゲートってどうなってるの。謎。 <ul> <li>入力が L で出力が H になる場合、その H の電力はどこから来てるの</li> <li>省略されると分からない</li> </ul></li> <li>フリップフロップ <ul> <li>タイミングが絡んでくるし、入力がループするので、 脳内でエミュレートできない</li> <li>（自分で作って）動かしてみないとどうも実感が湧かない</li> </ul></li> <li>論理回路図というものは抽象化された図なわけで、 どうすればそれを物理的な回路で実現できるかが分からない</li> </ul> <p>今だからこうやって言語化できていますが、もっとボンヤリとモヤモヤしてました。「なんとなく……分かった気がする……たぶん……とりあえずそういうものだと飲み込んで先に進んでもいいが……（モヤモヤ）」みたいな。</p> <h2 id="リレー"><a href="#%E3%83%AA%E3%83%AC%E3%83%BC">リレー</a></h2> <ul> <li>トランジスタについてもよく分かっていなかったので、 トランジスタ → 真空管 → リレー と遡って調べたりしていた</li> <li>リレーについて知ることで 「要するに何をやっているのか」「何のための部品なのか」が分かった</li> <li>要するに「電気を使ってスイッチを切り替える装置」 <ul> <li><a target="_blank" rel="nofollow noopener" href="https://en.wikipedia.org/wiki/Relay">英語版 Wikipedia</a> の説明が簡潔で良いです。 "A relay is an electrically operated switch."</li> <li>「それを早く教えてよ！」という気分に</li> </ul></li> <li>リレー、めっちゃ良い。分かりやすい。小学生でも理解できる。電磁石まで知ってればあともう一歩。そのくせインパクトがでかい。 <ul> <li>「小学校の理科でついでにリレーまで教えてくれてればよかったのに！」 という気分に <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li> <li>「小学校の理科の知識に、あとはリレーだけ付け加えれば CPU まで作れる」 というのは、なんかいい。よくないですか？</li> </ul></li> <li>トランジスタについても、「N型 と P型があって正孔が……」という 半導体自体の説明よりも、 先に役割や目的について着目した方が（自分には）分かりやすかったと思います</li> </ul> <p>たしか、ここがクリアされたことで「あ、これなら自分でも作れるかも？」みたいな気分になった気がします。</p> <h2 id="Minecraft や Oxygen Not Included の論理回路"><a href="#Minecraft+%E3%82%84+Oxygen+Not+Included+%E3%81%AE%E8%AB%96%E7%90%86%E5%9B%9E%E8%B7%AF">Minecraft や Oxygen Not Included の論理回路</a></h2> <ul> <li>楽しい</li> <li>あの要素だけなら、自分でもなんとか作って遊べるのではないか？ <ul> <li>そう思わせてくれるところがとても良い。教育的。</li> </ul></li> <li>グリッド配置にしたのはこれらの影響</li> <li>他にも、マリオメーカーや Cities: Skylines などで作ってみた系の記事や動画を見て 「その部分だけ抜き出したもの」程度なら自分でも作れないか、 と妄想したり <ul> <li>（2010）<a target="_blank" rel="nofollow noopener" href="https://nlab.itmedia.co.jp/games/articles/1010/01/news094.html">スゴすぎ！　「Minecraft」で本物の16ビットコンピュータを再現 - ねとらぼ</a></li> <li>（2015）<a target="_blank" rel="nofollow noopener" href="https://www.nicovideo.jp/watch/sm27235148">【論理演算】マリオメーカーに「3+3=6」を計算させてみた - ニコニコ動画</a></li> <li>（2019）<a target="_blank" rel="nofollow noopener" href="https://automaton-media.com/articles/newsjp/20190718-97734/">『Cities: Skylines』でうんちを利用した計算機が制作される。汚水が流れて4ビットの回路を動かす | AUTOMATON</a></li> </ul></li> </ul> <h2 id="水流モデル（失敗）"><a href="#%E6%B0%B4%E6%B5%81%E3%83%A2%E3%83%87%E3%83%AB%EF%BC%88%E5%A4%B1%E6%95%97%EF%BC%89">水流モデル（失敗）</a></h2> <ul> <li>電気について詳しくないので<a target="_blank" rel="nofollow noopener" href="https://ja.wikipedia.org/wiki/%E6%B0%B4%E6%B5%81%E3%83%A2%E3%83%87%E3%83%AB">水流モデル</a>の方が分かりやすいかな、と思ってセルオートマトンで作ろうとした</li> <li>逆に複雑で難しかったので中止</li> </ul> <h1 id="どうやって作るか"><a href="#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E4%BD%9C%E3%82%8B%E3%81%8B">どうやって作るか</a></h1> <ul> <li>ググっても「論理回路シミュレータの作りかた」なんて解説は出てこない <ul> <li>自分のイメージに一番近かったのがこれ: <a target="_blank" rel="nofollow noopener" href="http://bach.ai/a-puzzle-game-that-makes-us-build-a-complete-computer/">A puzzle game that makes us build a complete computer - Joscha Bach</a></li> </ul></li> <li>OSS なシミュレータのソースを読む手もあるが…… <ul> <li><a target="_blank" rel="nofollow noopener" href="http://www.cburch.com/logisim/">Logisim</a> とか <sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup></li> <li>そんなに本格的なものでなくてよい</li> <li>おもちゃみたいなのでよい</li> <li>実用目的ではない。いわゆる「教育目的」なもの。<br /> 枝葉を排して理解しやすさを優先したもの。</li> <li>自分が作りたかったのは普通の論理回路シミュレータではなく、 電池と導線と……で論理回路が動かせる、抽象化されていないシミュレータ</li> </ul></li> <li>結局手探りで</li> <li>詳しくは<a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2020/04/21/065800">製作過程のメモ</a>の方に書きました</li> </ul> <h1 id="感想"><a href="#%E6%84%9F%E6%83%B3">感想</a></h1> <ul> <li>おもしろかった！！</li> <li>物理回路と論理回路との接続の部分が分かってよかった</li> <li>1bit CPU を自分で実際に作れてよかった <ul> <li>生まれて初めて（シミュレータ上だけど）CPU を自作した！</li> <li>めでたい！</li> </ul></li> <li>NOTゲートえらい <ul> <li>NOTゲートが作れるようになるのでリレーは偉大な発明</li> <li>で、リレーで論理回路を作るアイデアはどこから出てきたんだ、誰が始めたんだ…… と調べていくとクロード・シャノンにたどり着きます。 コンピュータの黎明期の話というとチューリングやノイマンが有名ですが、 シャノンも非常に重要な仕事をしていたんですね （これも今回いろいろ調べていて知りました）。 <ul> <li><a target="_blank" rel="nofollow noopener" href="https://qiita.com/sonota88/items/a5d6d3539e0fb8040f74#comment-3fce67595ab213760f79">中嶋章についてのscivolaさんのコメント</a> も参照</li> </ul></li> <li><a target="_blank" rel="nofollow noopener" href="https://sgforum.impress.co.jp/article/774">連載：インターネット・サイエンスの歴史人物館（2）クロード・シャノン | 情報通信（ICT） | スマートグリッドフォーラム<br /> </a></li> <li><a target="_blank" rel="nofollow noopener" href="https://xtech.nikkei.com/it/free/NSW/ITBASIC/20040403/2/">プログラミングの10大基礎知識（3） | 日経クロステック（xTECH）</a></li> </ul></li> <li>電気の知識がちょっと増えてよかった <ul> <li>ふだんやらないことをやると知らないことだらけで楽しい</li> </ul></li> <li>むちゃくちゃ難易度高いということもなく、動くと楽しいのでプログラミングのお題としてもおもしろいと思います。おすすめ。</li> </ul> <h1 id="TODO"><a href="#TODO">TODO</a></h1> <p>気が向いたらやりたい</p> <ul> <li>最適化・リファクタリング <ul> <li>現状ではだいぶ富豪的なので</li> </ul></li> <li>タイミングチャート付ける <ul> <li>そんなに難しくなさそう</li> <li>(2020-07-26) <a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2020/07/26/140308">付けました</a></li> </ul></li> <li>1bit CPU から先 <ul> <li>これ以上規模が大きくなると大変そうだし、 論理回路と物理回路の接続の理解についてはだいぶ気が済んだので、 続きを作るとしたら既存の論理回路シミュレータを使えばよさそう</li> </ul></li> <li>オブザーバーパターンや Actor モデルを使って書いてみる？</li> </ul> <h1 id="関連"><a href="#%E9%96%A2%E9%80%A3">関連</a></h1> <p>今のところ直接関連するというわけではないですが、もっと上のレイヤーの話ということで。1bit CPU と下記の VM の間のギャップも埋めていければなあと考えてはいます。</p> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2019/05/04/232236">RubyでオレオレVMとアセンブラとコード生成器を2週間で作ってライフゲームを動かした話</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://memo88.hatenablog.com/entry/2020/05/04/155425">Rubyで素朴な自作言語のコンパイラを作った</a></li> </ul> <h1 id="作った後に読んだもの"><a href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E5%BE%8C%E3%81%AB%E8%AA%AD%E3%82%93%E3%81%A0%E3%82%82%E3%81%AE">作った後に読んだもの</a></h1> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://www.tokyo-shoseki.co.jp/books/81189/">【東京書籍】 一般書籍 文芸 コンピュータ、どうやってつくったんですか？</a> <ul> <li>2020-12 に読んだ。リレーで説明されてて良い。</li> </ul></li> <li><a target="_blank" rel="nofollow noopener" href="https://book.mynavi.jp/ec/products/detail/id=116654">作ろう！CPU | マイナビブックス</a></li> </ul> <div class="footnotes" role="doc-endnotes"> <hr /> <ol> <li id="fn:1" role="doc-endnote"> <p>指導要領の都合とかでいろいろあるんだと思います <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> <li id="fn:2" role="doc-endnote"> <p>有名っぽいので Logisim を例に出しましたが、Logisim は開発が終わっているようなので他のものを探すのが良さそうです <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p> </li> </ol> </div> sonota486