introduction to computer graphics
DESCRIPTION
Introduction to Computer Graphics. Chapter 3 Digital Multimedia, 2nd edition. 64. How to get images in digital form?. 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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/1.jpg)
Chapter 3Digital Multimedia, 2nd edition
Introduction to Computer Graphics
![Page 2: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/2.jpg)
3
• Digitize printed image with a scanner
• Capture image from digital camera
• Any other ways?
How to get images in digital form?
64
![Page 3: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/3.jpg)
3
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
![Page 4: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/4.jpg)
3
• Image is displayed on monitor etc as array of pixels
• Rectangular (usually square) dots of colour
Rendering
66–67
![Page 5: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/5.jpg)
3
Rendering
• 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
![Page 6: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/6.jpg)
3
Bitmapped and Vector Graphics
• Bitmapped graphics – image is modeled as an array of pixel values
• Vector graphics – image is modeled as mathematical description of curves, shapes
67–68
(x,y)
r
![Page 7: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/7.jpg)
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?
![Page 8: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/8.jpg)
3
Vector
• Integer stored using 8 bits
• 4 Integers + Color
• What is the 4th integer?
• However, vector file need other information in the header?
• What other information is needed?
(x,y)
r
![Page 9: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/9.jpg)
3
Bitmapped
• Render by direct mapping of logical pixels to physical pixels of screen
![Page 10: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/10.jpg)
3
Vector
• Render by computing pixels from geometric coordinates.
• Can require more computation
(x,y)
r
![Page 11: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/11.jpg)
3
• Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes
• Vector – space required depends on complexity of picture (how many shapes, segments of path, etc)
• Usually vector graphics smaller than bitmapped
Memory Requirements
68–69
![Page 12: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/12.jpg)
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
![Page 13: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/13.jpg)
3
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)
![Page 14: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/14.jpg)
3
SVG
•Scalable Vector Graphic format
• http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
![Page 15: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/15.jpg)
3
Fonts
• Are fonts stored as bitmaps or vectors?
![Page 16: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/16.jpg)
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
![Page 17: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/17.jpg)
3
• 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 filters
Painting vs. Drawing
70–71
![Page 18: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/18.jpg)
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?
![Page 19: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/19.jpg)
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)
![Page 20: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/20.jpg)
3
• 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
Scaling
71
![Page 21: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/21.jpg)
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
![Page 22: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/22.jpg)
3
Are you getting it?
• Vectors seem so much better than bitmaps, right?
• How are they better?
• Why even use bitmaps?
![Page 23: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/23.jpg)
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.
![Page 24: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/24.jpg)
3
• Permits separation and manipulation of individual parts of an image.
• Layers are then Flattened to form bitmaps
Layers
75–78
![Page 25: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/25.jpg)
3
Layers• Digital version of clear sheets, stacked on top of
each other
• Areas without colored pixels are transparent so lower layers show through
![Page 26: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/26.jpg)
3
Compositing
• Combining layers using different blending modes (digital collage)
• http://en.wikipedia.org/wiki/Compositing
![Page 27: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/27.jpg)
3
Compositing
• In video, blue screening (actually, green screening) is used to extract foreground layer to combine it with any background layer.
![Page 28: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/29.jpg)
3
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
![Page 30: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/30.jpg)
3
• 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
WWW Bitmapped Formats
79–80
![Page 31: Introduction to Computer Graphics](https://reader035.vdocuments.site/reader035/viewer/2022081506/56813b49550346895da43684/html5/thumbnails/31.jpg)
3
• 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 facto standard
• EPS (Encapsulated PostScript)
• Primarily print, use declining, superseded by PDF
Vector Formats
81–82