text, images, video and sound cs 1 introduction to computers and computer technology rick graziani...

Text, Images, Video and Sound

CS 1 Introduction to Computers and Computer Technology

Rick Graziani

Spring 2015

Rick Graziani [email protected] 2

Digitizing Text

• Earliest uses of PandA (Presence and Absence) was to digitize text (keyboard characters).

• We will look at digitizing images and video later.• Assigning Symbols in United States:

– 26 upper case letters– 26 lower case letters– 10 numerals– 20 punctuation characters– 10 typical arithmetic characters– 3 non-printable characters (enter, tab, backspace)– 95 symbols needed


ASCII-7

• In the early days, a 7 bit code was used, with 128 combinations of 0’s and 1’s, enough for a typical keyboard.

• The standard was developed by ASCII (American Standard Code for Information Interchange)

• Each group of 7 bits was mapped to a single keyboard character.

0 = 0000000

1 = 0000001

2 = 0000010

3 = 0000011

… 127 = 1111111


Byte

Byte = A collection of bits (usually 7 or 8 bits) which represents a character, a number, or other information.

• More common: 8 bits = 1 byte

• Abbreviation: B


Bytes

1 byte (B)

Kilobyte (KB) = 1,024 bytes (210)

• “one thousand bytes”

1,024 = 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2

Megabyte (MB) = 1,048,576 bytes (220)

• “one million bytes”

Gigabyte (GB) = 1,073,741,824 bytes (230)

• “one billion bytes”

Wikipedia



ASCII-8

• IBM later extended the standard, using 8 bits per byte.

• This was known as Extended ASCII or ASCII-8

• This gave 256 unique combinations of 0’s and 1’s.

0 = 00000000

1 = 00000001

2 = 00000010

3 = 00000011

… 255 = 11111111

1


ASCII-8


Try it!

• Write out Cabrillo College (Upper and Lower case) in bits (binary) using the chart above.

0100 0011 0110 0001 …

C a

1


The answer!

0100 0011 0110 0001 0110 0010 0111 0010 0110 1001 0110 1100

C a b r i l

0110 1100 0110 1111 0010 0000 0100 0011 0110 1111 0110 1100

l o space C o l

0110 1100 0110 0101 0110 0111 0110 0101

l e g e

1


• Although ASCII works fine for English, many other languages need more than 256 characters, including numbers and punctuation.

• Unicode uses a 16 bit representation, with 65,536 possible symbols.

• Unicode can handle all languages.

• www.unicode.org

Unicode

Non-text Files: Representing Images and Sound


Pixels

• A monitors screen is divided into a grid of small unit called picture elements or pixels.

• The more pixels per inch the better the resolution, the sharper the image.

• All colors on the screen are a combination of red, green and blue (RGB), just at various intensities.


• Each Color intensity of red, green and blue represented as a quantity from 0 through 255.

• Higher the number the more intense the color.

• Black has no intensity or no color and has the value (0, 0, 0)

• White is full intensity and has the value (255, 255, 255)

• Between these extremes is a whole range of colors and intensities.

• Grey is somewhere in between (127, 127, 127)


RGB Colors and Binary Representation

• You can use your favorite program that allows you to choose colors to view these various red, green and blue values.



• Let’s convert these colors from Decimal to Binary!

Red Green Blue

Purple: 172 73 185

Gold: 253 249 88



Red Green Blue

Purple: 172 73 185

Gold: 253 249 88

Number of:

27 26 25 24 23 22 21 20

128’s 64’s 32’s 16’s 8’s 4’s 2’s 1’s

Dec.

172

73

185

253

249

88



Red Green Blue

Purple: 172 73 185

Gold: 253 249 88

Number of:

27 26 25 24 23 22 21 20

128’s 64’s 32’s 16’s 8’s 4’s 2’s 1’s

Dec.

172 1 0 1 0 1 1 0 0

73 0 1 0 0 1 0 0 1

