Professional Documents
Culture Documents
Lecture 33
Graphics & Animation
During the last lecture …(Internet Services):
• We looked at several services provided by the Internet
1. FTP
2. Telnet
3. Web
4. eMail
5. Instant messaging
6. VoIP
• We also found out about the addressing scheme used on the Internet
IP Address:
• A unique identifier for a computer on a TCP/IP network
• Format: four 8-bit numbers separated by periods. Each 8-bit number can be 0 to
255
Domain Names:
• IP addresses are fine for computers, but difficult to recognize and remember for
humans
• A domain name is a meaningful, easy-to-remember ‘label’ for an IP address
DNS: Domain Name System:
• DNS is the way that Internet domain names are located & translated into IP
addresses
FTP:
• Used to transfer files between computers on a TCP/IP network (e.g Internet)
Telnet Protocol:
• Using Telnet, a user can remotely log on to a computer (connected to the user’s
through a TCP/IP network, e.g. Internet) & have control over it like a local user,
including control over running various programs
The Web :
• The greatest, shared resource of information created by humankind
• A user may access any item on the Web through a URL, e.g.
http://www.vu.edu.pk/cs/index.html
Protocol Server
Identifier Address Directory &
File Name
eMail:
• Computer-to-computer messaging
Page 1 of 7
© Copyright Virtual University of Pakistan
Virtual University Introduction to Computing
Pixel Colors :
• The color of each pixel is generally represented in the form a triplet
• In a popular scheme – the RGB scheme – each part of the triplet represents the
intensity of one of out of three primary colors: red, green, blue
• Often, the intensity of each color is represented with a byte, resulting in
256x256x256 (16+ million) unique color combinations
• If this scheme is used to display an image that is equal to the size of an XGA
(1024x768 pixels) display, the image will require 2.25MB of storage, which is just
too much
• A number of clever schemes have been invented to reduce the number of bytes
that are required for storing graphics. 2 popular ones:
• Color mapping
• Dithering
Color Mapping :
• Instead of letting each pixel assume one out of 16 million possible colors, only a
limited number of colors – called the platelet – are allowed
• For example, the platelet may be restricted to 256 colors (requiring 1 byte/pixel
instead of 3)
• Each value, from 0 to 255, is mapped to a selected RGB color through a table,
reducing the size of a 2.25MB graphic to 0.75MB
• The quality of the displayed image will not suffer at all if the image only uses
colors that are a part of the platelet
… …
… …
… …
Dithering:
• In this scheme, pixels of alternating colors are used to simulate a color that is not
present in the platelet
• For example, red and green pixels can be alternated to give the impression of
bright yellow
• The quality of the displayed image is poorer
Page 3 of 7
© Copyright Virtual University of Pakistan
Virtual University Introduction to Computing
Aliasing:
• The computer screen consists of square-ish pixels arranged in a fixed grid
• At times, when a diagonal line is drawn on this grid, it looks more like a staircase,
instead of a straight line
• This effect – called aliasing – can be managed by reducing the size of pixels
Anti-Aliasing:
• Anti-aliasing is another technique used for managing the ‘staircase’ effect
• Let’s say that we need to draw a white straight-line such that it overlaps 60% with
one pixel, and 40% with another initially, and near the end, 58%, 41%, and 1%,
respectively, with three pixels
4 5
1 2 3
• The staircase effect is caused because the proper drawing of the line requires a
pixel that does not exist
• There are three options in this case:
– Assign the white color to the pixel corresponding to the largest overlap
– Assign the white color to both pixels
• Either of these will cause the staircase effect
• The 3rd option is to color the pixel with 60% overlap to a 40% gray color & the
other one to 60% gray
• Result: A smoother - pleasing to the eye - look
Graphics File Formats:
• The choice of the format generally depends upon the nature of the image. For
example:
1. An image of natural scenery contains many irregular, non-gemetric
shapes, therefore is stored in bit-map format
2. A CAD drawing consists of many geometric shapes like straight lines,
arcs, etc. and therefore is stored in a vector format
3. A third situation arises when dealing with graphics that contain both
regular and irregular shapes
Vector or Object-Oriented Graphics:
• Treats everything that is drawn as an object
• Objects retain their identity after they are drawn
• These objects can later be easily moved, stretched, duplicated, deleted, etc
• Are resolution independent
• Relatively small file size
• Examples: swf, svg, wmf, ps
Bit-Mapped or Raster Graphics:
• Treats everything that is drawn as a bit-map
• If an object is drawn on top of another, it is difficult to move just one of them while
leaving the other untouched
• Changing the resolution often requires considerable touch-up work
• Relatively large file size
• Examples: gif, jpg, bmp
Page 4 of 7
© Copyright Virtual University of Pakistan
Virtual University Introduction to Computing
Animation:
• Graphics in motion, e.g. cartoons
• Illusion of motion is created by showing the viewer a sequence of still images,
rapidly
• Drawing those images - each slightly different from the previous one - used to be
quite tedious work
• Computers have helped in cutting down some of the tediousness
1. See next slides
Computer Animation: Examples
• Games
• Cartoons, movies
• Visualization of processes, e.g the IM process
• Displaying the results of scientific experiments, e.g. nuclear fusion
Tweening:
• Creating a reasonable illusion of motion requires the drawing of 14-30 images
per second of animation – very tedious!
• In practice, only 4-5 images (called key images) instead of 14-30 are drawn, and
then the computer is asked to create the remaining in-between images
• This process of creating these in-between images from key images is called in-
betweening (or tweening for short)
• The simplest algorithm for tweening calculates the position of a particular
segment of an image by calculating the average of the positions of that same
image segment belonging to adjacent key images
The Future of Graphics & Animation:
• New graphic-file storage formats will appear with better compression efficiencies
• 3-D animation will become more popular as computers become faster and
algorithms become smarter
• More realistic games; better realism in movies – may, one day, make the human
actors extinct
Today’s Goal:Graphics & Animation
• We became familiar with the role that graphics and animations play in computing
• We discussed how graphics & animation are displayed
• We also looked at several formats used for storing graphics and animation
Next Lecture:(Intelligent Systems)
• To become familiar with the distinguishing features of intelligent systems with
respect to other software systems
• To become able to appreciate the role of intelligent systems in scientific,
business and consumer applications
• To look at several techniques for designing intelligent systems
Page 6 of 7
© Copyright Virtual University of Pakistan
Virtual University Introduction to Computing
Page 7 of 7
© Copyright Virtual University of Pakistan