1. Dr. Jim Rowan ITEC 2110 Images: Chapters 3, 4 & 5
Digital Media
Dr. Jim Rowan
ITEC 2110
Images: Chapters 3, 4 & 5

2. 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
Vector graphics part 1
Color parts 1 & 2
Vector graphics part 2: 3D

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

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

5. But First, More on “Telling the story”
The way you represent data affects how it is interpreted…
In words
In graphs
In images

6. Heard as an ad for a legal firm:
Many of the initial claims for disability are denied. 75% of all disability claims that are contested are granted How is that possible?

7. Car Insurance Ads
At least two different insurance ads make some kind of claim like:
People who switch to [insurance company] save $400 a year
How is that possible?

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

9. Graph Scaling…
Want to know more?

10. Designing information display
How to lie with statistics
Edward Tufte, Yale University
Visual Display of Quantitative Information
Envisioning Information
Visual Explanations

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

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

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

14. 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
So let’s look at how this happens… starting with a bitmapped image

15.
A true bitmapped image is black and white
Each logical pixel is represented by a single bit

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

17.
...
for 1080 more bits...
255
2550

18. 72 bits in the color table 100 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?
255 00 01 10

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

20. bitmapped graphic
vector graphic
Here are two images, blue squares
Both are displayed at 72 pixels per inch
Both are displayed as 1024 X 1024 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would have the larger (in terms of file size) internal model?
Why?

21. bitmapped graphic
vector graphic
Here are two more complex images
Both are displayed at 72 pixels per inch
Both are displayed as 1024 x 720 pixels in size
Each with 3 byte (24 bit, millions of colors) color encoding
Which would have the larger (in terms of file size) internal model?
Why?

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

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

24. 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? ==>

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

26. Original image: 10 x 5
Now make it twice as big
What happens if there are
two colors next to one
another?
Strictly duplicate?
jagged edges
Interpolate them?

27. 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 as
1.5 pixels...

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

29. Bitmapped Image 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

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

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

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

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

37. Show Image: testPageImage.tiff
2272 pixels wide
2868 pixels tall
RGB encoded
No compression
No table
How Big?

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

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

40. Questions?