185 1 0 1 1 1 0 0 1

253 1 1 1 1 1 1 0 1

249 1 1 1 1 1 0 0 1

88 0 1 0 1 1 0 0 0



• We have now converted these colors from Decimal to Binary!

Red Green Blue

Purple: 172 73 18510101100 01001001 10111001

Gold: 253 249 88

11111101 11111001 01011000

• Why does this matter?


First a word about Pixels Per Inch

graphicssoft.about.com

• PPI stands for pixels per inch.

• PPI is a measurement of image resolution that defines the size an image will print.

• The higher the PPI value, the better quality print you will get--but only up to a point.

• 300ppi is generally considered the point of diminishing returns when it comes to ink jet printing of digital photos.

1600 pixels

1200 pixels

1200 pixels/300 ppi = 4 inches

1600 pixels /300 ppi = 5.3 inches


First a word about Pixels Per Inch

• The higher the PPI value, the better quality print you will get--but only up to a point.



Red Green Blue

Purple: 172 73 18510101100 01001001 10111001

24 bits for one pixel!

• “True color” systems require 3 bytes or 24 bits per pixel.

• There is 8 bit and 16 bit color, which gives you less of a color palette.



Red Green Blue

Purple: 172 73 18510101100 01001001 10101111 = 24 bits per

pixel

• An 8 inch by 10 inch image scanned in at 300 pixels per inch:

– 8 x 300 = 2,400 pixels 10 x 300 = 3,000 pixels

– 2,400 pixels by 3,000 pixels = 7,200,000 pixels or 7.2 megapixels

– At 24 bits per pixel (7,200,000 x 24)

• = 172,800,000 bits or 21,600,000 bytes (21.6 megabytes)

• RAM memory, video memory, disk space, bandwidth,…

10 inches or 3,000 pixels

8 inches or 2,400 pixels


File Compression

• Typical computer screen only has about 100 pixels per inch, not 300.

• Images still require a lot of memory and disk space, not to mention transferring images over the network or Internet.

• Compression – A means to change the representation to use fewer bits to store or transmit information.

• Information sent via a fax is either black or white, long strings of 0’s or long strings of 1’s.


Run-length encoding

• Many fax machines use run-length encoding.

• Run-length encoding uses binary numbers to specify how long the first sequence (run) of 0’s is, then how long the following sequence of 1’s is, then how long the following sequence of 0’s is, and so on.

• Fewer bits needed than sending 100 0’s, then 373 1’s etc.

• Run-length encoding is a lossless compression scheme, meaning that the original representation of 0’s and 1’s can be reconstructed exactly.


JPEG Compression

• JPEG – Joint Photographic Experts Group

• JPEG is a common standard for compressing and storing still images.

• Our eyes are not very sensitive to small changes in hue (chrominance), but we are sensitive to brightness (luminance).

• This means we can store less accurate description of the hue of the picture (fewer bits) and our eyes will not notice it.

• This is a lossy compression scheme, because we have lost some the original representation of the image and it cannot be reconstructed exactly.


JPEG Compression Scheme

• With JPEG we can get 20:1 compression ratio or more, without being able to see a difference.

• There are large areas of similar hues in pictures that can be lumped together without our noticing.

• Because of this, when Run-length compression is used there is more compression because there is less variations in the hue.


MPEG Compression Scheme

• MPEG (Motion Pictures Experts Group)

• MPEG compression is similar to JPEG, but applied to movies.– JPEG compression is applied to each frame.– Then interframe coherency is used, which only records and

transmits the “differences” between frames.

http://www.youtube.com/watch?v=tKH2oLjQIAA&feature=related

Hexadecimal Number System

<tr>

<td rowspan="2" bgcolor="#cccc99"> </td>

<td height="30" bgcolor="#999966"><div id="mainnav">


Pixels

• A monitors screen is divided into a grid of small unit called picture elements or pixels.

