Chapter 3: Computer Graphics

1. Rendering

1.1. i. Image is displayed on monitor etc as array of pixels • Rectangular (usually square) dots of colour

1.2. ii. Program (e.g. Web browser) sets pixels to an appropriate color to produce desired image • Pixels merge optically to produce effect of continuous tone

1.3. iii. Program must maintain a model of the image May be stored in a file and read by program

2. Production and display of still images stored in digital form: • Digitize printed image with a scanner • Capture image from digital camera • Grab frame from video camera • Create in digital form using graphics package • Generate visual representation of data

3. Combining Vectors & Bitmaps

3.1. i. Rasterize vectors • Lose all their vector properties

3.2. ii. Trace bitmaps • Difficult and can only produce an approximation (parameterized)

3.3. iii. Import bitmaps into vector drawing programs • Treated as indivisible objects

3.4. iv. Apply complex strokes to vectors to approximate bitmapped appearance

4. File Formats

4.1. WWW Bitmapped Formats

4.1.1. • GIF (Compuserve Graphics Interchange Format) - lossless, 256 colours (indexed), transparency • JPEG (Joint Photographic Experts Group) - lossy (variable quality), millions of colours • PNG (Portable Network Graphics) - lossless, variable number of colours, W3C standard

4.2. Vector Formats

4.2.1. • SVG (Scalable Vector Graphics) - W3C standard, not presently widely used • SWF (Flash) - primarily for vector animation, but can be used for still vector graphics; de facto standard • EPS (Encapsulated PostScript) - primarily print, use declining, superseded by PDF

5. Layers

5.1. i. Organizational device used in both sorts of graphics, especially useful in bitmaps • Permits separation and manipulation of different parts of a bitmapped image

5.2. ii. Digital version of clear sheets of acetate, stacked on top of each other • Areas without coloured pixels/graphic objects are transparent so lower layers show through

5.3. iii. Compositing – combine layers using different blending modes (digital collage)

6. Bitmapped and Vector Graphics

6.1. i. Bitmapped graphics – image is modelled as an array of pixel values • Render by direct mapping of logical pixels to physical pixels of screen (May need scaling and clipping)

6.2. ii. Vector graphics – image is modelled as mathematical description of curves, shapes • Render by computing pixels from description

6.3. For example: Logical Pixel in value form to Physical Pixel-Color depth it's called Direct Mapping

7. Memory Requirements

7.1. i. Bitmapped – any picture of wxh pixels, using c bytes per pixel occupies whc bytes

7.2. ii. Vector – space required depends on complexity of picture (how many shapes, segments of path, etc) • Usually vector graphics smaller than bitmapped

7.3. iii. 128 px square with 20px blue outline filled in red • Bitmap using 24 bits per pixel, 128x128x3 = 48kbytes • Vector specified in SVG: • <path fill="#F8130D" stroke="#1E338B" stroke-width="20" d="M118,118H10V10h108V118z"/> • 86 bytes (plus 198 bytes SVG boilerplate)

8. Image Editing

8.1. i. Vectors – drawing programs • Select individual graphic objects (shapes, paths, &c) • Transform size, position, angle, &c • Change attributes: stroke and fill &c

8.2. ii. Bitmaps – painting programs • Select areas of pixels • Apply effects and filters

9. Scaling

9.1. i. Vectors • Scaling is a simple mathematical operation on stored description (before rendering) • Curves and lines remain smooth at all sizes

9.2. ii. Bitmaps • Interpolate pixel values (More or less sophisticated algorithm) • Usually produces loss of quality, blurring, jaggedness &c