1. Data Representation Robin Burke IT 130

2. Outline Data Representation Binary Numbers Image types

3. Apology Errors The math in this chapter is full of errors

4. Number Systems A number system for n Digits from 0 to n-1 k th position = factor of n k Decimal (n=10) digits 0-9 154 1 in position 2 = 1 * 10 2 5 in position 1 = 5 * 10 4 in position 0 = 4 * 10 0 = 4 * 1 Hexadecimal (n=16) digits 0-9ABCDEF 3EA 3 in position 2 = 3 * 16 2 E in position 1 = 14 * 16 A in position 0 = 10 * 1 in decimal 1002

5. Babylonian (base 60)

6. Binary Numbers Binary (n = 2) digits 0 and 1 binary digit (bit) 1101 1 in position 3 = 1 * 2 3 1 in position 2 = 1 * 2 2 1 in position 0 = 1 * 1 in decimal 13

7. Why binary? Switches the computer is a bunch of intricately-connected switches transistors a switch is either off or on Early computers were actually programmed with switches early personal computers, too

8. An Early Home Computer

9. Memory Usually described in terms of kilobytes (KB) or megabytes (MB) 1 byte = 8 bits 1 KB = 2 10 or 1024 bytes 1 MB = 2 20 or 1,048,576 bytes 256 MB of RAM 268,435,456 bytes or 2,147,483,648 bits more than 2 billion transistors actually transistor / capacitor pair

10. 16 million transistors in this L2 cache

11. Data Representation Everything in the computer is binary the program the operating system HTML files the values manipulated by JavaScript Part of what the computer does is translate from our representations to its representation = binary and back

12. Obvious Example Images More about images later

13. Integers Modern computers allocate 4 bytes (32 bits) to an integer 2 32 = 4.3 billion bit patterns but we need some for positive numbers and some for negative Basic idea give up one bit (highest-order) as a "sign" bit the problem 0000 0000 0000 0000 0000 0000 0000 0000 1000 0000 0000 0000 0000 0000 0000 0000

14. Two's complement Represent negative numbers in opposite order 1000 0000 0000 0000 0000 0000 0000 0000 -2 31 (not 2 -31, typo in book) 1111 1111 1111 1111 1111 1111 1111 1111

15. Integer representation 32 bits first bit = sign bit if sign bit = 0 interpret as binary number if sign bit = 1 flip all the other bits interpret as negative number What is (2 31 -1) + 1?

16. Floating point Think of scientific notation 1234.56 convert so that the decimal point has one digit in front of it 1.23456 x 10 3 since we know where the decimal point is three things to track  + or –  exponent of 10  value

17. Floating Point 32 bits sign bit 8 bits exponent 23 bits fractional part 1234.56 sign bit = 0 exponent = 3 = 0000 0011 fraction = 123456 = 000 0001 1110 0010 0100 0000 0000 0001 1000 0001 1110 0010 0100 0000 Double-precision 64 bits 11 for exponent 52 for fraction more accuracy

18. Characters Historically 1 byte (8 bits) = 1 character 8 bits = 256 possible bit patterns Character set mapping between bit patterns and characters A = 01000001 (65), a = 01100001 (97) does not work for languages with larger character sets Unicode a character = 16 bits 65,536 characters

19. Characters ASCII the most common mapping used today A-Z = 65-91, a-z = 97-113

20. Strings Strings are lists (really arrays) of characters "foo" think of a list with 3 elements, each a character Not 100% accurate see on Wednesday

21. Data Representation Is determined by context what kind of variable is declared where the value came from Example

22. Images Complex topic actually Basic idea divide the picture into an evenly-spaced grid picture elements = pixels build a representation of the grid data turn into a file To display reverse the process to create picture

23. Monochrome (B/W) Each pixel 0 (on) or 1 (off)

24. Eight bit color 256 color palette associated with display 8 bit value indexes into palette

25. 24-bit color 8 bits per color (RGB)

26. But Consider a simple image 288 x 200 pixels = 57600 pixels 57600 x 3 bytes (24 bits) / pixel = 172, 800 bytes At 3 K / sec 57 = 1 min All useful image formats use compression

27. Image formats Most common GIF JPEG PNG How they differ use of color type of compression availability

28. GIF Format Graphics Interchange Format.gif oldest uses repetitive pattern encoding Pluses compression is accurate, no loss of quality Minuses less compression possible image can only have 256 colors shading looks ugly Applicability good for line drawings animation is supported

29. JPEG Format Joint Photographic Experts Group.jpg average color values across pixels Pluses Level of compression is adjustable Supports 24-bit color Minuses Compression loses information

30. PNG Format Portable Net Graphics.png developed in web era Pluses has aspects of both GIF and JPG Minuses older browsers don't support it

31. Bottom line GIF line art unless there is continuous tone content JPG images compression advantages of JPG not apparent below 200x200 or so can often get away with high compression PNG consider using if your audience has the latest software

32. Rules of Thumb Speed Dial-up about 5 K / sec DSL / Cable about 50 - 100 K / sec Don't make user wait more than 2-3 sec for homepage Images deeper in site can be bigger Note images are cached by browser won't be downloaded every time they appear navigation bars, buttons, etc.

33. Wednesday Strings Ch. 15