• The more pixels per inch the better the resolution, the sharper the image.

• All colors on the screen are a combination of red, green and blue (RGB), just at various intensities.


Dreamweaver


• With web applications like HTML (Hypertext Markup Language), colors are sometime described using their RGB color specification in hexadecimal.

<tr>



Hexadecimal Number


Hexadecimal RED GREEN BLUE


Red Green Blue

cc cc 99


Red Green Blue

99 99 66

# means hexadecimal in web applications


Hexadecimal Numbers

• What are they?

• Why do these people use them? – web designers– digital medial creators– computer scientists– networking professionals


Rick’s Number System Rules

• All digits start with 0

• A Base-n number system has n number of digits:– Decimal: Base-10 has 10 digits– Binary: Base-2 has 2 digits– Hexadecimal: Base-16 has 16 digits

• The first column is always the number of 1’s

• Each of the following columns is n times the previous column (n = Base-n)– Base 10: 10,000 1,000 100 10 1– Base 2: 16 8 4 2 1 – Base 16: 65,536 4,096 256 16 1


Hexadecimal Digits

Hexadecimal: 16 digits

Dec Hex 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7

Dec Hex 8 8 9 910 A11 B12 C13 D14 E15 F


0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F

Hexadecimal

Decimal 16’s 1’s

8 8

9 9

10 A

14 E

15 F

16 1 0


0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F

Hexadecimal


17 1 1

20 1 4

21 1 5

26 1 A

12 C

29 1 D


0, 1, 2, 3, 4, 5, 6, 7 ,8, 9, A, B, C, D, E, F

Hexadecimal


30 1 E

31 1 F

32 2 0

33 2 1

50 3 2

60 3 C


Question…

• Luigi went into a bar and ordered a beer. The bartender ask Luigi for his ID to make sure he was old enough to order a beer (21). After looking at Luigi’s ID the bartender told Luigi he was not at least 21. Luigi answered, “I’m sorry but you are wrong. I am exactly 21. My ID shows my age in Hexadecimal.”

What age is on McLuigi’s ID in Hexadecimal?


21 1 5

16 + 5


Don’t forget why we are doing this!

<tr>



Hexadecimal Number


Why Hexadecimal?

• Hexadecimal is perfect for matching 4 bits.

• Every combination of 4 bits can be matched with one hex number.

• 4 bits can be represented by 1 Hex value

• 8 bits can be represented by 2 Hex values


Hexadecimal Digits 4 bits can be represented by 1 Hex value

Hexadecimal: 16 digits

Dec Hex Binary 84210 0 00001 1 00012 2 00103 3 00114 4 01005 5 01016 6 01107 7 0111

Dec Hex Binary 84218 8 10009 9 100110 A 101011 B 101112 C 110013 D 110114 E 111015 F 1111


Hexadecimal Digits 4 bits can be represented by 1 Hex value

• Hexadecimal is perfect for matching 4 bits.

• Every combination of 4 bits can be matched with one hex number.

• 4 bits can be represented by 1 Hex value

• 8 bits can be represented by 2 Hex values

Dec. Hex. Binary Dec. Hex. Binary

0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111


Converting Decimal, Hex, and Binary


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary

0 0010 10

F 1110 12

A 0000 5

C 0010 1000


Converting Decimal, Hex, and Binary


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary

0 0 0000 2 2 0010 10 A 1010

15 F 1111 14 E 1110 12 C 1100

10 A 1010 0 0 0000 5 5 0101

12 C 1100 2 2 0010 8 8 1000


What about 8 bits?


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

HEX BINARY

2 4 ?


What about 8 bits?


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

HEX BINARY

2 4 0010 0100


Using Hex for 8 bits


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

Hex Binary Hex Binary Hex Binary

12 0001 0010 3C 99

AB 1A 00

02 B4 7D

0111 0111 1000 1111 1111 1111

0000 0010 1100 1001 0101 1100


