digital media dr. jim rowan itec 2110. over the next several classes… in the next several lectures...

Digital Media

Dr. Jim Rowan

ITEC 2110

Over the next several classes…• 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

But First,More on “Telling the story”

• The media you choose shapes the way the story is told

• The WAY you represent data affects how it is interpreted…

• In images

• In words

• In graphs

For instance:Heard as an ad for a legal firm:

Has your disability claim been denied?

We win 75% of all denied disability claims!

How is that possible?(the implication is that all you need to do is hire them and you have

a 75% chance of winning)

For instance:Car Insurance Ads

• Several different insurance ads make the same basic claim:

• People who switch to us save $400 a year

• How is that possible?(the implication is that all you need to do is switch to them and you

will save $400)

• 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 for that procedure?

For instance:Which hospital would you choose?

The way you display the data affects how it is understood• Understanding this occurs at the crossroads of

computer graphics, cognitive science and psychology• The way data is displayed affects how people interpret

it– Colors can enhance or detract from a point– Numeric scales used

• Different types of graphs emphasize different aspects of the numbers– pie charts: pieces of the whole– bar charts: relative size or magnitude– line graphs: direction of increase or decrease

For instance:Using graphs to tell a story…

Is this the graph of a stable company?

income

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Is this the graph of a stable company?

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

income

For instance:Using images to tell a story…

http://soundwaves.usgs.gov/2001/07/glacierbaymap.gif

http://soundwaves.usgs.gov/2001/07/glacierbaymap.gif

For instance:Looking at the images another way…

http://soundwaves.usgs.gov/2001/07/glacierbaymap.gif

http://soundwaves.usgs.gov/2001/07/glacierbaymap.gif

For instance:Using different images to tell the story…

1940http://www.real-science.com/playing-glacial-fraud-game

2004http://www.real-science.com/playing-glacial-fraud-game

1950http://www.real-science.com/playing-glacial-fraud-game

http://www2.gi.alaska.edu/ScienceForum/ASF17/1793.html

Want more?

Designing information display

• How to lie with statistics

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

Now about images…

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”

As we’ve seen…

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)

First, bitmapped images...Then vector graphics

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

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

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?

First, bitmapped images...Then vector graphics

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 with smaller colored squares inside themBoth 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 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

Bitmapped/Vector Graphics

• Bitmapped image file size is…– affected by dimensions & resolution and

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

Bitmapped/Vector Graphics

• Access to objects found in the image?– vector is easy, objects are described mathematically

• this makes vector graphics the choice for animations– bitmapped, just pixels… no objects

• Special effect differences?– (like blur, which requires access to surrounding pixels)

– bitmapped • Easy; the pixels are stored in the model

– vector • There are no pixels in a vector graphic• First convert to bitmapped, then blur

Bitmapped/Vector Graphics

• Scaling and Resize– Vector? Simple... – Bitmapped? Complicated...

• frequently results in artifacts

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

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

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

Original image: 10 x 5 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 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...

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...

The point here is:

Scaling is a problem for bitmapped graphics

Bitmapped scaling

Vector graphic scaling

Image manipulation tools:GIMP

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

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– unaffected area is called a mask... can be

thought of as a stencil– opening in the mask allows background to

show through

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

More about 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

• 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

Questions?

about 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 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…