Bitwise Operators & Number Systems
Number Systems
Number systems used in daily life and programming are often referred to by their ‘base’. The ‘base’ of a number system indicates the number of digits used in that system.
For example, humans use “Base 10”, and our available 10 digits are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.
By convention, the values of each number are determined by “positional notation”, meaning that WHERE the number sits in comparison to it’s neighbors is determinate of it’s value.
Take the number 943.
__9__ __4__ __3__ = 9*10^2 + 4*10^4 + 3*10^0 = 900 + 40 + 3 = 943
10^2 10^1 10^0
(100) (10) (1)
BINARY
What even IS binary?
Compared to our familiar Decimal system, computers use Binary  bi
meaning two
, which is a base 2 number system.
How Computers Work (Kind Of)
Backing up a bit, let’s talk about how computers work. From a relatively high level, computers are made up of tiny storage locations.
These storage locations ultimately control the flow of electricity in the form of circuits, the storage locations acting as ‘gates’.
Each storage location has one of two states  high voltage, or low voltage. To represent these states programmers use the numbers 1 or 0  which is why binary is so convenient.
1 Storage Unit = 1 Binary Digit = 1 Bit
8 Bits = 1 Byte
#bits/word = "Word Length" of a computer
ie: 32bit, 64bit (fullword, doubleword).
Back To Binary
__1__ __1__ __0__ __0__ __1__
2^4 2^3 2^2 2^1 2^0
Think about the ASCII character codes. 8 bits represent each character in the ASCII chart.
The number 5, for example, is represented by the ASCII code 53, which binary has an 8 bit representation of 00110101
BitWise Logical Operators aka Gates
What is a Digital Logic Gate?
As the above link mentions, digital logic gates allow us to represent boolean logic in various possible combinations and outcomes. In coding, you’ve interacted regularly with the boolean operators like &&
, 
, !==
etc. In computer programming, they get more complicated and can be represented using a diagram and a truth table.
The six most common logic gate operators are NOT
, AND
, OR
, XOR
, NAND
, and NOR
.
Let’s look at a few.
AND ( & )
Performs the AND operation on each pair of bits  returns a 1 only if BOTH of the comparative bits are 1.
Truth Table:
10101 & 11001
a  b  a AND b

1  1  1
0  1  0
1  0  0
0  0  0
1  1  1
OR (  )
Performs the OR operation on each pair of bits. Returns a 1 if EITHER of the bits are 1.
Truth Table:
10101  11001
a  b  a OR b

1  1  1
0  1  1
1  0  1
0  0  0
1  1  1
XOR ( ^ ) aka “Exclusive Or”
Performs the XOR operation on each pair of bits. One of the two operands must be true, but not both.
Truth Table:
10101 ^ 11001
a  b  a XOR b

1  1  0
0  1  1
1  0  1
0  0  0
1  1  0
NOT ( ~ )
Performs the NOT operator on each bit. Returns an inverted value of the bits.
Truth Table:
~10101
a  NOT a

1  0
0  1
1  0
0  1
1  0
There are more gates, such as NAND
, NOR
, EXNOR
, and others that represent circuits of combinations of gates together.
Using a truth table, convert write out the logical representation of the following bytes. Include the appropriate diagram.
1. 10101010 AND 01010101
2. 10101010 OR 01010101
3. 10101010 XOR 01010101
4. NOT 11001100
5. 11001111 AND 10110110
6. NOT 00010001
7. 11001001 XOR 01100100
8. 11001001 OR 01100100
Binary –> Decimal
Setup: Write a list of slots with the powers of 2 & values of the calculation.
___ ___ ___ ___ ___ ___ ___ ___ ___ ___
2^9 2^8 2^7 2^6 2^5 2^4 2^3 2^2 2^1 2^0
512 256 128 64 32 16 8 4 2 1
Determine the polynomial value:
Example:
_1_ _0_ _1_
2^2 2^1 2^0
4 2 1
101 = 1*2^2 + 0*2^1 + 1*2^0 = 4 + 0 + 1 = 5
Convert the following numbers from Binary to Decimal.

10100011

101101

110100101010

11001001010

11101111

