Elementary Computing CSC 100 1
Graphics & Media Scalable Outline & Bit- mapped Fonts Binary Number Representation & Text Pixels, Colors and Resolution Sound & Digital Audio Film & Digital Video Data Compression Vector Graphics 2
Outcomes Today s applications are graphics and media rich. Computer fonts give texts their visual appeal. Computer media includes audio, image and video data. Fundamentally, all data are represented in binary. Data compression reduces the storage requirement of all computer media. 3
Study Guide What are bit- mapped and outline fonts? What is Postscript? What are the common media formats? How are binary numbers represented? What is ASCII & UTF- 8? What are the storage sizes? What is a pixel? What is color- depth? 4
Study Guide How is color represented in a color image? What is resolution of an image or a display? What is pixel density? How audio (or sound) is encoded in digital? How video is encoded in digital? What is lossless or lossy data compression? What is vector graphics? 5
Computer Fonts 6
Bit- mapped vs Outline Fonts Graphical User Interface (GUI) requires different fonts (or typefaces) to create stylistic text (e.g., Times- Roman, Helvetica, Courier). Early fonts are all fix- sized bit- maps; they are not easily scalable. Outline fonts are scalable; they are display resolution independent. 7
Bit- mapped Fonts 8
Early Macintosh Bit- mapped Fonts 9
GUI of Apple Macintosh 10
Outline Fonts 11
Which is Outline Font? 12
Postscript & Bitmap Fonts 13
Adobe invented Postscript, a technology used by laser printers and GUI for printing or displaying outline fonts. 14
Thanks to scalable outline fonts, texts on our displays and printers are looking much better. 15
Google Webfonts 16
Fonts & Media Formats Fonts are a technology for text representation. Computer media also include audio, image and video data. WAV, MP3 and AAC are audio formats; GIF, PNG and JPEG are image formats; WMV, MP4 and AVCHD are video formats. 17
Binary Numbers & Storage 18
Binary Number Representation Inside a computer, all data are represented in binary, including numbers. A binary digit (or a bit) consists of two values: 0 and 1. Any number can be represented in binary. Here is how! 19
Counting in Binary (6 bits) 32 16 8 4 2 1 20
1 0 0 0 0 0 1 21
2 0 0 0 0 1 0 22
3 0 0 0 0 1 1 23
4 0 0 0 1 0 0 24
5 0 0 0 1 0 1 25
6 0 0 0 1 1 0 26
7 0 0 0 1 1 1 27
8 0 0 1 0 0 0 28
What is 9? 0 0 1??? 29
What is 12? 0 0 1??? 30
How about 15? 0 0 1??? 31
Binary Numbers from 0 to 31 0 000000 8 001000 16 010000 24 011000 1 000001 9 001001 17 010001 25 011001 2 000010 10 001010 18 010010 26 011010 3 000011 11 001011 19 010011 27 011011 4 000100 12 001100 20 010100 28 011100 5 000101 13 001101 21 010101 29 011101 6 000110 14 001110 22 010110 30 011110 7 000111 15 001111 23 010111 31 011111 32
Property of a Byte A byte consists of 8 binary digits, or 8 bits. With a byte, we can represent 2 8 = 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 = 256 numbers. With 2 bytes (16 bits), we can represent 256 x 256 = 65,536 numbers; with 4 bytes (32 bits), 65,536 x 65,536 = 4,294,967,296 numbers. 33
Storage Sizes 1KB (Kilo- Byte) = 1,024 Bytes (Note: Kb means Kilo- bits.) 1MB (Mega- Byte) = 1,024 x 1KB 1GB (Giga- Byte) = 1,024 x 1MB 1TB (Tera- Byte) = 1,024 x 1GB 34
Storage Examples 650 to 700 MB 5 to 10 GB 4 to 64 GB 25 to 50 GB 35
What is plain text? 36
The character set used by our computers are also encoded in binary. 37
ASCII (American Standard Code for Information Interchange) uses 7- bits to encode all standard keyboard characters. 38
39
UTF- 8 (also known as Unicode) is an extension of ASCII using multi- bytes to encode all international character sets, including ASCII, Chinese, etc. 40
Plain text means the character encoding is either ASCII or UTF- 8. 41
HTML files are all plain text files using UTF- 8 encoding. 42
A plain text file cannot specify font family, size, or bold etc. 43
Pixels, Colors & Resolution 44
Pixel & Color- Depth A pixel is a picture element. It is the smallest unit of information about a picture. An image/display consists of a fixed number of pixels. The number of bits- per- pixel (bpp) is called color- depth. 45
A Pixel in an Image 768 1024 A pixel 46
Color- Depth of Grayscale 4- bpp 8- bpp 1- bpp 2 Levels 16 Levels 256 Levels 47
Grayscale & Black/White 4- bpp 1- bpp 48
Color- depth (bits- per- pixel) affects the overall texture/details of an image. 49
An 8- bpp Grayscale Image 50
Primary Colors WHITE 51
24- bpp RGB Colors Each color takes 8- bpp. 52
A 24- bpp Color Image 53
Changes in Color- Depth 24- bpp 8- bpp 4- bpp 54
Hexadecimal Representation 0 0000 0 8 1000 8 1 0001 1 9 1001 9 2 0010 2 10 1010 A 3 0011 3 11 1011 B 4 0100 4 12 1100 C 5 0101 5 13 1101 D 6 0110 6 14 1110 E 7 0111 7 15 1111 F Note: Each hexadecimal digit represents 4 bits in binary. 55
HTML Color Codes #0A1CF3 means 0A for Red, 1C for Green, F3 for Blue, or the HTML color: 56
Pixel in a Color Display One pixel 57
Pixel in a TV & Monitor One pixel One pixel 58
Resolution The resolution of an image / display is the total number of pixels represented. Typically, it is horizontal (width) x vertical (height) number of pixels. For example, 1024 x 768 = 786,432; 3000 x 2000 = 6M; 4000 x 3000 = 12M. 59
A Full HD TV Resolution 60
A Ultra HD (4K) TV Resolution 61
Digital Images & Color Displays Today, a digital camera can capture an image of 16M (4000x4000) pixels of 24- bpp RGB (16M) colors. A high- definition TV can support 2M (1920x1080) pixels of 10- bpp (thousands) RGB colors. An imac 27 display supports 3.7M (2560x1440) pixels of millions of colors. 62
How Big is an Image? For 4M pixels (2000 x 2000), the size of a 24bpp color image is: 2000 x 2000 x 24 bpp = 96M bits, or 96M bit 8 = 12 MB For 4M pixels, the size of a 8bpp grayscale image is: 2000 x 2000 x 8bpp = 32M bits, or 4MB 63
Pixel Density Why text on your TV looks much worst than on your computer display, even though they have same resolution 1920 x 1080? Your TV may be 50 across diagonally. But, your display is only 15. Pixel density (pixel- per- inch or ppi) defines the physical size of each pixel. A TV has 100 ppi; but a display has 200 ppi; an iphone 5 has 326 ppi. 64
Ppi Illustration 65
Low vs High Pixel Density M. Cheng, Computer Science 66
The higher the ppi of a display, the sharper the image/text. 67
Meta- data in Images Meta- data inside an image file is the data about the image itself. Typically, it includes the size, colors, bit- depth, type of camera, camera setting, and most importantly geo- tagging (based on GPS). When an image is posted on the Internet, its meta- data may be included as well! 68
69
Remove the GPS geo- tagging information before you publish an image to a public website! 70
Sound & Digital Audio 71
Music & Digital Audio We hear sound as a result of a continuous change of air pressure in our ear drum. (Amplitude) The larger the change in air pressure, the louder the sound. (Frequency) The faster the change in air pressure, the higher pitch the sound. 72
Sound & Air Pressure Amplitude Frequency (cycles per second) 73
Amplitude & Pitch (Frequency) 74
Sampling Each dot (or sample) is represented by a binary number. 75
Digital Audio Samples 76
A/D versus D/A Conversion Computer Digital Audio A/D (Analog to Digital) D/A (Digital to Analog) 77
Audacity Demo 78
Digital Audio The amplitude of each sample is encoded as a binary number. Each sample typically is encoded as a 8- bit, 16- bit, or 24- bit number. The rate of sampling (samples per second, Hz) typically uses 44,100 Hz, 48,000 Hz, 96,000 Hz, etc. 79
Compact Disc (CD) It was invented by Sony and Philips in the 70s. It uses a polycarbonate disc (12 cm diameter) to store approximately 70 minutes of digital audio for 2 (left and right) channels. It uses 44,100 Hz sampling rate with 16- bit per sample. 80
How Big is a CD? A CD stores approximately 70 minutes of 2 channels, 16- bit, 44,100 Hz digital audio. The size per second is 2 x 16 x 44,100 bits = 1,411,200 bits = 176,400 bytes. For 70 minutes, we need 70 x 60 x 176,400 bytes = 740,880,000 bytes = 706.6 MB. 81
Film & Digital Video 82
Motion Pictures 83
Film & Frame Rate It is a series of still images, called frames. By capturing and playing images at a fixed number of frames per second, we have a motion picture. Our eyes cannot perceive changes faster than 24 times a second. Typically films are recorded at least 24 frames per second. 84
Digital Video A digital video is the digital equivalent of film. A video is a series of color images of some fixed resolution (e.g., 640 x 480 at 16 bpp, 1920 x 1080 at 24 bpp). The frame rate varies from 24 to 30 frames/sec for high quality video, or 10 to 15 frames/sec for streaming video. 85
Digital Video Editing 86
How Big is a Digital Video? For a 720 x 480 at 16 bpp color video recorded at 30 frames/sec, its size per sec is: 30 x 16 bits x 720 x 480 = 20.736 MB For 10 minutes, its size is: 10 x 60 x 117,964,800 bits = 12.15 GB For 2 hours, its size increases to 145.8 GB! 87
Data Compression 88
What is Data Compression? It is a technology to squeeze data to take up less space. There are broadly two ways: (1) lossless preserve all data integrity; (2) lossy keep as much details as possible. It depends on the nature of our data. We may choose (1) or (2). 89
Lossless Data Compression For some data, we don t want to lose even one bit of information. A common format for lossless data compression is ZIP, supported by Windows and OS X by default. Apple Lossless is a lossless compressed audio format; PNG and TIFF are a lossless compressed image format. 90
Lossy Data Compression For media data, such as music, images, videos, we can afford to lose some details as long as we still can listen/watch them. Common lossy compression formats include: (1) audio : MP3, OGG, AAC, M4A; (2) image : JPEG; (3) video : MPEG1, MPEG2, MPEG4, MP4, AVCHD. 91
Compression Ratio Using lossless compression, we can reduce data size by 50%. Using lossy compression, we can reduce the data size by up to 90%, e.g., 100 GB of 2 hours of a DVD movie can be compressed down to 10GB or less. 92
Examples itunes can import music from a CD (original WAV) into either (lossy) MP3 or AAC. A digital camera can store your pictures in either RAW (lossless) or JPEG (lossy) formats. A commercial DVD uses MPEG2; a Bluray disc uses MPEG4 or AVCHD (known as H.264). 93
Common Image Formats BMP : uncompressed GIF, PNG, RAW : lossless compressed JPEG : lossy compressed 94
Common Audio Formats WAV, AIFF : uncompressed Apple Lossless, FLAC: lossless compressed MP3, AAC, M4A, WMA : lossy compressed 95
Common Video Formats There is no common uncompressed video standard for consumers. Motion JPEG (MJPEG) : lossless compressed MPEG1, MPEG2, MPEG4, FLV, QuickTime, WMV, AVCHD: lossy compressed 96
Vector Graphics 97
Bitmap & Vector Graphics We have bitmapped (fixed size) fonts and outline (scalable) fonts. Computer images can also be fixed- size bitmaps or scalable vectors. MacPaint is a bitmap painting program; while MacDraw is a vector graphic design program. 98
MacPaint MacDraw 99
Human Body Parts 100
Protein 101
Car 102
Map 103
Properties of Vector Graphics A vector graphic model is scalable, thus zoomable. Today, many computer models are using 3D vector graphics. Hence, you can rotate the model and view from different angles. They are synthesized by the computer internally, not pictures of the real world. 104
Train Wire Frame Demo 105
3D Medical Animation Demo 106
Human Head Modelling 107
3D City Model in Google Earth 108
The End. 109