1. Digital Media Dr. Jim Rowan ITEC 2110

2. Up Next! In the next several lectures we will be covering these topics: –Vector graphics –Bitmapped graphics –Color It will be presented in this order –Bitmapped graphics –Vector graphics part 1 –Color parts 1 & 2 –Vector graphics part 2: 3D

3. Computer Graphics... A very different viewing media than print –Usually consumed on a fairly low resolution monitor –Forcing us to look carefully at the processes that move stuff from the real world to the computer... AND BACK! Graphic images work very differently on a screen than when in print –can be seen with lights out –will be viewed from different resolution monitors –viewing angles are different –reflections off screen

4. Computer Graphics Computer graphics on the Internet –fostered the shift away from print based media –has begun to develop its own visual vocabulary Inside the computer there’s a numeric model of a real- world phenomenon Two ways to model computer graphics (2D images) –bitmapped images –vector graphics

5. But First, More on “Telling the story” The way you represent data affects how it is interpreted… In words In graphs In images

6. Heard as an ad for a legal firm: Has your disability claim been denied? We win 75% of all contested disability claims! How is that possible?

7. Car Insurance Ads Several different insurance ads make some claim: People who switch to us save $400 a year How is that possible?

8. You need heart bypass surgery You have a number of hospitals to choose from You make your decision based on statistics Do you choose the hospital with the highest or lowest death rate? Which hospital would you choose?

9. The way you display data affects how it is understood This is a field of study all by itself that includes computer graphics, cognitive science and psychology The way data is displayed affects how people interpret the data –how color is used –how numeric scales are used Different types of graphs emphasize different aspects of the numbers –pie charts –bar charts –line graphs

12. Want more?

13. Designing information display How to lie with statistics Edward Tufte, Yale University –Visual Display of Quantitative Information –Envisioning Information –Visual Explanations

14. Computer Display types Now... all are rectangular arrays of pixels It’s not always been that way –Early graphics (1976) used a “steerable” electron gun, not raster graphics –Since then... we have moved away from electron gun…

15. Internal and External graphics models Internally an application keeps a numeric model –Inside a computer it’s all numbers To display the internal model so we can see it, an application must project this internal model onto a display –The internal model, the numbers, are in the computer –This process of projecting this model onto a display is called “rendering”

16. Two approaches to internal graphic modeling Why two approaches? –drastic file size differences –each is good for its type of image –each has its own unique advantages Bitmapped graphics –grandfathered name... more like pixel mapped graphics Vector graphics –think of is as object graphics because you describe objects using vectors (formulas)

17. With bitmapped graphics... There are logical and physical pixels –images are modeled internally as an array of pixel values... the logical pixels –physical pixels are the actual dots on screen Moving from logical and physical pixels –called rendering –may be different size, shape and different resolution –will probably require clipping and scaling to move from logical to physical pixels –So let’s look at how this happens… starting with a bitmapped image

18. 00011000000011110000010110100000111100000001100000 A true bitmapped image is black and white Each logical pixel is represented by a single bit

19. When color came along it borrowed the idea... except that each logical pixel became a 3 byte RGB color specification instead of a single bit

20. 24 Bit RGB RGB –red –green –blue 24 bits –8 bits for red, 8 bits for green & 8 bits for blue 3 bytes –1 byte for red, 1 for green & 1 for blue you get 2**8 = 256 different shades of red, 256 different shades of green and 256 different shades of blue

21. 255 0 255 0 255 0 255 0 255 0 255 0 255 0 255 0 255 0 255 255 0 0 255 0 255 0 255 0 255 0 255 0 255 0 255 1111 1111. 1111 1111. 1111 1111 0000 0000. 0000 0000. 1111 1111 1111 1111. 1111 1111. 1111 1111 0000 0000. 0000 0000. 1111 1111 1111 1111. 1111 1111. 1111 1111 0000 0000. 0000 0000. 1111 1111 1111 1111. 0000 0000. 0000 0000 0000 0000. 0000 0000. 1111 1111 1111 1111. 0000 0000. 0000 0000 0000 0000. 0000 0000. 1111 1111... for 1080 more bits... 1111 1111. 1111 1111. 1111

