-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
71 lines (65 loc) · 2.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Binary Adder in the Game of Life</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>Binary Adder in the Game of Life</h1>
<p>The circuit underneath adds 2-but values. To add 2 numbers input them in the fields below. Each field accepts either "00", "01", "10", or "11" string. The circuit will calculate the sum and the carry for each bit.</p>
<p>Gliders are used as signals. To generate the glider flow we use Gosper glider gun with the period of 60. More about game of life, its patterns, and details of this circuit you can find in the post about circuit creation:</p>
<ul>
<li>🇷🇺 <a href="/blog/binary-full-adder-in-game-of-life">Пишем двоичный сумматор в игре «Жизнь»</a></li>
<li>🇬🇧 <a href="#">Let's Write a Binary Full Adder in the Game of Life</a></li>
</ul>
<form action="" id="settings">
<label>
<span>Input Signal A</span>
<input type="text" name="a" placeholder="01" value="01">
</label>
<label>
<span>Input Signal B</span>
<input type="text" name="b" placeholder="11" value="11">
</label>
<label>
<span>Evolution Speed</span>
<input type="number" name="speed" placeholder="1" value="1" min="1" max="20">
</label>
<button>Build Circuit</button>
</form>
<div class="canvas">
<form action="" class="runtime">
<label>
Show Circuit Scheme
<input type="checkbox" name="circuit">
</label>
<label>
Canvas Scale
<input type="range" name="scale" value="1" min="0.2" max="1" step="0.1">
</label>
</form>
<canvas id="canvas" width="1200" height="1600"></canvas>
</div>
<section>
<h2>Circuit Creation: Step by Step</h2>
<ol>
<li><a href="./steps/step-1.html">Game of Life Basics</a></li>
<li><a href="./steps/step-2.html">Patterns: Glider</a></li>
<li><a href="./steps/step-3.html">Patterns: Gliders Collision</a></li>
<li><a href="./steps/step-4.html">Patterns: Gosper Glider Gun</a></li>
<li><a href="./steps/step-5.html">Patterns: Gosper Glider Gun with the Period of 60</a></li>
<li><a href="./steps/step-6.html">Logic Gates: NOT</a></li>
<li><a href="./steps/step-7.html">Logic Gates: AND</a></li>
<li><a href="./steps/step-8.html">Logic Gates: OR</a></li>
<li><a href="./steps/step-9.html">Logic Gates: XOR</a></li>
<li><a href="./steps/step-10.html">Binary Half Adder</a></li>
<li><a href="./steps/step-11.html">Binary Full Adder</a></li>
</ol>
</section>
</main>
<script type="module" src="./main.js"></script>
</body>
</html>