2. T.J.I SKANDAR A BD A ZIZ A DAPTED FROM N OTES P REPARED BY : N OOR F ARDELA Z AINAL A BIDIN R EVISED ON S EPT 2012 1 CHAPTER SEVEN MULTIMEDIA BUILDING BLOCKS III IMAGE CGMB113/ CITB 123: MULTIMEDIA TECHNOLOGY

3. 2 222222 Objectives At the end of this chapter, students should be able to: identify various factors that apply to the use of images in multimedia describe the capabilities of bitmap and vector images define various aspects of 3D modeling describe the use of colors and palettes in multimedia

4. B EFORE YOU CREATE IMAGE …  Plan your approach Brainstorm ideas and concepts for the graphic look Put the ideas on paper : make flowchart and simulate the pages.  Organize your tools Make sure all tools needed are available  Have multiple monitors, if possible, for lots of screen real estate. 11/19/2015

5. 2-D D RAWING  Still images are drawn in one of two ways:  Bitmapped images  Vector-drawn images  Images are usually compressed to save space  Formats like GIF, JPEG and PNG incorporate compression 4

6. B ITMAPPED I MAGE  A simple matrix or grid of dots with color information. i.e. an array of color dots that when looked at from distance forms an image.  The smallest element of a bitmap is a pixel 5 A pixel Pixel Zoom-in

