SchoolsIntroMaterial/binary.html at master · EPCCed/SchoolsIntroMaterial · 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/epcc.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
                                <section>
				<section id="intro">
                                  <h2>Binary, Data and Images</h2>
                                  <img data-src="images/Binary_Back.jpg" alt="Binary Image" height="50%" width="50%">
                                  <table>
  <tr>
    <td> <img data-src="images/epsrc.png" style="background:none; border:none; box-shadow:none;"  height="80" alt="EPSRC Logo"></td>
    <td>  <img data-src="images/nerc-logo-115.png" alt="NERC Logo"></td>
    <td>  <img data-src="images/archer_logo_360.png" height="80"  alt="ARCHER Logo"></td>
  </tr>
</table>
                                </section>

                                   <section>
 					<h2>Aims</h2>
					<ul>
						<li>Describe Binary Numbers</li>
						<li>Describe how ASCII can be used to store data</li>
						<li>Describe basic image data format</li>
					</ul>
                                    </section>
                                    <section>
                                        <h3>Reuse</h3>
 <img data-src="images/creativecommons.png" alt="Creative Commons License Image">

<p style="font-size:14px">This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</p>
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/deed.en_US">http://creativecommons.org/licenses/by-nc-sa/4.0/deed.en_US</a>
<p style="font-size:14px">
This means you are free to copy and redistribute the material and adapt and build on the material under the following terms: You must give appropriate credit, provide a link to the license and indicate if changes were made. If you adapt or build on the material you must distribute your work under the same license as the original.
</p>
<p style="font-size:14px">
Note that this presentation contains images owned by others. Please seek their permission before reusing these images.
</p>
                                </section>
</section>
<section>Binary Numbers
<section><h2>Here there be Dragons</h2>
<p>A land of wizards and soldiers ruled by a central city has four villages at its compass points. The land exists in the valley of dragons.
Every so often the dragons will attempt to raid the villages. To combat this the wizards can transport soldiers but they need to know how many soldiers to send.
<p>Each village has three signal fires and the wizards are trying to work out how to get the fires to signal more that three dragons are approaching.
</section>
<section>
 <img data-src="images/village.png" alt="Creative Commons License Image" style="background:none; border:none; box-shadow:none; " height="70%" width="70%"/>
<p>Do you have an idea?
</section>
<section><h2>Lets Try Binary</h2>
<p> If we use binary, we can indicate up to seven dragons approaching.
<table>
  <tr>
    <td>0</td><td>000</td><td>4</td><td>100</td>
</tr>
<tr>
    <td>1</td><td>001</td><td>5</td><td>101</td>
</tr>
<tr>
    <td>2</td><td>010</td><td>6</td><td>110</td>
</tr>
<tr>
    <td>3</td><td>011</td><td>7</td><td>111</td>

  </tr>
</table>
</section>
<section><h2>A Different Base</h2>
<p>We normally count in base 10. This means each column in a number is a power of 10.
<p>The number 125 breaks down like this:
<table>
  <tr>
    <td>Hundreds <script type="math/tex; mode=display">(10^2)</script></td><td>Tens<script type="math/tex; mode=display">(10^1)</script></td><td>Units<script type="math/tex; mode=display">(10^0)</script></td>
</tr>
<tr>
    <td align="center">1</td><td align="center">2</td><td align="center">5</td>
</tr>
</table>
</section>
<section><h2>A Different Base</h2>
<p>Numbers in computers are stored and represented in binary. This uses base 2.
This means each column in a number is a power of 2.
<p>The number 12 is written as 1100 and breaks down like this:
<table>
  <tr>
    <td>Eights <script type="math/tex; mode=display">(2^3)</script></td><td>Fours<script type="math/tex; mode=display">(2^2)</script></td><td>Twos<script type="math/tex; mode=display">(2^1)</script></td> <td>Units <script type="math/tex; mode=display">(2^0)</script></td>
</tr>
<tr>
    <td align="center">1</td><td align="center">1</td><td align="center">0</td><td align="center">0</td>
</tr>
</table>
</section>
<section><h2>Examples</h2>
<table>
  <tr>
    <td>65</td><td>1000001</td><td>32</td><td>100000</td>
</tr>
<tr>
    <td>9</td><td>1001</td><td>14</td><td>1110</td>