01000010
Decimal –> Binary
Refer to the powers of two slot diagram. Think about each slot like: “this is the 1’s place, this is the 16s place” etc.
Deconstruct the decimal into powers of two.
Find the largest number in the “powers of two” list that is divisible into the given number, then subtract and continue.
Finally, throw a 1 in the appropriate slot if you’ve used that value.
Example:
114 = 64 + 50

32 + 18

16 + 2
In english, we have: "164sPlace, 132sPlace, 116splace, 12splace"
_1_ _1_ _1_ _0_ _0_ _1_ _0_
2^6 2^5 2^4 2^3 2^2 2^1 2^0
64 32 16 8 4 2 1
Convert the following numbers from Decimal to Binary.

100

25

675

10

81
HEXADECIMAL
hexa
meaning 6, decimal
meaning pertaining to 10.
Decimal –> Hexadecimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
0 1 2 3 4 5 6 7 8 9 a b c d e f
____ ____ ____ ____
16^3 16^2 16^1 16^0
4096 256 16 1
SETUP: Refer to the graph of decimals 115 to hex and the slots indicating values of 16 to the power of whatever.
Similarly to how we converted decimal to binary, first find the largest calculation that will fit into decimal.
Deconstruct the decimal into powers of 16, then map those values onto the list of hexadecimal characters in the slots they belong.
Example:
Decimal: 2000
The largest value that can go into 2000 from our chart is 256, so we start there. How many times can in go into 2000, and what is left over?
2000 = (7 * 256) + 208

(13 * 16) + 0
In english, working our way through our available value slots, we have: "7256's, 1316s, 01s"
Using the hex to decimal value chart, we would get:
__7__ __d__ __0__ > 2000(base10) === 7D0(base16)
16^2 16^1 16^0
256 16 1
Convert the following values from decimal to hexadecimal.

56

158

273

105

171
Hexadecimal –> Decimal
Knowing that each digit represents a 16 to the power of it’s index, we simply need to grab the decimal representation of the digit, and multiple by 16 to that power.
Example:
Hex: 1B2C
Looking back to our graph of slots of 16 and it's powers:
__1__ __B__ __2__ __C__
16^3 16^2 16^1 16^0
4096 256 16 1
Grabbing our decimal values B=11, C=12, so our calculation would look like this:
1B2C = 1*4096 + 11*256 + 2*16 + 12*1
==> 6,956
Convert the following hexadecimal values to decimals.

35

1AA

12

4B

FF
Binary –> Hexadecimal
Because 16 is a power of 2, this is a super common conversion in computer programming. Under the hood, hexadecimal notation is simply condensed Binary.
In hex, every group of 4 binary digits (bits!) represents one hexadecimal digit.
Example:
Binary: 000101101110
If we break this up into sections of 4 “bits” with their individual decimal representations we have:
Binary: 0001 0110 1110
1 6 14
Hex: 1 6 E
Convert the following values in (unsigned) binary to hexadecimal.

10010001

101010

100110101

1010101001

1100111
You might be thinking “This reminds me of color values that I use all the time in CSS!” Great thought! Let’s check it out.
RGB –> Hex
Two common ways to represent colors in computer programming are RGB values, and Hexadecimal values.
RGB values require a set of 3 digits indicating , each from 0255. Each of these numbers in binary fills 8 bits, or 1 byte.
In computers, each pixel is represented by one 8bit byte giving it it’s color value.
Take a second to convert the decimal 255 into binary.
That’s the maximum binary number we can possibly get with 8 bits (with 0000 0000
being the absolutely minimum).
So let’s take rgb(255, 255, 255)
and convert it into hexadecimal.
For this example, I’ll go decimal –> binary –> decimal representation of each 4 bits –> hex.
Decimal: 255, 255, 255
Binary: 1111 1111, 1111 1111, 1111 1111
4 Bits: 15 15 15 15 15 15
Hex: F F F F F F
==> #FFFFFF (or #FFF in shorthand)
Convert the following rgb values to hexadecimal.
(BONUS: what is the english color name? (google is OK for that part) )
1. rgb(0, 191, 255)
2. rgb(234, 67, 53)
3. rgb(233, 29, 99)
Convert these hex values to rgb
1. #e9c98f
2. #05c2d1
3. #0000ff