Text, Images, Video and Sound CS 1 Introduction to Computers and Computer Technology Rick Graziani Spring 2015

Rick Graziani 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

Rick Graziani 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 = = = = … 127 =

Rick Graziani 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

Rick Graziani Bytes 1 byte (B) Kilobyte (KB) = 1,024 bytes (2 10 ) “one thousand bytes” 1,024 = 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 * 2 Megabyte (MB) = 1,048,576 bytes (2 20 ) “one million bytes” Gigabyte (GB) = 1,073,741,824 bytes (2 30 ) “one billion bytes”

Wikipedia Rick Graziani

7 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 = = = = … 255 =

Rick Graziani ASCII-8

Rick Graziani Try it! Write out Cabrillo College (Upper and Lower case) in bits (binary) using the chart above … C a 1

Rick Graziani The answer! C a b r i l l o space C o l l e g e 1

Rick Graziani 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. Unicode

Non-text Files: Representing Images and Sound

Rick Graziani

Rick Graziani

Rick Graziani 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.

Rick Graziani

Rick Graziani 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)

Rick Graziani 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.

Rick Graziani RGB Colors and Binary Representation Let’s convert these colors from Decimal to Binary! Red Green Blue Purple: Gold:

Rick Graziani RGB Colors and Binary Representation Red Green Blue Purple: Gold: Number of: ’s 64’s 32’s 16’s 8’s 4’s 2’s 1’s Dec

Rick Graziani RGB Colors and Binary Representation Red Green Blue Purple: Gold: Number of: ’s 64’s 32’s 16’s 8’s 4’s 2’s 1’s Dec

Rick Graziani RGB Colors and Binary Representation We have now converted these colors from Decimal to Binary! Red Green Blue Purple: Gold: Why does this matter?

Rick Graziani 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 pixels 1200 pixels 1200 pixels/300 ppi = 4 inches 1600 pixels /300 ppi = 5.3 inches

Rick Graziani 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.

Rick Graziani RGB Colors and Binary Representation Red Green Blue Purple: 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.

Rick Graziani RGB Colors and Binary Representation Red Green Blue Purple: = 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

Rick Graziani 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.

Rick Graziani 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.

Rick Graziani 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.

Rick Graziani 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.

Rick Graziani 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.

Hexadecimal Number System

Rick Graziani

Rick Graziani

Rick Graziani 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.

Rick Graziani

Rick Graziani Dreamweaver

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

Rick Graziani Hexadecimal RED GREEN BLUE RedGreenBlue cccc99 RedGreenBlue # means hexadecimal in web applications

Rick Graziani Hexadecimal Numbers What are they? Why do these people use them? –web designers –digital medial creators –computer scientists –networking professionals

Rick Graziani 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, –Base 2: –Base 16: 65,536 4,

Rick Graziani Hexadecimal Digits Hexadecimal: 16 digits Dec Hex Dec Hex A 11 B 12 C 13 D 14 E 15 F

Rick Graziani 0, 1, 2, 3, 4, 5, 6, 7,8, 9, A, B, C, D, E, F Hexadecimal Decimal 16’s 1’s A 14 E 15 F

Rick Graziani 0, 1, 2, 3, 4, 5, 6, 7,8, 9, A, B, C, D, E, F Hexadecimal Decimal 16’s 1’s A 12 C 29 1 D

Rick Graziani 0, 1, 2, 3, 4, 5, 6, 7,8, 9, A, B, C, D, E, F Hexadecimal Decimal 16’s 1’s 30 1 E 31 1 F C

Rick Graziani 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? Decimal 16’s 1’s

Rick Graziani Don’t forget why we are doing this! Hexadecimal Number

Rick Graziani 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

Rick Graziani Hexadecimal Digits 4 bits can be represented by 1 Hex value Hexadecimal: 16 digits Dec Hex Binary Dec Hex Binary A B C D E F 1111

Rick Graziani 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 A B C D E F 1111

Rick Graziani Converting Decimal, Hex, and Binary Dec. Hex. Binary A B C D E F Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary F A C

Rick Graziani Converting Decimal, Hex, and Binary Dec. Hex. Binary A B C D E F Dec. Hex Binary Dec. Hex Binary Dec. Hex Binary A F E C A C

Rick Graziani What about 8 bits? Dec. Hex. Binary A B C D E F HEX BINARY 2 4 ?

Rick Graziani What about 8 bits? Dec. Hex. Binary A B C D E F HEX BINARY

Rick Graziani Using Hex for 8 bits Dec. Hex. Binary A B C D E F Hex Binary Hex Binary Hex Binary C 99 AB 1A B4 7D

Rick Graziani Using Hex for 8 bits Dec. Hex. Binary A B C D E F Hex Binary Hex Binary Hex Binary C AB A B D F FF C C

Rick Graziani So why is Rick torturing us? Hexadecimal Number

Rick Graziani How much RED GREEN BLUE ? RedGreenBlue cccc99 RedGreenBlue

Rick Graziani Hexadecimal # RED GREEN BLUE RedGreenBlue cccc99 Convert to Binary Red GreenBlue Hex cc cc99 Bin bits represent a single color

Rick Graziani Red GreenBlue Hex cc cc99 Bin bits represent a single color

Rick Graziani Red GreenBlue Hex 00->FF 00->FF 00->FF Bin thru thru thru Dec 0 -> > > ?? ?

Rick Graziani ? How Much? 0 to ? 0 ?

Rick Graziani Red GreenBlue Hex cc cc99 Bin Hexadecimal Decimal 16’s 1’s c c or (12x16) (12x1) 204 =

Rick Graziani Red GreenBlue Hex cc cc99 Bin Dec

Rick Graziani

Rick Graziani

Rick Graziani Red Green Blue Dec Hex FF Bin FF 00 FF 00 FF Hexadecimal Decimal 16’s 1’s

Rick Graziani Red Green Blue Dec Hex c8 30 7F Bin FF 00 FF 00 FF Hexadecimal Decimal 16’s 1’s

Rick Graziani Red Green Blue Dec Hex 4A Bin FF 00 FF 00 FF Hexadecimal Decimal 16’s 1’s

Rick Graziani Red Green Blue Dec Hex FF FF FF Bin FF 00 FF 00 FF Hexadecimal Decimal 16’s 1’s

Rick Graziani Red Green Blue Dec Hex C Bin FF 00 FF 00 FF Hexadecimal Decimal 16’s 1’s

Rick Graziani 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.

Rick Graziani Color Codes

Digitizing Sound

Theme from Shaft Rick Graziani

Rick Graziani 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.

Rick Graziani Digitizing Sound

Rick Graziani 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.

Rick Graziani 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.

Rick Graziani Digitizing Sound Converting Analog to Digital requires three steps: 1. Sampling 2. Quantifying 3. Coding

Rick Graziani 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.

Rick Graziani 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. Rick Graziani

Rick Graziani

Rick Graziani 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 muddy

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

Rick Graziani 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.

Rick Graziani 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?

Rick Graziani 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)!

Rick Graziani 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.

Rick Graziani 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.

Text, Images, Video and Sound CS 1 Introduction to Computers and Computer Technology Rick Graziani