7. B ITMAPPED I MAGE  Computer combines red, blue and green (RGB) colors  Each pixel is associated with bit depth.  Bit depth determines the number of possible color. 6 1-bit 2 colors 4-bit 16 colors 8-bit 256 colors 24-bit 16,777,216 colors (16 million

8. B ITMAPPED I MAGE 7 How do we obtained bitmap images?

9. V ECTOR I MAGE  Image data are stored in the form of  Data points that describe the collection of lines, curves, circle, ellipses, text, polygon and other shape  The characteristic of each shape such as line type and fill/shading specification  The information of the images can be stored as coordinates  The computer recreates the image based on the information describing the image. 8

10. V ECTOR IMAGE  Vector images are defined using formulas. 9 i.e. RECT 0,0,200,200,RED,BLUE 1x = 120 x 80 10x = 1200 x 800 Resize 10 times

11. B ITMAPPED VS V ECTOR IMAGES  Vector images are easily scaled without quality loss.  Bitmapped images get grainy and pixilated when zoomed in 10

12. B ITMAPPED VS V ECTOR IMAGES  Vector image files are usually smaller  Contain information on how to recreate the image  Vector graphics are web friendly  Calculation time for vector images can draw resources  Slow screen refresh rate  Bitmaps are more suitable for large images with many different colors (photograph) 11

13. B ITMAPPED VS V ECTOR IMAGES  Vector image require plug-ins  Vector image can easily be edited.  Each element of the image retain its identity and can be edited as an object because the position and attributes of each object are stored in the image model.  Special effect can easily be applied on bitmapped image (distortion, blurring).  To apply the same effect, vector image need to be transformed to bitmapped first. 12

14. 3-D D RAWING  3-D image can be drawn on a 2-D surface by creating depth perception.  The depth of a 3-D image is calculated as the z dimension 13 Y is the height X is the width Z is the depth.

15. 3-D D RAWING  3-D drawing software support features such as:  Directional lighting  Motion  Different perspective 14

16. P ERSPECTIVE VIEWS IN 3D 15

17. 3-D D RAWING  A 3-D object combines various shapes such as blocks, cylinders, spheres or cones (described using mathematical formulas or constructs) 16

18. 3-D D RAWING Shape can be extruded…. 17 Extrude extends the shape of plane surface some distance, either perpendicular to the shape itself, or along the defined line

19. 3-D D RAWING ….. or lathed 18 When an object is lathed, the profile of the object is rotated around the defined axis to create the 3-D object.

20. 3-D D RAWING  A 3-D scene consist of various objects arranged in a 3-D space.  Objects and elements in 3-D space have properties such as color, texture, location and so on.  Lighting and camera views can be configured. 19

21. 3-D S HADOWING  Shadows are created when object block the light from the light source.  Ray Tracing is a process used to determine where every single ray of light goes after the ray leaves the light source.  What the ray hits  What the ray bounces off (reflection)  What the ray is bent through (refraction) 20

22. 3-D S HADING  Is a process in which the computer paints darker colours on the surfaces of an object that are farther away or obstructed from the light.  Shading can be applied to provide a variety of effects.  Flat shading is the easiest for the computer to render  Gourand shading, Phong shading and Ray Tracing take longer to render but provides more realistic images. 21

23. 3-D S HADING 22 A scene can use different types of shading Gourand shading Ray tracing Flat shading Phong shading

24. 3-D I MAGE R ENDERING  When modeling is complete, the final output must be rendered.  Rendering is the process where the application calculates how the 3-D scene should look like given the objects, their position, their surface material, lighting option and so on and create the final output. 23

25. 3-D I MAGE R ENDERING  Rendering is time and resource consuming.  Need fast processor and large RAM  Final image for the animated movie Toy Story were rendered using 87 dual-processor 30 quad processor 100 MHz SPARCstation 20 46 days of continuous process to render the film’s 110, 000 frames, at the rate of one frame for every one to three hours. 24

26. E XAMPLE ON RENDERING – STEP 1 25 Background

27. E XAMPLE ON RENDERING – STEP 2 26 Object

28. E XAMPLE ON RENDERING – STEP 3 27 Object + Background

29. P ANORAMAS  QuickTime VR is used to view a single surrounding image.  Various images are stitched together to create a single panorama. 28

30. I MAGE FILE FORMATS  Macintosh formats  PICT format as a way to accommodate bitmaps and vector graphics.  Windows formats  PCX, TIFF, JPEG, GIF and PNG 29

31. C OLORS  Quantum theory  atom produces unique colors as light passes through  Light travels in the form of photons, or quanta  Color is the frequency of light wave  The rainbow shows the spectrum of visible colors (ROYGBIV)  Colors below the range are infrared  Colors above the range are ultraviolet 30 http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html

32. C OLORS  Light rays stimulate rods and cones in the eye’s retina  Receptors are sensitive to millions of combinations of red, green and blue light  Color perception is further influenced by cultural meaning and associations of certain colors.  Computerized color  Computers combine red, green and blue (RGB) lights  Bit depth determines the number of possible colors (also the size of the image) 31

33. C OLORS  Printer color  Is generated using the CMYK color model  Cyan (C)  Magenta (M)  Yellow (Y)  Black (K) 32 The Visible-Color Spectrum Wheel http://www.graphic-design.com/Photoshop/color_cast/visible_color_spectrum.html

34. C OLOR PALETTE  A palette is a mathematical table that defines colors  Also called a color look up table (CLUT) on Macintosh 33 Palettes of 256 colors (8-bit color depth) provided in Adobe’s Director – for use on the web

35. C OLOR PALETTE  The standard color palettes on a Macintosh and in Windows differ slightly  216 colors of the standard 256-color palettes are common to both computer systems.  8-bit system -> 256-value system  Optimal palette: a small range of color is chosen to best suit the color range of the image. 34

36. C OLOR RESOLUTION / BIT - DEPTH 35 the number of different colors any one pixel can display. Gray-scale images = 256 colors (also called 8-bit color) to define all the shades of gray. Instead, 65,500 colors (16-bit color) or 16.8 million colors (24-bit True Color) will provide significantly more color depth and help retain the original photograph's qualities. Nearly all stock-photo libraries, whether on CD or online, provide images in 24-bit color. http://www.ou.edu/class/digitalmedia/articles/ColorPalettes_Dithering_BitDepth.html

37. C OLOR RESOLUTION / BIT - DEPTH 36 1-bit color = 2 colors: monochrome, black and white 2-bit color = 4 colors: gray-scale 3-bit color = 8 colors 4-bit color = 16 colors 8-bit color = 256 colors 12-bit color = 4096 colors 16-bit color = 65,536 colors 24-bit color = True color or 16,777,216 mixed colors (Red 256 × Green 256 × Blue 256) http://www.unlvweb.com/we/week2.html

38. D ITHERING  Dithering is where colors that are not in the current palette are converted to the nearest color.  Forcing 24-bit image into 8-bit display adapter  Image quality is compromised.  For example, dithering is required to display a full-color image on older computers that have only a 256-color graphics card because those computers must simulate colors they can't actually display. 37 Original image in JPG format, 23K 256 web-safe colors, 100% dither, 21K http://www.ou.edu/class/digitalmedia/articles/ColorPalettes_Dithering_BitDepth.html

39. R ESIZING AND R ESAMPLING  Resizing and Resampling both refers to creating a different- sized image from the original.  Resizing simply expands or contracts the image to the new required size  May introduce interference patterns  Resampling rebuilds a new pixel pattern for the same image using the new required size  Produce more even and smother image 38

40. 39 Conventional Cameras  The basic technology that makes cameras work is fairly simple.  A still film camera is made of three basic elements:  an optical element (the lens),  a chemical element (the film)  and a mechanical element (the camera body itself).  The only trick to photography is calibrating and combining these elements in such a way that they record a crisp, recognizable image.

41. D IGITAL C AMERA – A FILMLESS C AMERA  Instead of film, a digital camera has a sensor that converts light into electrical charges.  The image sensor employed by most digital cameras is a charge coupled device (CCD).  Some cameras use Complementary Metal Oxide Semiconductor (CMOS) or Foveon X3 Image Sensor technology instead.  All these CCD, CMOS and Foveon X3 image sensors convert light into electrons A CMOS image sensor A CCD image sensor

42. W HAT G OES O N I NSIDE A D IGITAL C AMERA http://www.kodak.com/US/en/corp/researchDevelopment/technologyFeatures/pixPic.shtml

43. R EFERENCE  Vaughan Tay, Multimedia: Making It work. 7 th Edition. McGraw Hill  S. McGloughlin, “Multimedia: Concept and Practice”, Prentice Hall, 2001  http://www.ou.edu/class/digitalmedia/articles/ColorPalettes_Dithe ring_BitDepth.html http://www.ou.edu/class/digitalmedia/articles/ColorPalettes_Dithe ring_BitDepth.html  http://www.unlvweb.com/we/week1.html http://www.unlvweb.com/we/week1.html  http://www.graphic- design.com/Photoshop/color_cast/visible_color_spectrum.html http://www.graphic- design.com/Photoshop/color_cast/visible_color_spectrum.html 42