Media TechnologiesB.Sc.(Hons) Multimedia Computing Graphics Devices Principles and Image Structures

Agenda Basic CRT Principles Vector Graphic Displays Raster Graphics Displays Aliasing Image Transformations

Cathode Ray Tube (CRT)

Basic Principle of the CRT Electrons emitted here Focused here x axis deflection plate y axis deflection plate Phosphor coating Phosphor coating emits light from energy provided by electron beam but only lasts for short period and must be ‘refreshed’ to remove flicker of screen image. Typical refresh rates are 60Hz - 80 Hz the higher the more stable is the resultant display. Cheaper CRTs would not always support higher refresh rates.

Display Devices Vector Displays (Random Scan) Raster Displays (Raster Scan)

Media TechnologiesB.Sc.(Hons) Multimedia Computing Vector Scan Displays

Vector Displays

Media TechnologiesB.Sc.(Hons) Multimedia Computing Vector Displays

Often referred to as Random Scan Devices, stroke- writing or calligraphic displays Picture definition stored as a set of line drawing commands Draws each component line in turn Originally designed for architectural and engineering layouts High resolutions with smooth point-to-point line drawing functions Not able to display photo-realistic images

Media TechnologiesB.Sc.(Hons) Multimedia Computing Vector Graphics

Vector graphic files contain mathematical descriptions of one or more image elements, which are used by the rendering application to construct a final image. Vector files are thus said to be made up of descriptions of image elements or objects, rather than pixel values.

Example Formats Microsoft Windows metafile.WMF Corel Computer Graphics Metafile.CGM Autodesk Data Exchange.DXF Shockwave Flash.SWF Fireworks and Photoshop have tools for creating and editing vector graphics

Vector Graphics - Pros Vector files are useful for storing images composed of line-based elements such as lines and polygons, or those that can be decomposed into simple geometrical objects, such as text. More sophisticated formats can also store 3D objects such as polyhedrons and wire-frame models. Vector data can be easily scaled and otherwise manipulated to accommodate the resolution of a spectrum of output devices.

Vector Graphics - Pros Many vector files containing only ASCII-format data can be modified with simple text editing tools. Individual elements may be added, removed, or changed without affecting other objects in the image. It is usually easy to render vector data and save it to a bitmap format file, or, alternately, to convert the data to another vector format, with good results.

Vector Graphics - Cons Vector files cannot easily be used to store extremely complex images, such as some photographs, where color information is paramount and may vary on a pixel-by-pixel basis. The appearance of vector images can vary considerably depending upon the application interpreting the image. Factors include the rendering application's compatibility with the creator application and the sophistication of its toolkit of geometric primitives and drawing operations

Vector Graphics - Cons Vector data also displays best on vectored output devices such as plotters and random scan displays. High-resolution raster displays are needed to display vector graphics as effectively. Reconstruction of vector data may take considerably longer than that contained in a bitmap file of equivalent complexity, because each image element must be drawn individually and in sequence.

Random v Raster

Scaleable Vector Graphics SVG is a language for describing two-dimensional graphics and graphical applications in XML Scaleable means extendable Interaction - mouse events Animation - animated components

SVG still in Development Development by WC3 - SVG Web Consortium Working Group Group membership made up of interested parties from computer graphics community et al. Representatives from companies including: Adobe Systems Microsoft Corporation Sun Microsystems Autodesk Corel Nokia

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan Displays

Based on TV Technology Electron beam sweeps scan lines row by row down the phosphor screen based on information stored in the Frame Buffer ‘painting’ one line at a time Frame buffer holds total screen area Screen area comprised of picture elements (pixels) Often characterised by their resolution, aspect ratio, and colour depth.

Raster Scan

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan

Raster Scan Properties Resolution = number of pixels available on display, 640 x 480 ( VGA ), 800 x 600, 1024 x 768 ( SVGA ) Aspect ratio = number of horizontal pixels / vertical pixels so 800 / 600 = 1.3. or 4 / 3 = 1024 / 768 etc 4/3 artistically (visually) pleasing? Try wide-screen! Bit depth determined by Frame Buffer - colours available for each pixel - determined by number of bits stored for each pixel - hence bits per pixel. 1 bit per pixel = monochrome (black and white) Typically 24 or 32 bits per pixel gives ‘true colour’

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan Coordinates x y Origin (0,0) at top left-hand corner y values increase down the screen

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan Aliasing

Raster Scan

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan

Media TechnologiesB.Sc.(Hons) Multimedia Computing Raster Scan

Aliasing Bitmap images will exhibit aliasing of lines due to the underlying method of their storage and display. Algorithms applied to final image to smooth jagged edges and give more gradation between edge colours to provide antialising

Aliasing

Antialiasing Lines AliasedAntialiased

Media TechnologiesB.Sc.(Hons) Multimedia Computing Aliased

Media TechnologiesB.Sc.(Hons) Multimedia Computing Antialiased

Media TechnologiesB.Sc.(Hons) Multimedia Computing

Media TechnologiesB.Sc.(Hons) Multimedia Computing Bitmap Image Editing

Bitmapped Graphics Allow for high-definition photorealistic images. Image encoded on a pixel by pixel basis. Image resolution degraded when scaled Supports lossless compressions algorithms File Formats -.BMP,.GIF,.JPG,.TIF.TGA Software Adobe Photoshop (with ImageReady) Fireworks PaintShop Pro (Shareware)

True Colour Human eye can distinguish between 2 24 colours = colours Thus any system giving >= 2 24 colours can be described as ‘Truecolour’ or Truecolor 24 bits per pixel yields true colour 16 bits per pixel often referred to as ‘High Colour’

Image Transformations Scaling Rotations Translations Reflections (flip) Freeform

Translation

Scaling

Rotation

Reflection (flip)

Freeform (distort)

Compositing Images

A Word on Standards De-Facto Standard ‘by fact’ A format, language, or protocol that has become a standard not because it has been approved by a standards organization but because it is widely used and recognized by the industry as being standard; e.g.SWF - adopted by fact of use. De-Jure - ‘by law’ Adopted by agreement e.g SVG development within framework of W3C Working Group.

Reference Guide Encyclopedia of Graphics File Formats Second Edition James D. Murry and William VanRyper O'Reilly & Associates 1996 ISBN Chapman and Chapman