Using Hex for 8 bits


0 0 0000 8 8 1000

1 1 0001 9 9 1001

2 2 0010 10 A 1010

3 3 0011 11 B 1011

4 4 0100 12 C 1100

5 5 0101 13 D 1101

6 6 0110 14 E 1110

7 7 0111 15 F 1111

-----------------------------------------------------

Hex Binary Hex Binary Hex Binary

12 0001 0010 3C 0011 1100 99 1001 1001

AB 1010 1011 1A 0001 1010 00 0000 0000

02 0000 0010 B4 1011 0100 7D 0111 1101

77 0111 0111 8F 1000 1111 FF 1111 1111

02 0000 0010 C9 1100 1001 5C 0101 1100


So why is Rick torturing us?

<tr>



Hexadecimal Number


How much RED GREEN BLUE ?


Red Green Blue

cc cc 99

<td height="30"bgcolor="#999966"><divid…>

Red Green Blue

99 99 66


Hexadecimal # RED GREEN BLUE


Red Green Blue

cc cc 99

Convert to Binary

Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

24 bits represent a single color


Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

24 bits represent a single color


Red Green Blue

Hex 00->FF 00->FF 00->FF

Bin 0000 0000 0000 0000 0000 0000

thru thru thru

1111 1111 1111 1111 1111 1111

Dec 0 -> 255 0 -> 255 0 -> 255

0

255

0

255

0

255

? ? ?


0

255

?

How Much? 0 to 255

0

255

?

0

255

?


Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

Hexadecimal


c c

or

12 12

(12x16) (12x1)

204 = 192 + 12


Red Green Blue

Hex cc cc 99

Bin 1100 1100 1100 1100 1001 1001

Dec 204 204 153


0

255

204

0

255

0

255

204

153


0

255

0

0

255

0

255

0

255

Red Green Blue

Dec 0 0 255

Hex 00 00 FF

Bin 0000 0000 0000 0000 1111 1111

00

FF

00

FF

00

FF

HexadecimalDecimal 16’s 1’s


0

255

200

0

255

0

255

48

127

Red Green Blue

Dec 200 48 127

Hex c8 30 7F

Bin 1100 1000 0011 0000 0111 1111

00

FF

00

FF

00

FF



0

255

74

0

255

0

255

132

40

Red Green Blue

Dec 74 132 40

Hex 4A 84 28

Bin 0100 1010 1000 0100 0010 1000

00

FF

00

FF

00

FF



0

255

255

0

255

0

255

255

255

Red Green Blue

Dec 255 255 255

Hex FF FF FF

Bin 1111 1111 1111 1111 1111 1111

00

FF

00

FF

00

FF



0

255

50

0

255

0

255

128

60

Red Green Blue

Dec 50 128 60

Hex 32 80 3C

Bin 0011 0010 1000 0000 0011 1100

00

FF

00

FF

00

FF



CMYK - Cyan-Magenta-Yellow-Black

From Wikipedia:

• The CMYK color model (process color, four color) is used in color printing.

• Comparisons between RGB displays and CMYK prints can be difficult, since the color reproduction technologies and properties are so different.

• A computer monitor mixes shades of red, green, and blue to create color pictures.

• There is no simple or general conversion formula that converts between them.

• Conversions are generally done through color management systems.

• Nevertheless, the conversions cannot be exact.


Color Codes

Digitizing Sound

Theme from Shaft


http://www.youtube.com/watch?v=PfK-UzQ48JE&feature=related

http://www.youtube.com/watch?v=NiCB2isZcRM&feature=related

http://www.youtube.com/watch?v=nFvRvSxsW-I


Digitizing Sound

• Many definitions of analog.

• (Our definition) analog wave is a wave form analogous to the human voice.

• The telephone systems uses an analog wave to transmit your voice over the telephone line to their Central Office.


Digitizing Sound


Digitizing Sound

• Many definitions of analog.

