Introduction to
Computer Graphics
Chapter 3
Digital Multimedia, 2nd edition
Introduction to
Computer Graphics Introduction to Computer Graphics
Chapter 3
Digital Multimedia, 2nd edition
Introduction to
Computer Graphics
•
Digitize printed image with a scanner•
Capture image from digital camera•
Any other ways?How to get images in digital form?
•
Digitize printed image with a scanner•
Capture image from digital camera•
Any other ways?3
•
Digitize printed image with a scanner•
Capture image from digital camera•
Any other ways?How to get images in digital form?
64
•
Digitize printed image with a scanner•
Capture image from digital camera•
Any other ways?How to get images in digital form?
•
Grab frame from video camera•
Create in digital form using graphics package•
Adobe Fireworks•
Adobe Illustrator•
Microsoft Paint•
Generate visual representation of data•
Excel Charts•
Grab frame from video camera•
Create in digital form using graphics package•
Adobe Fireworks•
Adobe Illustrator•
Microsoft Paint•
Generate visual representation of data•
Excel Charts3
How to get images in digital form?
•
Grab frame from video camera•
Create in digital form using graphics package•
Adobe Fireworks•
Adobe Illustrator•
Microsoft Paint•
Generate visual representation of data•
Excel Charts•
Grab frame from video camera•
Create in digital form using graphics package•
Adobe Fireworks•
Adobe Illustrator•
Microsoft Paint•
Generate visual representation of data•
Excel Charts•
Image is displayed on monitor etc as array of pixels•
Rectangular (usually square) dots of colourRendering
•
Image is displayed on monitor etc as array of pixels•
Rectangular (usually square) dots of colour 3•
Image is displayed on monitor etc as array of pixels•
Rectangular (usually square) dots of colourRendering
66–67
•
Image is displayed on monitor etc as array of pixels•
Rectangular (usually square) dots of colourRendering
•
Program (e.g. Web browser) sets pixels to an appropriate color to produce desired image•
Pixels merge optically to produce effect of continuous tone•
Program must maintain a model of the image•
May be stored in a file and read by program•
Program (e.g. Web browser) sets pixels to an appropriate color to produce desired image•
Pixels merge optically to produce effect of continuous tone•
Program must maintain a model of the image•
May be stored in a file and read by program 3Rendering
•
Program (e.g. Web browser) sets pixels to an appropriate color to produce desired image•
Pixels merge optically to produce effect of continuous tone•
Program must maintain a model of the image•
May be stored in a file and read by program•
Program (e.g. Web browser) sets pixels to an appropriate color to produce desired image•
Pixels merge optically to produce effect of continuous tone•
Program must maintain a model of the image•
May be stored in a file and read by programBitmapped and Vector Graphics
•
Bitmapped graphics – image is modeled as an array of pixel values•
Bitmapped graphics – image is modeled as an array of pixel values3
Bitmapped and Vector Graphics
•
Vector graphics –image is modeled as mathematical
description of curves, shapes
67–68
•
Vector graphics –image is modeled as mathematical
description of curves, shapes
(x,y) r
Bitmapped
•
Example:•
10 X 10 grid•
100 pixels•
256 colors (8 bits = 1 byte)•
100 bytes to store the file•
What would the size be if the image was black and white only?•
Example:•
10 X 10 grid•
100 pixels•
256 colors (8 bits = 1 byte)•
100 bytes to store the file•
What would the size be if the image was black and white only?3
Bitmapped
•
Example:•
10 X 10 grid•
100 pixels•
256 colors (8 bits = 1 byte)•
100 bytes to store the file•
What would the size be if the image was black and white only?•
Example:•
10 X 10 grid•
100 pixels•
256 colors (8 bits = 1 byte)•
100 bytes to store the file•
What would the size be if the image was black and white only?Vector
•
Integer stored using 8 bits•
4 Integers + Color•
What is the 4th integer?•
However, vector fileneed other information in the header?
•
What other information is needed?•
Integer stored using 8 bits•
4 Integers + Color•
What is the 4th integer?•
However, vector fileneed other information in the header?
•
What other information is needed?3
Vector
•
Integer stored using 8 bits•
4 Integers + Color•
What is the 4th integer?•
However, vector fileneed other information in the header?
•
What other information is needed?(x,y) r
•
Integer stored using 8 bits•
4 Integers + Color•
What is the 4th integer?•
However, vector fileneed other information in the header?
•
What other information is needed?r
Bitmapped
•
Render by direct mapping of logical pixels to physical pixels of screen•
Render by direct mapping of logical pixels to physical pixels of screen3
Bitmapped
•
Render by direct mapping of logical pixels to physical pixels of screen•
Render by direct mapping of logical pixels to physical pixels of screenVector
•
Render by computing pixels from geometric coordinates.•
Can require more computation•
Render by computing pixels from geometric coordinates.•
Can require more computation(x,y) r
3
Vector
•
Render by computing pixels from geometric coordinates.•
Can require more computation•
Render by computing pixels from geometric coordinates.•
Can require more computation•
Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes•
Vector – space required depends oncomplexity of picture (how many shapes, segments of path, etc)
•
Usually vector graphics smaller than bitmappedMemory Requirements
•
Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes•
Vector – space required depends oncomplexity of picture (how many shapes, segments of path, etc)
•
Usually vector graphics smaller than bitmapped3
•
Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes•
Vector – space required depends oncomplexity of picture (how many shapes, segments of path, etc)
•
Usually vector graphics smaller than bitmappedMemory Requirements
68–69
•
Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes•
Vector – space required depends oncomplexity of picture (how many shapes, segments of path, etc)
•
Usually vector graphics smaller than bitmapped•
128 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
128x128x3 = 48,000 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M118,118H10V10h108V118z"/>
•
86 bytes (plus 198 bytes SVG boilerplate)Memory Requirements
•
128 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
128x128x3 = 48,000 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M118,118H10V10h108V118z"/>
•
86 bytes (plus 198 bytes SVG boilerplate) 3•
128 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
128x128x3 = 48,000 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M118,118H10V10h108V118z"/>
•
86 bytes (plus 198 bytes SVG boilerplate)Memory Requirements
68–69
•
128 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
128x128x3 = 48,000 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M118,118H10V10h108V118z"/>
•
86 bytes (plus 198 bytes SVG boilerplate)Memory Requirements
•
1280 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
1280x1280x3 = 4,915,200 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M1180,1180H10V10h1080V1180z"/>
•
90 bytes (plus 198 bytes SVG boilerplate)•
1280 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
1280x1280x3 = 4,915,200 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M1180,1180H10V10h1080V1180z"/>
•
90 bytes (plus 198 bytes SVG boilerplate) 3Memory Requirements
•
1280 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
1280x1280x3 = 4,915,200 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M1180,1180H10V10h1080V1180z"/>
•
90 bytes (plus 198 bytes SVG boilerplate)•
1280 px square with 20px blue outline filled in red•
Bitmap using 24 bits per pixel•
1280x1280x3 = 4,915,200 bytes•
Vector specified in SVG:•
<path fill="#F8130D" stroke="#1E338B"stroke-width="20"
d="M1180,1180H10V10h1080V1180z"/>
•
90 bytes (plus 198 bytes SVG boilerplate)SVG
• S
calableV
ectorG
raphic format•
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics• S
calableV
ectorG
raphic format•
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics3
SVG
• S
calableV
ectorG
raphic format•
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics• S
calableV
ectorG
raphic format•
http://en.wikipedia.org/wiki/Scalable_Vector_GraphicsFonts
•
Are fonts stored as bitmaps or vectors?3
Fonts
•
Are fonts stored as bitmaps or vectors?Fonts
•
Fonts are stored in various vector formats•
TrueType format (developed by Apple)•
Type 1 format (developed by Adobe)•
Fonts stored like splines (piecewise polynomials).•
Set of Points•
Curves arefunctions
•
Fonts are stored in various vector formats•
TrueType format (developed by Apple)•
Type 1 format (developed by Adobe)•
Fonts stored like splines (piecewise polynomials).•
Set of Points•
Curves arefunctions
3
Fonts
•
Fonts are stored in various vector formats•
TrueType format (developed by Apple)•
Type 1 format (developed by Adobe)•
Fonts stored like splines (piecewise polynomials).•
Set of Points•
Curves arefunctions
•
Fonts are stored in various vector formats•
TrueType format (developed by Apple)•
Type 1 format (developed by Adobe)•
Fonts stored like splines (piecewise polynomials).•
Set of Points•
Curves arefunctions
•
Vectors – drawing programs•
Select individual graphic objects (shapes, paths, &c)•
Transform size, position, angle,•
Change attributes: stroke and fill•
Bitmaps – painting programs•
Select areas of pixels•
Apply effects and filtersPainting vs. Drawing
•
Vectors – drawing programs•
Select individual graphic objects (shapes, paths, &c)•
Transform size, position, angle,•
Change attributes: stroke and fill•
Bitmaps – painting programs•
Select areas of pixels•
Apply effects and filters3
•
Vectors – drawing programs•
Select individual graphic objects (shapes, paths, &c)•
Transform size, position, angle,•
Change attributes: stroke and fill•
Bitmaps – painting programs•
Select areas of pixels•
Apply effects and filtersPainting vs. Drawing
70–71
•
Vectors – drawing programs•
Select individual graphic objects (shapes, paths, &c)•
Transform size, position, angle,•
Change attributes: stroke and fill•
Bitmaps – painting programs•
Select areas of pixels•
Apply effects and filtersTrick question
•
Is Fireworks (the program we used in lab to crop images) a painting program or a drawing program?•
Do you use it to edit bitmap or vector graphics?•
Is Fireworks (the program we used in lab to crop images) a painting program or a drawing program?•
Do you use it to edit bitmap or vector graphics?3
Trick question
•
Is Fireworks (the program we used in lab to crop images) a painting program or a drawing program?•
Do you use it to edit bitmap or vector graphics?•
Is Fireworks (the program we used in lab to crop images) a painting program or a drawing program?•
Do you use it to edit bitmap or vector graphics?Painting, Drawing, Image Editing
•
Painting programs often have support for tablet devices.•
Mimics paper & pen or canvas & paint•
Drawing programs often have support for geometric objects•
Fireworks is classic example•
Image Editing•
Focuses on manipulating existing images rather than creating ones from scratch (Photoshop)•
Painting programs often have support for tablet devices.•
Mimics paper & pen or canvas & paint•
Drawing programs often have support for geometric objects•
Fireworks is classic example•
Image Editing•
Focuses on manipulating existing images rather than creating ones from scratch (Photoshop)3
Painting, Drawing, Image Editing
•
Painting programs often have support for tablet devices.•
Mimics paper & pen or canvas & paint•
Drawing programs often have support for geometric objects•
Fireworks is classic example•
Image Editing•
Focuses on manipulating existing images rather than creating ones from scratch (Photoshop)•
Painting programs often have support for tablet devices.•
Mimics paper & pen or canvas & paint•
Drawing programs often have support for geometric objects•
Fireworks is classic example•
Image Editing•
Focuses on manipulating existing images rather than creating ones from scratch (Photoshop)•
Vectors•
Scaling is a simple mathematical operation on stored description (before rendering)•
Curves and lines remain smooth at all sizes•
Bitmaps•
Interpolate pixel values•
More or less sophisticated algorithm•
Usually produces loss of quality, blurring, jaggedness &cScaling
•
Vectors•
Scaling is a simple mathematical operation on stored description (before rendering)•
Curves and lines remain smooth at all sizes•
Bitmaps•
Interpolate pixel values•
More or less sophisticated algorithm•
Usually produces loss of quality, blurring, jaggedness &c3
•
Vectors•
Scaling is a simple mathematical operation on stored description (before rendering)•
Curves and lines remain smooth at all sizes•
Bitmaps•
Interpolate pixel values•
More or less sophisticated algorithm•
Usually produces loss of quality, blurring, jaggedness &cScaling
71
•
Vectors•
Scaling is a simple mathematical operation on stored description (before rendering)•
Curves and lines remain smooth at all sizes•
Bitmaps•
Interpolate pixel values•
More or less sophisticated algorithm•
Usually produces loss of quality, blurring, jaggedness &c•
Rasterize vectors•
Lose all their vector properties•
Also called Flattening•
Trace bitmaps•
Difficult and can only produce an approximation (parameterized)Combining Vectors & Bitmaps
•
Rasterize vectors•
Lose all their vector properties•
Also called Flattening•
Trace bitmaps•
Difficult and can only produce an approximation (parameterized)3
•
Rasterize vectors•
Lose all their vector properties•
Also called Flattening•
Trace bitmaps•
Difficult and can only produce an approximation (parameterized)Combining Vectors & Bitmaps
73–75
•
Rasterize vectors•
Lose all their vector properties•
Also called Flattening•
Trace bitmaps•
Difficult and can only produce an approximation (parameterized)Are you getting it?
•
Vectors seem so much better than bitmaps, right?•
How are they better?•
Why even use bitmaps?•
Vectors seem so much better than bitmaps, right?•
How are they better?•
Why even use bitmaps?3
Are you getting it?
•
Vectors seem so much better than bitmaps, right?•
How are they better?•
Why even use bitmaps?•
Vectors seem so much better than bitmaps, right?•
How are they better?•
Why even use bitmaps?Combining Vectors &
Bitmaps
•
Import bitmaps into vector drawing programs•
Treat bitmaps as indivisible objects•
Bitmap editing programs often provide no support for importing vector images.•
Import bitmaps into vector drawing programs•
Treat bitmaps as indivisible objects•
Bitmap editing programs often provide no support for importing vector images.3
Combining Vectors &
Bitmaps
•
Import bitmaps into vector drawing programs•
Treat bitmaps as indivisible objects•
Bitmap editing programs often provide no support for importing vector images.•
Import bitmaps into vector drawing programs•
Treat bitmaps as indivisible objects•
Bitmap editing programs often provide no support for importing vector images.•
Permits separation and manipulation of individual parts of an image.•
Layers are then Flattened to form bitmapsLayers
3
•
Permits separation and manipulation of individual parts of an image.•
Layers are then Flattened to form bitmapsLayers
75–78
Layers
•
Digital version of clear sheets, stacked on top of each other•
Areas without colored pixels are transparent so lower layers show through3
Layers
•
Digital version of clear sheets, stacked on top of each other•
Areas without colored pixels are transparent so lower layers show throughCompositing
•
Combining layers using different blending modes (digital collage)•
http://en.wikipedia.org/wiki/Compositing•
Combining layers using different blending modes (digital collage)•
http://en.wikipedia.org/wiki/Compositing 3Compositing
•
Combining layers using different blending modes (digital collage)•
http://en.wikipedia.org/wiki/Compositing•
Combining layers using different blending modes (digital collage)•
http://en.wikipedia.org/wiki/CompositingCompositing
•
In video, blue screening (actually, greenscreening) is used to extract foreground layer to combine it with any background layer.
•
In video, blue screening (actually, greenscreening) is used to extract foreground layer to combine it with any background layer.
3
Compositing
•
In video, blue screening (actually, greenscreening) is used to extract foreground layer to combine it with any background layer.
•
In video, blue screening (actually, greenscreening) is used to extract foreground layer to combine it with any background layer.
•
Many different graphics file formats in existence•
Different ways of encoding image data•
Goal: Reduce file size while preserving quality•
Factors: Number of colors, resolution, bitmap vs. vector.File Formats
•
Many different graphics file formats in existence•
Different ways of encoding image data•
Goal: Reduce file size while preserving quality•
Factors: Number of colors, resolution, bitmap vs. vector.3
•
Many different graphics file formats in existence•
Different ways of encoding image data•
Goal: Reduce file size while preserving quality•
Factors: Number of colors, resolution, bitmap vs. vector.File Formats
78–79
•
Many different graphics file formats in existence•
Different ways of encoding image data•
Goal: Reduce file size while preserving quality•
Factors: Number of colors, resolution, bitmap vs. vector.Bitmap Formats
•
Two different compression methods•
Lossless – image can be reconstructed exactly from compressed version•
Lossy – some information discarded, image can only be reconstructed approximately•
Two different compression methods•
Lossless – image can be reconstructed exactly from compressed version•
Lossy – some information discarded, image can only be reconstructed approximately3
Bitmap Formats
•
Two different compression methods•
Lossless – image can be reconstructed exactly from compressed version•
Lossy – some information discarded, image can only be reconstructed approximately•
Two different compression methods•
Lossless – image can be reconstructed exactly from compressed version•
Lossy – some information discarded, image can only be reconstructed approximately•
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 standardWWW Bitmapped Formats
•
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 standard3
•
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 standardWWW Bitmapped Formats
79–80
•
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•
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 factostandard
•
EPS (Encapsulated PostScript)•
Primarily print, use declining, superseded by PDFVector Formats
•
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 factostandard
•
EPS (Encapsulated PostScript)•
Primarily print, use declining, superseded by PDF3
•
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 factostandard
•
EPS (Encapsulated PostScript)•
Primarily print, use declining, superseded by PDFVector Formats
81–82
•
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 factostandard
