Digital Media

Dr. Jim Rowan

ITEC 2110

Images: Chapters 3, 4 & 5

Images: Chapters 3, 4 & 5• 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

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

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 (images)– bitmapped images– vector graphics

• each with their advantages and disadvantages

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– the numeric scales used

• Different graphing forms emphasize different aspects of the numbers– pie charts– bar charts– line graphs

Designing information display

• How to lie with statistics

• Edward Tufte, Yale University– Visual Display of Quantitative Information– Envisioning Information– Visual Explanations

Computer Display types

• Now... all are rectangular arrays of pixels

• Not always that way– Early graphics (1976) used a “steerable”

electron gun, not raster graphics– Since then...

• we have moved away from electron gun…

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”

Two approaches to internal graphic modeling

• Why two approaches?– drastic filesize differences– each is good for its type of image– each has its own unique advantagess

• Bitmapped graphics– grandfathered name... more like pixel

mapped graphics

• Vector graphics– It’s more like object graphics because you

describe objects using vectors (formulas)

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– for example…

00011000000011110000010110100000111100000001100000

A true bitmapped image is black and whiteEach logical pixel is represented by a single bit

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

255

255

255

255

255

255

255

255

255

0

0

255

0

0

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

0

0

255

0

0

255

0

0

255

0

0

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

0

0

255

255

0

0

0

0

255

0

0

255

2550

0

0

0

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

0

0

255

0

0

255

0

0

255

0

0

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

0

0

255

0

0

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

255

1111 1111 . 1111 1111 . 1111 1111 1111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 11110000 0000 . 0000 0000 . 1111 1111 0000 0000 . 0000 0000 . 1111 11111111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 1111 1111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 1111

1111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 11110000 0000 . 0000 0000 . 1111 11110000 0000 . 0000 0000 . 1111 11110000 0000 . 0000 0000 . 1111 11110000 0000 . 0000 0000 . 1111 11111111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 1111 1111 1111 . 1111 1111 . 1111 11111111 1111 . 1111 1111 . 1111 1111

1111 1111 . 1111 1111 . 1111 11110000 0000 . 0000 0000 . 1111 11111111 1111 . 0000 0000 . 0000 00000000 0000 . 0000 0000 . 1111 11110000 0000 . 0000 0000 . 1111 11111111 1111 . 0000 0000 . 0000 0000 0000 0000 . 0000 0000 . 1111 1111...for 1080 more bits...

1111 1111 . 1111 1111 . 1111

00 00 00 01 01 00 00 00 00 00

00 00 01 01 01 01 00 00 00 00

00 01 10 01 01 10 01 00 00 00

00 00 01 01 01 01 00 00 00 00

00 00 00 01 01 00 00 00 00 00

255

255

255

0

0

255

255

0

0

72 bits in the color table100 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?

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

Here are two images, blue squares Both are displayed at 72 pixels per inchBoth are displayed as 1024 X 1024 pixels in sizeEach with 3 byte (24 bit, millions of colors) color encodingWhich would have the larger (in terms of file size) internal model?Why?

bitmapped graphic vector graphic

Here are two more complex imagesBoth are displayed at 72 pixels per inchBoth are displayed as 1024 x 720 pixels in sizeEach with 3 byte (24 bit, millions of colors) color encodingWhich would have the larger (in terms of file size) internal model?Why?

bitmapped graphic vector graphic

Now imagine this…Both are displayed at 72 pixels per inchBoth are displayed as 318 X 318 pixels in sizeEach with 3 byte (24 bit, millions of colors) color encodingWhich would have the larger (in terms of file size) internal model?Why?

bitmapped graphic vector graphic

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

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 (like blur, which requires access to

surrounding pixels) differences– Bitmapped?

• Easy the pixels are stored in the model

– Vector? • Not so much…• First convert to bitmapped, then blur

Bitmapped/Vector Graphics

• Scaling and Resize– Vector? Simple... change formula

• Changes can be made BEFORE pixel values are calculated

– Bitmapped? Complicated... • frequently results in artifacts

• Why is bitmapped scaling and resizing complicated? ==>

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

[Draw on image]

Original image: 10 x 5 [Draw on image]Now make it twice as bigWhat happens if there aretwo colors next to one another?Strictly duplicate?jagged edgesInterpolate them?

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 as1.5 pixels...

Bitmapped <==> Vector GIMP <==> Inkscape• Vector can more easily be converted to

bitmapped... – in fact, this process already exists since you must

RENDER vectors to display them.

• Bitmapped to vector is complicated– Vector is based on shapes… but bitmapped does

not define any shapes– Software must identify edges and find the shapes.

BitmappedImage Manipulation

• Why?– Correct deficiencies (i.e. flash red eye)

• encapsulated sequence of operations to perform a particular change

– Create images that are difficult or impossible to create in nature

• special effects

Image layers

• Both bitmapped and vector graphics use layers as an organizational device

• In bitmapped graphics– layers are used like digital tracing paper to

isolate objects in the image– colors can be separated and manipulated

individually

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

Selection tools...

• Allow the application of filters to only the selected parts of the image

• The unaffected area is called a mask... can be thought of as a stencil

• A 1-bit mask is either transparent or opaque

• An 8-bit mask allows 256 levels of transparency... AKA alpha channel

Selection tools...

• Making the mask with a gradient produces a softer transition... a feathered edge.

• Can use anti-aliasing along the edge more effectively hides the hard edge visually

• Layers can have masks associated with them• Allows interesting compositing of image parts

Show Image: testPageImage.tiff

• 2272 pixels wide

• 2868 pixels tall

• RGB encoded

• No compression

• No table

• How Big?

Show Image: testPageImage.tiff

• Inspect it with mac cmd-I

• Open image with hexFiend

• How big is it?• What is in it?• Mostly FF...

why?

HMMMMMmmm…

• We’ll talk more about this size issue later when we discuss bitmapped graphics in more detail

• We will also consider compression techniques other than the table method

Questions?