npnorman.github.io/binary.html at main · npnorman/npnorman.github.io · GitHub

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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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
177
178
179
180
181
182
183
184
185
186
187
<!-- Binary Calcualtor 2024, Nicholas Norman-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/binary.css">
    <title>Binary Counter</title>
    <link>
</head>
<body>
    <h1>Binary Counter</h1>
    <h2>Nicholas Norman 2024</h2>

        <div class="flex">
            <div id="byteButtons">
                <button id="128" value="128">0</button>
                <button value="64">0</button>
                <button value="32">0</button>
                <button value="16">0</button>
                <button value="8">0</button>
                <button value="4">0</button>
                <button value="2">0</button>
                <button value="1">0</button>
            </div>

            <p class="display">&nbsp= <span id="total">0</span></p>
        </div>

    <div class="binary-block">
        <input type="radio" id="bin" name="options" value="regular" checked="checked">
        <label for="bin">Binary</label>
        <input type="radio" id="twoscomp" name="options" value="regular">
        <label for="twoscomp">Two's Compliment</label>
    </div>

    <div class="binary-grid" id="new-bits">
        <button id="128" value="128">0</button>
        <p></p>
        <button value="64">0</button>
        <p></p>
        <button value="32">0</button>
        <p></p>
        <button value="16">0</button>
        <p></p>
        <button value="8">0</button>
        <p></p>
        <button value="4">0</button>
        <p></p>
        <button value="2">0</button>
        <p></p>
        <button value="1">0</button>
        <p></p>
        <p></p>

        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p class="times">&times;</p>
        <p></p>
        <p></p>

        <p class="display-box white">2<sup>7</sup></p><p></p>
        <p class="display-box white">2<sup>6</sup></p><p></p>
        <p class="display-box white">2<sup>5</sup></p><p></p>
        <p class="display-box white">2<sup>4</sup></p><p></p>
        <p class="display-box white">2<sup>3</sup></p><p></p>
        <p class="display-box white">2<sup>2</sup></p><p></p>
        <p class="display-box white">2<sup>1</sup></p><p></p>
        <p class="display-box white">2<sup>0</sup></p>
        <p></p>
        <p></p>

        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p>||</p>
        <p></p>
        <p></p>

        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="addition">+</p>
        <p class="addition">0</p>
        <p class="equals">=</p>
        <p class="display-box" id="bit-total">0</p>
    </div>

    <div id="info">

        <br><br><br><br><br>
        <h2>Some Groovy Info About Binary</h2>

        <div class="info-block">
            <h3>What is binary?</h3>
            <p>Binary is base 2 system of counting, typically done by computers. This means that instead of using numbers from 0-9, binary uses 0-1. The computer uses this system to read any piece of information. No matter how big or small, the computer stores it as a set of 1s and 0s.</p>
        </div>

        <div class="info-block">
            <h3>How to Count in Base 2</h3>
            <p>Going from right to left each bit is 2<sup>x</sup>, where x is its place. In base 10, our normal counting system, we can calculate a number as such:</p>
            <p class="code">193 = 1 * 10<sup>2</sup> + 9 * 10<sup>1</sup> + 3 * 10<sup>0</sup> = 100 + 90 + 3</p>
            <p>Similarly in base 2:</p>
            <p class="code">101 = 1 * 2<sup>2</sup> + 0 * 2<sup>1</sup> + 1 * 2<sup>0</sup> = 4 + 0 + 1 = 5</p>
            <p>This means the 8 binary bits in the counter really are adding the following numbers:</p>
            <p class="code">64, 32, 16, 8, 4, 2, 1, 0 = 2<sup>7</sup>, 2<sup>6</sup>, 2<sup>5</sup>, 2<sup>4</sup>, 2<sup>3</sup>, 2<sup>2</sup>, 2<sup>1</sup>, 2<sup>0</sup>,</p>
        </div>

        <div class="info-block">
            <h3>What is Two's Compliment?</h3>
            <p>In early computing, there rose a problem. How do you store a negative number in binary? To accomplish this, the most effiecent way currently is using a system called Two's Compliment. When a computer reads binary in this way, it treats the first bit as a negative (-). For the case of before 101 now becomes:</p>
            <p class="code">101<sub>2</sub> = -1 * 2<sup>2</sup> + 0 * 2<sup>1</sup> + 1 * 2<sup>0</sup> = -4 + 0 + 1 = -3</p>
            <p>keep in mind, if the first bit is a 0, that cancels out the negative:</p>
            <p class="code">0101<sub>2</sub> = -0 * 2<sup>3</sup> + 1 * 2<sup>2</sup> + 0 * 2<sup>1</sup> + 1 * 2<sup>0</sup> = -0 + 4 + 0 + 1 = 5</p>
            <p>When we think of out base 10 system, we intuit that a number can have infinte 0s infront of it. 12 = 012 = 0012 = 00012 = 0...12. The same thing happens in binary. 5<sub>10</sub> = 101 = 0101 = 00101 = 000101 = 0...101. But in Two's Compliment, when the first bit is negative (i.e. 1) such as: 101, there are infinite 1s infront, such as -4<sub>10</sub> = 101 = 1101 = 11101 = 1...101</p>
        </div>

        <div class="info-block">
            <h3>-1 is the Opposite of 0, not 1</h3>
            <p>When we think about the opposite of 0, what do you imagine? I would intuitively say 1 is the opposite, right? Well in computing 0 is represented by the binary code 0...0000000, all zeros. Theoretically (but not practically as we don't have infinite storage) there are an infite amount of zeros. Well the opposite to this is all 1s, makes sense! 1...1111111, with infinite 1s at the beginning. Well, it turn out that in Two's Compliment, inifinte 1s happens to equal -1. 1...111111<sub>2</sub> = -1<sub>10</sub>. So the opposite of 0, is -1!</p>
        </div>

        <div class="info-block">
            <h3>Bits & Bytes to Gigabytes</h3>
            <p>Binary is stored bytes. 1 byte is 8 bits. 1 bit is just a 0 or 1, so in this example there are 8 bits, and 1 byte. 1000 bytes makes 1 kilobyte. 1000 kilobytes makes 1 megabyte. 1000 megabytes makes 1 gigabyte. Your home computer may have 500 GB (gigabytes) of storage or your phone or tablet may have up to 32 GB. 32 Gigabytes is 256,000,000,000 bits. 256 Billion 0s and 1s!</p>
            <ul>
                <li>1 bit</li>
                <li>8 bits = 1 byte</li>
                <li>1000 bytes = 1 kilobyte</li>
                <li>1000 kilobytes = 1 megabyte</li>
                <li>1000 megabytes = 1 gigabyte</li>
                <li>1000 gigabytes = 1 terabyte</li>
            </ul>
        </div>

        <figure>
            <img src="images/5mb-1956.png">
            <figcaption>This is what 5 MB of storage looked like in 1956, now your phone holds 6400 times as much storage! source: proftomcrick.com</figcaption>
        </figure>
    </div>

    <div class="sources">
        <h4>Sources</h4>
        <ul>
            <li><a target="_blank" href="https://en.wikipedia.org/wiki/Binary_number">wikipedia</a></li>
            <li><a target="_blank" href="https://www.tutorialspoint.com/cprogramming/c_data_types.htm">tutorialspoint</a></li>
            <li><a target="_blank" href="https://proftomcrick.com/2011/12/26/in-1956-5mb-was-big-enough-for-anyone/">proftomcrick (image)</a></li>
        </ul>
    </div>

    <script src="./js/binary.js"></script>
</body>
</html>