• (Our definition) analog wave is a wave form analogous to the human voice.

• The telephone systems uses an analog wave to transmit your voice over the telephone line to their Central Office.


Digitizing Sound

• Two parts of the wave:– Amplitude – Height of the wave which equates to volume.– Frequency – Number of waves per second, which equates to

pitch.

• Computers are digital devices, so the analog wave needs to be converted to a digital format.


Digitizing Sound

• Converting Analog to Digital requires three steps:

1. Sampling

2. Quantifying

3. Coding


Digitizing Sound

• Sampling – To take measurements at regular intervals.

• The more samples you take, the more accurately you represent the original wave, and the more accurately you can reproduce the original wave.


Digitizing Sound

• Nyquist’s Theorem which states that a sampling of two times the highest allowable frequency is sufficient for reconstructing an analog wave into a digital data.

• Human can hear frequencies up to about 20,000 Hz or 20,000 frequencies per second.

• Using Nyquist’s Theorem, this means we need to sample each analog wave at 40,000 times per second of sound.

• In other words, each one second of sound gets sample 40,000 times. (Actually, 44,100 times per second.)

1 second, 40,000 samples

Sampling – Quantifying - Coding

• A digital audio processor is used to sample the analogue audio wave 44,100 times a second.

• This means, at every tick (44,100 times per second), the digital audio processor (sampling):– Determines the amplitude of the original very complex

audio wave. – It records it as a 16 bit value (quantifying)– This means there are 65,536 possible values for this

amplitude (coding): • 32,767 values above zero • 32,767 values below zero.

– It does this sampling for the two channels of stereo as well.



If we sample at too low a rate, we may miss some peaks and troughs in the original audio and so the resulting waveform may sound completely different and muddy1

2

34

56

-6

-5

-4-3

-2-1

0


1

2

-2

-1

0

Here we've got a fairly high sample rate, but the measurements of the amplitude are pretty coarse.


Digitizing Sound

• Quantifying – This is the process of giving a value to each of the samples taken.

• The larger the range of numbers, the more detailed or specific you can be in your quantifying.


Digitizing Sound

• Coding – This is the process taking the value quantified and representing it as a binary number.

• Audio CDs use 16 bits for coding.

• 16 bits gives a range from 0 to 65,536.

• Actually:– 15 bits are used for the range of numbers – 1 bit is used for + (positive) or – (negative)

• 32,768 positive values and 32,768 negative values

• How many bits does it take to record one minute of digital audio?


Digitizing Sound

• How many bits does it take to record one minute of digital audio?

• 1 minute = 60 seconds

• 44,100 samples per second

• This equals 2,646,000 samples.

• Each sample requires 16 bits.

• 2,646,000 samples times 16 bits per sample equals 42,336,000 bits.

• 42,336,000 bits times 2 for stereo equals 84,672,000 bits for 1 minute of audio.

• 84,672,000 bits divided by 8 bits per byte equals 10,584,000 bytes for 1 minute of audio. (More than 10 megabytes!)

• One hour of audio equals 635,040,000 bytes or 635 MB (megabytes)!


MP3 Compression

• Compressing digital audio means to reduce the number of bits needed to represent the information.

• There are many sounds, frequencies, that the human ear cannot hear, some too high, some too low.

• These waves can be removed without impacting the quality of the audio.

• MP3 uses this sort of compression for a typical compression ratio of 10:1, so a one minute of MP3 music takes 1 megabyte instead of 10 megabytes.


Advantage of Digitizing Information

• A key advantage to digital representation of information, images and sounds, is that the it can be reproduced exactly without losing a “bit” of the quality.

http://www.wired.com/threatlevel/2009/08/judge-copying-dvds-is-illegal/

Text, Images, Video and Sound

CS 1 Introduction to Computers and Computer Technology

Rick Graziani

text, images, video and sound cs 1 introduction to computers and computer technology rick graziani...

Documents