Transcript Graphics & Animation

CS101 Introduction to Computing
Lecture 33
Graphics & Animation
1
During the last lecture …
(Internet Services)
•
We looked at several services provided by the
Internet
–
–
–
–
–
–
•
FTP
Telnet
Web
eMail
Instant messaging
VoIP
We also found out about the addressing scheme
2
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
3
Domain Names
• IP addresses are fine for computers, but difficult
to recognize and remember for humans
• A domain name is a meaningful, easy-toremember ‘label’ for an IP address
4
DNS: Domain Name System
• DNS is the way that Internet domain names are
located & translated into IP addresses
5
FTP
• Used to transfer files between computers on a
TCP/IP network (e.g Internet)
6
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
7
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
8
http://www.vu.edu.pk/cs/index.html
Protocol
Identifier
Server
Address
Directory &
File Name
9
eMail
• Computer-to-computer messaging
• Inexpensive, and quite quick, but not instant!
10
But first, the components:
• eMail client
• SMTP server
• POP3 server
11
The Trouble with eMail
• Slow response times
• No way of knowing if the person we are sending
eMail to is there to read it
• The process of having a conversation through
eMail by exchanging several short messages is
too cumbersome
12
Instant messaging (IM) solves these problems
Instant Messaging
• The IM services available on the Internet (e.g.
ICQ, AIM, MSN Messenger, Yahoo! Messenger)
allow us to maintain a list of people (contacts)
that we interact with regularly
• We can send an instant messages to any of the
contacts in our list as long as that contact is
online
13
Key Point
• Once the IM server provides the communication
info to the user and his/her contact’s IM client,
the two are able to communicate with each
other without the IM server’s assistance
• This server-less connection is termed as a P2P
connection
14
VoIP: Voice over IP
• Voice delivered from one device to another
using the Internet Protocol
• Inexpensive, but of poor quality
15
Today’s Goal:
Graphics & Animation
•
We will become familiar with the role that
graphics and animations play in computing
•
We will look at how graphics & animation are
displayed
•
We will look at a few popular formats used for
storing graphics and animation
16
Computer Graphics
• Images created with the help of computers
• 2-D and 3-D (displayed on a 2-D screen but in
such a way that they give an illusion of depth)
• Used for scientific research, artistic expression,
or for industrial applications
• Graphics have made the computer interfaces
more intuitive by removing the need to
17
memorize commands
Displaying Images
• Most all computer displays consist of a grid of
tiny pixels arranged in a regular grid of rows
and columns
• Images are displayed by assigning different
colors to the pixels located in the desired
portion of the computer display
• Let’s discuss the pixel a bit more …
18
Pixel
• The smallest image forming element on a
computer display
• The computer display is made up of a regular
grid of these pixels
• The computer has the capability of assigning
any color to any of the individual pixels on the
display
• Let’s now see how the computer displays a
square
19
20
Pixel Colors (1)
• 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
21
Pixel Colors (2)
• 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
22
Color Mapping (1)
• 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)
23
Color Mapping (2)
• 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
24
Color Platelet Example
Color Platelet Code Actual Color in RGB
1
255, 255, 000 (yellow)
2
255, 000, 000 (red)
3
000, 255, 255 (cyan)
4
255, 153, 051 (orange)
…
…
…
…
…
…
25
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
26
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
27
28
Anti-Aliasing (1)
• Anti-aliasing is another technique used for
managing the ‘staircase’ effect
• Let’s say that we need to draw a white straightline 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
29
Anti-Aliasing (2)
• 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
30
31
32
Anti-Aliasing (3)
• 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
33
34
Graphics File Formats
The choice of the format generally depends
upon the nature of the image. For example:
– An image of natural scenery contains many
irregular, non-gemetric shapes, therefore is stored in
bit-map format
– A CAD drawing consists of many geometric shapes
like straight lines, arcs, etc. and therefore is stored
in a vector format
– A third situation arises when dealing with graphics
that contain both regular and irregular shapes 35
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
36
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
37
File Formats Popular on the Web (1)
gif (Graphical Interchange Format)
–Bit-map images compressed using the LZW algo.
–The number of colors is first reduced to 256 and
then consecutive pixels having the same color are
encoded in a [color, numberOfPixels] format
–Works well with computer-generated graphics
(e.g. CAD, block diagrams, cartoons) but not with
natural, realistic images
–Loss-less for images having 256 colors or less38
File Formats Popular on the Web (2)
jpg (JPEG – Joint Photographic Experts Group)
–Compressed, full-color and gray-scale bit-map
images of natural, real-world scenes, where most
every pixel differs in color from its neighbor
–It does not work as well as gif with non-realistic
images, such as cartoons or line drawings
–Does not handle compression of B&W images
–Lossy
39
File Formats Popular on the Web (3)
swf (Shockwave Flash)
–Designed for 2-D animations, but can also be used
for storing static vector images as well
–A special program (called a plug-in) is required to
view swf files in a Web browser
svg (Structured Vector Graphics)
–New format; may become more popular than swf
40
Image Processing
• A branch of computer science concerned with
manipulating and enhancing computer graphics
• Examples:
– Converting 2-D satellite imagery into a 3-D model of
a terrain
– Restoring old, faded photographs into something
closer to the original
– Determining the amount of silting in Tarbela lake
41
from a satellite image
3-D Graphics (1)
• Flat images enhanced to impart the illusion of
depth
• We perceive the world and the objects in it in 3D - breadth, width, depth - although the images
formed on the retinas of our eyes are 2-D
• The secret of 3-D perception: stereo vision
42
3-D Graphics (2)
• The two eyes are spaced a few cm apart
• Result: The images formed on the two retinas
are slightly different
• The brain combines these two into a single 3-D
image, enabling us to perceive depth
43
3-D Graphics: Applications
• Games
• Medical images
• 3-D CAD
44
3-D Rendering
• The process of converting information about 3D objects into a bit-map that can be displayed
on a 2-D computer display
• Computationally, very expensive!
• Steps:
– Draw the wire-frame (skeleton, made with thin lines)
– Fill with colors, textures, patterns
45
– Add lighting effects (reflections, shadows)
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
46
of the tediousness
47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
48
Computer Animation: Examples
• Games
• Cartoons, movies
• Visualization of processes, e.g the IM process
• Displaying the results of scientific experiments,
e.g. nuclear fusion
49
Tweening (1)
• 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 inbetween images
50
Tweening (2)
• 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
51
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
52
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
53
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
54