* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Representation of Images
Survey
Document related concepts
Stereoscopy wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Waveform graphics wikipedia , lookup
Framebuffer wikipedia , lookup
Stereo display wikipedia , lookup
Apple II graphics wikipedia , lookup
Image editing wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Color vision wikipedia , lookup
Color Graphics Adapter wikipedia , lookup
MOS Technology VIC-II wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Transcript
( THE CS 115: COMPUTING FOR SOCIO-TECHNO WEB REPRESENTATION OF TEXT, NUMBERS AND CODE TODAY Computer components Binary numbers Text representation Color representation OPENING THE BLACK BOX COMPUTER ARCHITECTURE A SIMPLE COMPUTER Fetch the next instruction from memory Decode it Execute it REPEAT ad infinitum BITS: 0 AND 1 The “blood” of the computer Only 2 bits: electric current passes or does not through a wire. Only 2 bits: we use symbols 0 and 1 Still enough to represent anything: • • • • Numbers Letters Instructions Images, videos, music, … Unbelievable? Amazing? UNDERSTANDING POWERS OF 2 Like with our decimal system, we can represent any number in binary using powers of 2: • 1010 = 1*8 + 0*4 + 1*2 + 0*1 (= 10) • 1010 = 1*23 + 0*22 + 1*21 + 0*20 (= 10) The first 10 powers of 2: x 2x 1 2 2 4 3 8 4 16 5 32 6 64 7 128 8 256 9 512 10 1024 ANYWAY, IF YOU HAVE TWO SYMBOLS… Position of digit signifies contribution of (the corresponding) base power Base 10 • 1492 = 1*1000 + 4*100 + 9*10 + 2*1 • 2009 = 2*1000 + 0*100 + 0*10 + 9*1 Base 2: • 1010 = 1*8 + 0*4 + 1*2 + 0*1 (= 10) • 0111 = 0*8 + 1*4 + 1*2 + 1*1 (= 7) Activity: creating binary numbers You can represent any number! HOW MANY BITS DO YOU NEED? Bit depth Can repr. Bit depth 21 22 23 24 25 26 27 28 29 2 210 4 8 Byte ~ 101 220 16 32 230 64 128 256 512 Can represent up to… 1024 Kilobyte ~ 103 1,048,576 Megabyte ~ 106 1,073,741,824 Gigabyte ~ 109 QUANTITIES OF BYTES HAPPY BIRTHDAY TO ? 1100 11101110010 / 1001 / REPRESENTING TEXT … you can represent any character A is repr’d by 65, or 01000001 Hi! is repr’d by 72 105 33, or 010010000110100100100001 ASCII CODE HOW MANY ASCII CHARACTERS? 8 BITS EACH, SO THERE ARE IN ALL = 2 256 8 14 February 2, 2009 … OF ANY LANGUAGE THAT EXISTS OR EVER EXISTED HOW MANY UNICODE CHARACTERS? 32 BITS EACH, SO THERE ARE IN ALL 16 32 = 2 4,294,967,296 STANDARD COLORS All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color: For other colors, it’s safest to use a numerical representation… RGB COLOR The human retina has three kinds of color-sensitive photoreceptors that were traditionally called red, green and blue cones Visible colors can be created by adding different amounts of the three primary colors, red, green and blue Color monitors display colors by adding different amounts of red, green and blue light RGB color components are usually defined on a scale from 0 to 255 Over 16 million colors can be represented this way! EXPLORE RGB COLOR 1) What shades are created when all three primary colors are equal? 2) Look at the following colors: red, yellow (=red+green), green, aqua (=green+blue), blue, fuchsia(=red+blue) How can you make a color brighter or darker? 3) Create the following colors: Steel Blue Deep Pink Khaki COLOR IN CSS Specifying turquoise using rgb in CSS: FROM BINARY TO HEXADECIMAL Hexadecimal Notation R decimal G B 0-255 0-255 0-255 hexadecimal 00-FF 00-FF 00-FF Numbers in the range 0-255 are represented in base 16, using two “digits” that each have 16 values, drawn from 0..9, A..F decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F Converting decimal to hexadecimal: Converting hexadecimal to decimal: (1) Left digit: divide by 16, convert quotient to 0..9,A..F (1) Convert left digit to 0..15, multiply by 16 (2) Right digit: convert remainder to 0..9,A..F Example: 20110 C916 (1) 201/16 = 1210 C16 (2) remainder is 910 916 (2) Convert right digit to 0..15, add to (1) Example: A716 16710 (1) A16 is 1010, 10*16 = 160 (2) 716 = 710 160+7 = 167 CONVERTING NUMBERS In pairs: try the following conversions (you can use a calculator): Decimal Hexadecimal 7 26 240 100 255 Hexadecimal Colors R G B decimal 0-255 0-255 0-255 hexadecimal 00-FF 00-FF 00-FF Using hexadecimal colors in CSS: blockquote { color: #9400D3; background-color: #E6E6FA; } HOW ARE IMAGES REPRESENTED IN A COMPUTER? B&W IMAGE REPRESENTATION An image is represented as a 2D array of pixels • Its dimensions: say, w pixels wide by h pixels high Each pixel is a small square on the screen Resolution: How many pixels a screen can represent Each pixel has a color associated with it If the color can be either black or white, then one needs only 1 bit per pixel • 1 = black; 0 = white Size of a B&W image: w * h * 1 bits = (w * h)/8 B • A 640 x 480 BW image takes 38,400 B = 37.5 KB (1KB = 1024 B) DIGITAL IMAGES Images are often represented in a computer as a 2-dimensional (2D) array of pixels. 38 pixels high 44 pixels wide BIT DEPTH Since each color value is a number between 0 and 255 and we use 8 bits to represent such a number, we use 8+8+8=24 bits to fully represent all RGB colors How many different colors do we represent? 224 = __________ 1 4 8 Are they enough? Size of a true-color image: w * h * 24 bits = (w * h*24)/8 B • A 640 x 480 color image takes 921,600 B = 900 KB! The number of bits used in an image is called the bit-depth For true-color, bit-depth is 24 But we can represent images using fewer colors (e.g., with smaller bit depth) 24 COMPRESSION FORMATS 24 bits (bit-depth) are enough to represent up to 16 million different colors A particular photograph, even though it may be very colorful, it may not need all 24 bits to be represented because it will likely not use all of them JPG is a compression format that allows the image to be stored using far fewer than 24 bits/pixel When we save an image “as jpg” we actually compress it. As a result, the quality of the image will degrade so that the compression image may lose some of its quality INDEXED COLOR INDEXED COLOR image 0 1 0 1 0 1 2 3 2 1 0 0 3 0 3 0 1 1 2 3 2 1 2 0 1 0 1 0 3 image contents index color color palette index color 00 #0000FF How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette? 01 #00FF00 (1) 300x500 pixels, with 2 bits per pixel (why?) 10 #FFFF00 300 x 500 x 2 = 300,000 bits 11 #00FFFF (2) 4 colors, with 24 bits per color 4 x 24 = 96 bits 2 bits per pixel 24 bits per color ~37.5kB (compared to the 450kB uncompressed file!) INDEXED COLOR How large is a file that stores a 300x500 pixel indexed color image with 16 colors, and its color palette? (1) What is the number of bits used to store the image pixels? (2) What is the number of bits used to store the color palette? Total file size (in bytes): bit-depth max colors 1 2 2 4 “bits per pixel” is also called the “bit depth” 3 8 4 16 bit depth must be large enough to store all of the colors 5 32 6 64 7 128 8 256 LIMITED PALETTE IMAGE REPRESENTATION If we use a computer application (e.g., fireworks) to create a drawing, we likely are going to use far fewer than 16 million colors GIF is a image format that uses only 256 colors (it determines the best 256 colors for the image) A gif image uses only 1byte/pixel, plus the table to remember which particular 256 colors it uses (its “palette”) GIF Indexed Color The GIF file format is an indexed color format that allows 256 colors (out of a possible 16 million colors!) Computing the file size for a GIF image, in bytes: (1) number of bytes to store the image pixels: (width * height * bit-depth) / 8 (2) number of bytes to store the color palette: num_colors * 3 (3) total number of bytes*: (width * height * bit-depth) / 8 + 3 * num_colors (4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes *There’s also a small amount of fixed overhead for storing file type, dimensions, etc.