the sad, strange tale of the boy with only two fingers: an introduction to binary for humans
TRANSCRIPT
The sad, strange tale of the boy with only two fingers: an introduction
to binary for humans
“A bunch of ones and zeroes”
But… wait… what?Question:
This?
This?
This?
“Digital”The secret analog world of
All hardware is analog.
Analog is prone to noise.
Binary simplifies low and high voltage into ON or OFF.
It can be encoded into almost any medium.
“Digital” Media
Punchcard CD-ROMCD-Rom This crap Redstone
Understanding Binary.
10101010001111101101100100100111010100111010000110101010110010010100001011110100111010011010101010101110010010110100101010010101010010001100000111101011010101001010010101000101001010010
10001110101111001100100100111010100111010000110101010110010010100001100001 1011110100111010011010101010101110010010110100101010010101010010001100000111101011010101001010010101000101001010010100011101011110110010010100001011
Binary is scary.
So let’s start with something less scary, decimal numbers.
0123456789
• …8…9…10
• …98…99…100
• …999,998… 999,999… 1,000,000
Run out of symbols -> start a new column.
The number 10 is totally arbitrary.
12 3 4
5 6
7 8 910
Digits.
Binary:Same ideas;
different number of digits.
1 10
• 0…1…10
• 10…11…100
• 1111100…1111101…1111110…1111111… 1000000
Run out of symbols -> start a new column.
1 1 1 1 1 1 1 1
Byte (8 bits)
Nibble (4 bits)
1 Bit
Bits & Bytes
128 64 32 16 8 4 2 1 1 1 1 1 1 1 1 1
128+64+32+16+8+4+2+1=255
Value of each Bit in a Byte
Powers of 2
Bytes are often represented as Hexadecimal numbers.
Each byte gets 2 hex-digits. 00...FF
What does that hand look like?
Question:
2
3 4 5 6
7
8 9
A
B
1
CD E
F10
Because
FFFFFF
Is much easier than
111111111111111111111111
Or
16,777,216
1 0 0 1
0 0 1 1
1 1 0 1
Test your might!
= 9
= 3
= 13
8 4 2 1
8 4 2 1
8 4 2 1
1001 (9)+ 1100 (12)---------- 10101 (21)
Arithmetic works the same way.
1001 (9)x 1100 (12)——————————-
0000 xxx 00000 x xxx 100100 x xxx+ 1001000 x xxx -—————————————-1101100 (108)
Arithmetic works the same way.
Where do I put all the bits?Question:
Memory.Turing Machine.
“Turing's greatest contribution to the development of the digital computer [was the] idea of controlling the function
of a computing machine by storing a program of … numerically, encoded instructions in the machine's
memory”
http://www.alanturing.net/
JavaScript?Question:
Booleans.
Booleans1 bit of data0 = false1 = true
Numbers.
Whole numbers.
Integers are represented by sets of 1s and 0s
7 = 0111
How many 1’s and 0’s determine the maximum size of the number
8 bits (0 to 255) 16 bits (0 to ~64 thousand) 32 bits (0 to ~4 billion)
Signed numbers: Use 1 bit to allow negatives.
This cuts the maximum number in half.
8 bits (-127 to 127) 16 bits (-32K to 32K) 32 bits (-2.2B to 2.2B)
Decimal numbers.
• Very large or very small numbers.
• Sacrifice accuracy for range.
Floating point
The way it works is complicated!
A vastly simplified version… that is still pretty confusing
1 + 1/2 + 1/4 + 1/8 + 1/16…1 0 1 1…
24 bits determine the base number
7 bits for the exponent
1.23456781 bit for the sign
1
0001101
×29-
-632.0987136
0.2 + 0.1 == 0.3;0.30000000000000004
0.2 + 0.1;
// Javascript
// 8-(0.2 + 0.1 == 0.3; // FALSE!
Objects.
An object is a collection of smaller data types.
Keys (property names) are used to reference values stored in the object.
0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 1
Object containing other data
Number String etc.
Boolean
Objects
Pointers.
0 0 1 0 0 1 0 1 0 0 1 0 0 1 0 1
Data in memory
Pointer to location 0
Pointer to location 4
Pointer to location 8
Pointers
Arrays.
Can be as simple as 3 numbers… • A location in memory • The size (in bits) of each item • The number of items
An array is a type of object that represents an ordered set of values.
In JavaScript, Arrays are essentially objects with 0, 1, 2, 3, etc. as keys.
Text.
Characters.
Characters are individual letters, numbers, or other glyphs.
Each number maps to a glyph.
ASCII.
• A basic type of encoding.
• 255 characters.
• 1 byte each.
ASCII.
The letter ‘A’ maps to 65 in ASCII
0100 0001
Unicode.
• 1 million + glyphs
• Allows a huge number of characters to be represented with as few bits as possible.
• Uses a form of data compression.
Unicode.
Some bits in each byte indicate whether there is another byte after it.
Strings.
• An array of characters.
• A null character (eight 0s) marks the end of a string.
Strings.
0100 1101 “M” 0110 1001 “i” 0110 1101 “m” 0111 0011 “s” 0000 0000 “ ”
“Mims ”
Digital music.
Approximate amplitude
(volume)
Time
Encoding a waveform into binary
Each sample is a 16-bit integer
Samples are played back
thousands of times per second
Images.
Hex colors.Remember hexadecimal from a few slides ago?
Test your might!
FF0000FF0000
00FF0000FF00
0000FF0000FF
FFFFFFFFFFFF
6F43B26F43B2A bit redish
Not very green
Sort of a lot of blue
6F43B2
Colors are 24 bits (aka 3 bytes or 6 hex digits)
Colors sometimes have an alpha channel (32 bits)
Each color channel has 256 possible brightness levels
In their simplest form, images are arrays of colors (plus some metadata)
Everything else.
“A bunch of ones and zeroes”
Can I do a binary?Bonus Question:
Typed Arrays ArrayBuffer DataView Bitwise operators |,&,^,~,>>,<<
// Javascript http://developer.mozilla.org/en/docs/Web/JavaScript/Typed_arrays
// Convert Number to binary string let num = 9; let binary = num.toString(2); // “1001”
// Javascript
// Convert binary string to Number let binary = “1001”; let num = parseInt(binary, 2); // 9
// & bitwise AND 1011 & 1100 = 1000
// | bitwise OR 1011 | 1100 = 1111
// ^ bitwise XOR 1011 ^ 1100 = 0111
// Bitwise Operators
// ~ bitwise NOT ~1011 = 0100
// << shift left 1011 << 2 = 101100
// >>> shift right 1011 >>> 2 = 001011
// Bitwise Operators
const redOffset = 16; const greenOffset = 8; const blueOffset = 0; const channelMask = 0xFF;
let getComponents = (color) => { return [color >>> redOffset & channelMask, color >>> greenOffset & channelMask, color >>> blueOffset & channelMask]; };
let orange = 0xFF6633; let [red, green, blue] = getComponents(orange); console.log (red, green, blue); // 255 102 51
// Javascript
Orange 0xFF6633 = 11111111 01000010 00100001 channelMask 0xFF = 00000000 00000000 11111111 = 11111111
// Red 11111111 01000010 00100001 >> 16 = 11111111 01000010 00100001 11111111 & 11111111 = 11111111
// Green 11111111 01000010 00100001 >> 8 = 11111111 01000010 0100001 11111111 01000010 & 11111111 = 11111111 01000010
// Blue 11111111 01000010 00100001 >> 0 = 11111111 01000010 00100001 11111111 01000010 00100001 & 11111111 = 11111111 01000010 00100001
What’s happening (in binary)