22. 00 01 00 01 00 011001 100100 01 00 01 00 255 0 255 0 72 bits in the color table 100 bits in the pixel map 172 bits total Question: With 2 bits encoding the color, if we expanded the color table, how many colors could be represented?

23. Vector graphics Internal model is very different than bitmapped graphics Images are described as mathematical equations Rendering is very different –must translate EQUATIONS to physical pixels –Simple to clip or scale –must compute the array of physical pixels from the equations

24. Here are two images, blue squares Both are displayed at 72 pixels per inch Both are displayed as 1024 X 1024 pixels in size Each with 3 byte (24 bit, millions of colors) color encoding Which would have the larger (in terms of file size) internal model? Why? bitmapped graphic vector graphic

25. Here are two more complex images Both are displayed at 72 pixels per inch Both are displayed as 1024 x 720 pixels in size Each with 3 byte (24 bit, millions of colors) color encoding Which would have the larger (in terms of file size) internal model? Why? bitmapped graphic vector graphic

26. Bitmapped/Vector Graphics Bitmapped image file size is… –affected by dimensions, resolution and color resolution –not affected by contents Vector graphics file size is… –affected by the contents of the image the more complex, the larger the file gets –size of the file is not affected by resolution

27. Bitmapped/Vector Graphics Access to objects found in the image –vector is easy, objects are described by mathematical equations –bitmapped, no objects, just pixels… this is very difficult Special effect differences (like blur, which requires access to surrounding pixels) –Bitmapped? Easy; the pixels are stored in the model –Vector? Not so much… First convert to bitmapped, then blur

28. Bitmapped/Vector Graphics Scaling and Resize –Vector? Simple... –Bitmapped? Complicated... frequently results in artifacts Why is bitmapped scaling and resizing complicated? ==>

29. Original image: 10 x 5 Now make it twice as big

30. Original image: 10 x 5 Now make it twice as big

31. Original image: 10 x 5 Now make it twice as big What happens if there are two colors next to one another? Strictly duplicate?  jagged edges Interpolate them?

32. Original image: 10 x 5 Now make it twice as big What happens if there are two colors next to one another? Strictly duplicate?  jagged edges Interpolate them?

33. Original image: 10 x 5 To make it 50% larger...

34. Original image: 10 x 5 To make it 50% larger... What do you do? Do you make it 15 x 7? or 15 x 8? 1 pixel => 1? 2? There is no such thing as 1.5 pixels...

35. With Bitmapped Graphics The point here is that scaling is a problem for bitmapped graphics

36. Bitmapped Vector GIMP Inkscape Vector must be converted to bitmapped to be displayed... –this process is called RENDERING Bitmapped to vector is complicated –While vector is based on shapes, bitmapped does not define any shapes –Something must identify edges and find the shapes.

37. Image layers Both bitmapped and vector graphics use layers as an organizational device Layers are used in two ways with bitmapped graphics –layers are used like digital tracing paper to isolate objects in the image –colors can be separated and manipulated individually

38. Image Manipulation Tools Selection tools –for regular shapes rectangular and elliptical marquee tools why is it called marquee? –for irregular shapes lasso (polygon, magnetic, magic wand...) –“magnetic" snaps to an enclosed object using edge-detection routines

39. Selection tools... Allow the application of filters to only the selected parts of the image –unaffected area is called a mask... can be thought of as a stencil –opening in the mask allows background to show through

40. Masks (like stencils) A 1-bit mask –0 or 1 –can be either transparent or opaque An 8-bit mask –allows 256 levels of transparency... AKA alpha channel

41. Masks... can have a gradient to produce a softer transition... a feathered edge Can use anti-aliasing along the edge which more effectively hides the hard edge visually Layers can have masks associated with them Allows interesting compositing of image parts

45. We’ll talk more about size issues later when we discuss bitmapped graphics in more detail We will also consider compression techniques other than the table method

46. Questions?