Most people know that computers are "just a bunch of ones and zeroes," but few understand what that really means. How do ones and zeros become numbers, words, and pictures? This talk starts at the beginning, explaining binary numbers and shows how they are used to describe basic datatypes. We begin to uncover what the statement "just a bunch of ones and zeroes" really means.

1. MimsH.Wright
FreelanceSoftwareDeveloper
mims@mimswright.com
@mimshwright
github.com/mimshwright/

2. The sad, strange tale
of the boy with only
two fingers: an introduction
to binary for
humans

3. “A bunch of
ones and zeroes”

4. But…wait…what?
Question:

5. This?

6. This?

7. This?

8. “Digital”
Thesecretanalogworldof

9. Allhardwareisanalog.

10. Analogispronetonoise.

11. BinarysimplifieslowandhighvoltageintoONorOFF.

12. Itcanbeencodedintoalmostanymedium.

13. “Digital”Media
Punchcard
CD-ROMCD-Rom Thiscrap Redstone

14. UnderstandingBinary.

15. 1010101000111110110110010010011101010
0111010000110101010110010010100001011
1101001110100110101010101011100100101
1010010101001010101001000110000011110
1011010101001010010101000101001010010
1000111010111100110010010011101010011
1010000110101010110010010100001100001
1011110100111010011010101010101110010
0101101001010100101010100100011000001
1110101101010100101001010100010100101
Binaryisscary.

16. Solet’sstartwithsomethinglessscary,
decimalnumbers.
0123456789

17. • …8…9…10
• …98…99…100
• …999,998… 999,999… 1,000,000
Runoutofsymbols->startanewcolumn.

18. Thenumber 10 is
totallyarbitrary.

19. 1
2
3
4
5 6
7
8
9
10
Digits.

20. youtu.be/U6xJfP7-HCc
2
3
4
5
6 7
8
9
X 3
1 10

21. Binary:
Sameideas;
differentnumberofdigits.

22. 1 10

23. • 0…1…10
• 10…11…100
• 1111100…1111101…1111110…
1111111… 1000000
Runoutofsymbols->startanewcolumn.

24. 1 1 1 1 1 1 1 1
Byte
(8 bits)
Nibble
(4 bits)
1 Bit
Bits&Bytes

25. 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
ValueofeachBitinaByte
Powersof2

26. Bytesareoftenrepresentedas
Hexadecimalnumbers.
Eachbytegets2hex-digits.
00...FF

27. Whatdoesthathand
looklike?
Question:

28. 2
3
4 5 6
7
8 9
A
B
1
C
D
E
F
10

29. Because
FFFFFF
Ismucheasierthan
111111111111111111111111
Or
16,777,216

30. 1 0 0 1
0 0 1 1
1 1 0 1
Testyourmight!
= 9
= 3
= 13
8 4 2 1
8 4 2 1
8 4 2 1

31. 1001 (9)
+ 1100 (12)
----------
10101 (21)
Arithmeticworksthesameway.

32. 1001 (9)
x 1100 (12)
——————————-
0000 xxx
00000 x xxx
100100 x xxx
+ 1001000 x xxx
-—————————————-
1101100 (108)
Arithmeticworksthesameway.

33. WheredoIputallthebits?
Question:

34. Memory.
TuringMachine.
“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/

35. JavaScript?
Question:

36. Booleans.

37. Booleans
1bitofdata
0 = false
1 = true

38. Numbers.

39. Wholenumbers.

40. Integersarerepresentedbysetsof1sand0s
7 = 0111

41. Howmany1’sand0’sdeterminethe
maximumsizeofthenumber
8 bits (0 to 255)
16 bits (0 to ~64 thousand)
32 bits (0 to ~4 billion)

42. Signednumbers:
Use1bittoallownegatives.
Thiscutsthemaximumnumberinhalf.
8 bits (-127 to 127)
16 bits (-32K to 32K)
32 bits (-2.2B to 2.2B)

43. Decimalnumbers.

44. • Very large or very small numbers.
• Sacrifice accuracy for range.
Floatingpoint

45. Thewayitworksiscomplicated!

46. Avastlysimplifiedversion…
thatisstillprettyconfusing
1 + 1/2 + 1/4 + 1/8 + 1/16…
1 0 1 1…
24bitsdetermine
thebasenumber
7bits
forthe
exponent
1.2345678
1bit
forthe
sign
1
0001101
×29-
-632.0987136

47. 0.2 + 0.1 == 0.3;
0.30000000000000004
0.2 + 0.1;
// Javascript
// 8-(
0.2 + 0.1 == 0.3; // FALSE!

48. Objects.

49. Anobjectisacollectionofsmallerdatatypes.
Keys(propertynames)areusedtoreference
valuesstoredintheobject.

50. 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

51. Pointers.

52. 0 0 1 0 0 1 0 1 0 0 1 0
Data in memory
Pointer to
location 0
Pointer to
location 4
Pointer to
location 8
Pointers

53. Arrays.

54. Canbeassimpleas3numbers…
• Alocationinmemory
• Thesize(inbits)ofeachitem
• Thenumberofitems
Anarrayisatypeofobjectthatrepresentsan
orderedsetofvalues.

55. InJavaScript,Arraysareessentiallyobjects
with0,1,2,3,etc.askeys.

56. Text.

57. Characters.

58. Charactersareindividualletters,numbers,
orotherglyphs.
Eachnumbermapstoaglyph.

59. ASCII.

60. • A basic type of encoding.
• 255 characters.
• 1 byte each.
ASCII.

61. Theletter‘A’mapsto65inASCII
0100 0001

62. Unicode.

63. • 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.

64. Somebitsineachbyteindicatewhether
thereisanotherbyteafterit.

65. Strings.

66. • An array of characters.
• A null character (eight 0s) marks the end of a string.
Strings.

67. 0100 1101 “M”
0110 1001 “i”
0110 1101 “m”
0111 0011 “s”
0000 0000 “ ”
“Mims ”

68. Digitalmusic.

69. Approximate
amplitude
(volume)
Time
Encodingawaveformintobinary
Each sample is a
16-bit integer
Samples are
played back
thousands of
times per second

70. Images.

71. Hexcolors.
Rememberhexadecimalfromafewslidesago?

72. Testyourmight!
FF0000FF0000

73. 00FF0000FF00

74. 0000FF0000FF

75. FFFFFFFFFFFF

76. 6F43B26F43B2
A bit redish
Not very green
Sort of a lot of blue
6F43B2

77. Colorsare24bits
(aka3bytesor6hexdigits)
Colorssometimeshaveanalphachannel
(32bits)
Eachcolorchannelhas256possible
brightnesslevels

78. Intheirsimplestform,imagesare
arraysofcolors
(plussomemetadata)

80. Everythingelse.

81. “A bunch of
ones and zeroes”

82. MimsH.Wright
FreelanceSoftwareDeveloper
mims@mimswright.com
@mimshwright
github.com/mimshwright/

83. CanIdoabinary?
BonusQuestion:

84. Typed Arrays
ArrayBuffer
DataView
Bitwise operators |,&,^,~,>>,<<
// Javascript
http://developer.mozilla.org/en/docs/Web/JavaScript/Typed_arrays

85. // 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

86. // & bitwise AND
1011 & 1100 = 1000
// | bitwise OR
1011 | 1100 = 1111
// ^ bitwise XOR
1011 ^ 1100 = 0111
// Bitwise Operators

87. // ~ bitwise NOT
~1011 = 0100
// << shift left
1011 << 2 = 101100
// >>> shift right
1011 >>> 2 = 001011
// Bitwise Operators

88. 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

89. 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)