</tr>
</table>
<p>Now you choose a number and try to write it in binary.
<p>For numbers like this the maximum value is <script type="math/tex; mode=display">(2^n)-1</script> where n is the number of bits.
</section>
<section><h2>Negative Numbers</h2>
<p>We have to deal with negative numbers.
<p>We don't have a negative sign in the same way we do when writing a number done normally.
<p>One way we could do it is to make the first bit 1 for negative numbers and 0 for positive numbers.
<p>This has problems - we get two zeros and it reduces the range of numbers we can represent.
</section>
<section><h2>Negative Numbers</h2>
<p>We use what is called two's complement.
<p>This is a method for representing postive and negative numbers but has no issue with the zero.
<p>We do need to know the number of bits in a number representation. So for four bits we can do the following:
<table>
  <tr>
    <td>4</td><td>0100</td><td>0</td><td>0000</td>
</tr>
<tr>
    <td>-4</td><td>1100</td><td>-1</td><td>1111</td>
</tr>
</table>
</section>
<section><h2>Two's Complement</h2>
<ul>
  <li>Choose a number</li>
  <li>Convert the number to binary ignoring the sign. So 5 = 0101.
  <li>Postive numbers, finish here.
  <li>Negative numbers - change all the 1s to 0 and the 0s to 1 (this is the complement)
  <li>Add one to the complement.
</ul>
<p>This introduces a range that can be represented by n bits.
<p>Lowest value is <script type="math/tex; mode=display">-(2^{(n-1)})</script> and Highest value is <script type="math/tex; mode=display">+(2^{(n-1)})-1</script>
</section>
</section>
<section>Storing Data
<section><h2>How do letters fit in?</h2>
Now numbers can be represented in binary - how do we represent letters?</section>
<section><h2>Using Numbers to represent numbers</h2>
<p>We can use numbers to represent letters and other symbols in text.
<p>There are many ways to do this - we will look at a standard called 7-bit ASCII.
<p>This was one of the first main encodings for text.
<p>There are 128 entries in 7-bit ASCII - these are used for characters, spaces and symbols.
</section>
<section><h2>A Text Example</h2>
<table>
<tr>
<td>Words</td><td>1010111 1101111 1110010 1100100 1110011</td>
</tr>
<tr>
<td>in</td><td>1101001 1101110</td>
</tr>
<tr>
<td>ASCII</td><td>1000001 1010011 1000011 1001001 1001001</td>
</tr>
<tr>
<td>code</td><td>1100011 1101111 1100100 1100101</td>
</tr>
</table>
<p>Write the ASCII for this word: Dragon
</section>
<section><h2>Common File Formats</h2>
<ul>
<li>HTML - Webpages which are text in ASCII or Unicode.</li>
<li>Comma Seperated Values - textual data seperated by commas.</li>
<li>PDF - A document format.</li>
</ul>
</section>
<section><h2>Images: How can we use binary here?</h2>
<p>How can we use binary to represent images?
<p>There are a lot of ways.
<p>Images are made up of pixels in a computer - each pixel needs to have a colour assigned to it.
<p>Images are an X by Y grid of pixels at the basic level.
</section>
<section><h2>Colours</h2>
<p>A colour palette - a set of colours with an identifying number which can be each pixel in an image.
<p>Colour Encoding - each pixel is encoded with a colour scheme such as RGB or CMYK
</section>
<section><h2>Bitmaps</h2>
<p>One of the most basic image formats is the bitmap.
<p>In a bitmap each pixel is represent by a bit pattern which represents a colour.
<p>Bitmaps are generally 8, 16, 24 or 32bit.
<p>Each pixel is represented by a number of bits - so in an 8bit bitmap each pixel has 8bits to determine its colour.
</section>
<section>
<img data-src="images/bitmap.png" alt="Creative Commons License Image" style="background:none; border:none; box-shadow:none; " height="60%" width="60%"/>
</section>
<section><h2>Bitmaps</h2>
<p>8 bits means that a pixel can have one of 256 colours - which likely be indexed in a encoding table.
<p>In a 24bit bitmap - each pixel has 3 8bit numbers - each of which define the Red Green and Blue components of the pixel.
<p>This means the pixel can be one of more the 16 million colours.
<p>These are generally stored as Blue, Green then Red.
</section>
</section>
<section>Next Time
<h2>Colour By Numbers</h2>
<p>Try out using binary numbers to colour in the sheets</p>
</section>
			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>
			// More info https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				history: true,
                                math: {
					// mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
					config: 'TeX-AMS_HTML-full'
				},
				// More info https://github.com/hakimel/reveal.js#dependencies
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'lib/js/classList.js' },
					{ src: 'plugin/math/math.js', async: true }
				]
			});
		</script>
	</body>
</html>