Elementary Computing CSC 100. M. Cheng, Computer Science

Transcription

1 Elementary Computing CSC 100 1

2 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

3 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

4 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

5 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

6 Computer Fonts 6

7 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

8 Bit- mapped Fonts 8

9 Early Macintosh Bit- mapped Fonts 9

10 GUI of Apple Macintosh 10

11 Outline Fonts 11

12 Which is Outline Font? 12

13 Postscript & Bitmap Fonts 13

14 Adobe invented Postscript, a technology used by laser printers and GUI for printing or displaying outline fonts. 14

15 Thanks to scalable outline fonts, texts on our displays and printers are looking much better. 15

16 Google Webfonts 16

17 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

18 Binary Numbers & Storage 18

19 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

20 Counting in Binary (6 bits)

21

22

23

24

25

26

27

28

29 What is 9? 0 0 1??? 29

30 What is 12? 0 0 1??? 30

31 How about 15? 0 0 1??? 31

32 Binary Numbers from 0 to

33 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

34 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

35 Storage Examples 650 to 700 MB 5 to 10 GB 4 to 64 GB 25 to 50 GB 35

36 What is plain text? 36

37 The character set used by our computers are also encoded in binary. 37

38 ASCII (American Standard Code for Information Interchange) uses 7- bits to encode all standard keyboard characters. 38

39 39

40 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

41 Plain text means the character encoding is either ASCII or UTF

42 HTML files are all plain text files using UTF- 8 encoding. 42

43 A plain text file cannot specify font family, size, or bold etc. 43

44 Pixels, Colors & Resolution 44

45 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

46 A Pixel in an Image A pixel 46

47 Color- Depth of Grayscale 4- bpp 8- bpp 1- bpp 2 Levels 16 Levels 256 Levels 47

48 Grayscale & Black/White 4- bpp 1- bpp 48

49 Color- depth (bits- per- pixel) affects the overall texture/details of an image. 49

50 An 8- bpp Grayscale Image 50

51 Primary Colors WHITE 51

52 24- bpp RGB Colors Each color takes 8- bpp. 52

53 A 24- bpp Color Image 53

54 Changes in Color- Depth 24- bpp 8- bpp 4- bpp 54

55 Hexadecimal Representation A B C D E F Note: Each hexadecimal digit represents 4 bits in binary. 55

56 HTML Color Codes #0A1CF3 means 0A for Red, 1C for Green, F3 for Blue, or the HTML color: 56

57 Pixel in a Color Display One pixel 57

58 Pixel in a TV & Monitor One pixel One pixel 58

59 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

60 A Full HD TV Resolution 60

61 A Ultra HD (4K) TV Resolution 61

62 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

63 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

64 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

65 Ppi Illustration 65

66 Low vs High Pixel Density M. Cheng, Computer Science 66

67 The higher the ppi of a display, the sharper the image/text. 67

68 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 69

70 Remove the GPS geo- tagging information before you publish an image to a public website! 70

71 Sound & Digital Audio 71

72 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

73 Sound & Air Pressure Amplitude Frequency (cycles per second) 73

74 Amplitude & Pitch (Frequency) 74

75 Sampling Each dot (or sample) is represented by a binary number. 75

76 Digital Audio Samples 76

77 A/D versus D/A Conversion Computer Digital Audio A/D (Analog to Digital) D/A (Digital to Analog) 77

78 Audacity Demo 78

79 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

80 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

81 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 = MB. 81

82 Film & Digital Video 82

83 Motion Pictures 83

84 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

85 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

86 Digital Video Editing 86

87 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 = MB For 10 minutes, its size is: 10 x 60 x 117,964,800 bits = GB For 2 hours, its size increases to GB! 87

88 Data Compression 88

89 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

90 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

91 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

92 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

93 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

94 Common Image Formats BMP : uncompressed GIF, PNG, RAW : lossless compressed JPEG : lossy compressed 94

95 Common Audio Formats WAV, AIFF : uncompressed Apple Lossless, FLAC: lossless compressed MP3, AAC, M4A, WMA : lossy compressed 95

96 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

97 Vector Graphics 97

98 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

99 MacPaint MacDraw 99

100 Human Body Parts 100

101 Protein 101

102 Car 102

103 Map 103

104 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

105 Train Wire Frame Demo 105

106 3D Medical Animation Demo 106

107 Human Head Modelling 107

108 3D City Model in Google Earth 108

109 The End. 109