Digital Media

Dr. Jim Rowan

ITEC 2110

Wednesday, September 4

Roll call

Barton, Paul H.Bois, Lauren C.Bonds, Allison E.Duncan, Jarred T.Lawson, Joseph I.Mulongo, Julio B.Pennison, Heather L.Reilly, Daniel J.

Sanchez-Casas, Jon F.Simson, DavisSinnock, Grant A.Swaim, Mark S.Tran, Dung Q.Vyas, Anand A.Woldeyohannes,

Tesfamichael

Wiki site feedback

• make sure your tables are arranged with the project links on the left and your picture on the right

• From now on: put reverse links from each of your pages to the previous page all the way back to the class page

Computer Graphics...

• Arguably a very different viewing media– Forced to look carefully at the processes that move

stuff from the real world to the computer... AND BACK!

– Usually consumed on a fairly low resolution monitor

• 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... magazine (gloss)

Computer Graphics

• Complex enough to be arguably an enabling technology not just a single thing

• WWW – fostered the shift from text based media– has begun to develop its own visual vocabulary

• Ways to model computer graphics– bitmapped images– vector graphics – each with their advantages and disadvantages

But first:How to display a bunch of

data?• This is a field of study all by itself that

includes computer graphics, cognitive science and psychology

• For example: Different graphing forms– pie charts– bar charts– use color for delineation?

Designing information display

• 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

• Externally an application must project this internal model onto a bitmapped display– This process is called “rendering”

• An application must also project this internal model onto a storage model to be able to store and recall it later

Two approaches to graphic modeling

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

mapped graphics

• Vector graphics– more like object graphics because

you describe objects using vectors (formulas)

• a line is mx+b• a circle is radius & position• a square is length of side & position

Bitmapped graphics...

• 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 and different resolution– will probably require clipping and scaling to move

from logical to physical pixels

00011000000011110000010110100000111100000001100001

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

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– not simply 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 1024 X 1024 pixels in sizeEach with 3 byte (24 bit, millions of colors) color encodingWhich would be bigger?Why?

bitmapped graphic vector graphic

Here are two images, blue squares Both are displayed at 72 pixels per inchBoth are 318 X 318 pixels in sizeEach with 3 byte (24 bit, millions of colors) color encodingWhich would be bigger?Why?

bitmapped graphic vector graphic

Bitmapped/Vector Graphics

• Bitmapped image size is set by – size, resolution and color resolution– not affected by contents

• Vector graphics size is set by– the contents of the image

• the more complex, the larger the file gets

– resolution does not affect the size of the file

Bitmapped/Vector Graphics

• Selection of objects in the image– vector is easy, objects are described by

mathematical equations– bitmapped, no objects, just pixels

• Special effect (like blur) differences– bitmapped, easy– vector, 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 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

• Vector can be converted to bitmapped (rasterized)... this process already exists since you 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.

Image layers

• Bitmapped and vector graphics use this 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

Questions?