EDU3130 Simple Graphic Manipulations I

1
EDU3130Simple Graphic Manipulations I

• Rosanna Chan

2
Multimedia Elements

• Multimedia elements include

Digital Video
Digital Audio
Text
abvdefghij Klmnopqrst uvwxyz
Multimedia
Graphics
Animation
3
Multimedia ElementsGraphics

• Graphics is a digital representation of non-text
  information such as a drawing, chart, or
  photograph.
• It is also called a digital picture or image, and
  contains no movement or animation
• 3 fundamental characteristics of color
• Hue (??)
• Related to the wavelength of light
• Lightness (??)
• Related to the amplitude of light
• Saturation (??)
• Related to the purity of light

4
Multimedia ElementsGraphics

• Pixel
• A pixel is the smallest unit of programmable
  color on a computer display or in a computer
  image
• Every computer graphic is made up of a grid of
  pixels
• There are two types of graphics
• Bitmap graphics
• Vector graphics

5
Multimedia ElementsGraphics

• Bitmap Graphics
• Bitmap is a representation of a graphics image
• Consists of rows and columns of dots
• The value of each dot (whether it is filled in or
  not) is stored in one or more bits of data
• Simple monochrome images use one bit to
  represent each dot

6
Multimedia ElementsGraphics

• Bitmap Graphics
• The more bits used to represent a dot, the more
  colors and shades of gray that can be
  represented

1-bit image, 2 color black or white

8-bit image, 256 colors (28256)
24-bit image, 16777216 colors (true color)

7
Multimedia ElementsGraphics

• Resolution
• Determines how sharply the image is represented
• Expressed in dot per inch (dpi), or simply by the
  number of rows and columns, such as 640 by 480
• Bitmap graphics suffer distortion in image
  quality when being scaled up, this does not
  happen in case of vector graphics

Vector graphic
Bitmap graphic
8
Multimedia ElementsGraphics

• Vector Graphics
• Vector graphics are based on mathematical
  formulas that represent curves and lines
• Very smooth looking and can easily be resized
  without loss of image quality

9
Multimedia ElementsGraphics

• Formats
• A format is a standard specifying how the data is
  arranged
• For bitmap graphics
• BMP
• GIF
• JPEG
• For vector graphics
• EPS
• WMF

10
Multimedia ElementsGraphics

• Formats
• BMP (.bmp)
• Microsoft's native graphic file format
• GIF (Graphic Image Format) (.gif)
• Only supports 256 colors therefore the file
  sizes can be kept small. GIF works best when the
  number of colors within an image is small
• JPEG (Joint Photographic Experts Group) (.jpg)
• Supports millions and allows for graphic
  compression. Most people use JPEG for Web
  graphics that contain a multitude of colors and
  gradations - like photographic images
• EPS (Encapsulated Postscript) (.eps)
• For image attached within a PostScript language
  document
• WMF (Windows Metafile Format) (.wmf)
• For exchanging graphics between Microsoft
  applications such as clipart in Microsoft Office

11
Multimedia ElementsGraphics

• Vector Graphics
• An example of vector graphic is the clipart in MS
  PowerPoint
• When you enlarge a clipart image, it will not
  distort

12
Multimedia ElementsGraphics

• GIF versus JPEG
• When the number of color of an image is large,
  JPEG performs better

JPEG format, 6k bytes
GIF format, 13.5k bytes
13
Multimedia ElementsGraphics

• GIF versus JPEG
• When the number of color of an image is small,
  GIF performs better

JPEG, 5.4 bytes
GIF, 1.5k bytes
14
Multimedia ElementsComputer-based Animation

• Literally, To animate something means to bring
  it to life
• An animation covers all changes that have a
  visual effect (e.g. position, color)
• Displaying a series of still graphics creates an
  animation, which is cause by the illusion of
  motion
• Techniques Used
• Input Process
• Drawings must be digitized (e.g. scanned) to
  create key frames, where the entities being
  animated are at extreme or characteristic
  positions.
• The drawing may need to be carefully
  post-processed (e.g. filtering) in order to clean
  up any glitches arises from the input process

15
Multimedia ElementsComputer-based Animation

• Techniques Used
• In-between Process
• Intermediate frames are insert between key frames
• Interpolation methods is used
• The computer obtain only the beginning and end
  positions, and fill-in the intermediate positions
• Color changes is achieved by the Color-Look-Up
  Table (CLUT) of the graphic memory

Frames Interpolation
CLUT
16
Multimedia ElementsComputer-based Animation

• Methods of Creating Animation
• Digital animation is based on the flipbook
  approach a sequence of images is compressed and
  then played back to convey a sense of motion
• The playback rate is the number of images
  displayed per second when the animation is being
  viewed
• To effectively create the illusion of motion, the
  playback rate of animation must be at least 24
  frames per second
• An image is said to Flicker when the illusion of
  motion fails and the animation appears as a rapid
  sequence of still images instead of a fluid
  object in motion

17
Multimedia ElementsComputer-based Animation

• Frame-Based Animation
• Also called cell animation
• Key frames that describe key events in the
  timeline of the animation are created on cells or
  frames
• Tweening (the process of filling in the frames
  between the key frames) is used to make the
  animation appear smooth
• Morphing is a special technique that uses frames
  to create the illusion of one object changing
  into another (also called shape-tweening)

18
Multimedia ElementsComputer-based Animation

• Path-Based Animation
• Also called vector animation
• Creates animated objects by following an objects
  transition over a line or vector
• The artist creates only one drawing and a path,
  then the computer manipulates this object by
  drawing the frames as the object travels over the
  path
• Computational animation allows an object to be
  moved across a screen by varying its x and y
  coordinates

19
Multimedia ElementsComputer-based Animation

• Script-Based Animation
• Script-based animation is created using
  programming languages
• LINGO
• The programming language included in Macromedia
  Director
• Is an object-oriented scripting language that
  extends Directors build-in capability
• JAVA
• Java applets can be used to create advanced
  animated objects
• Java enable computational animation it can react
  to external input
• Examples http//fractal.leet.net.au/page.php?page
  funkyapplets

20
Multimedia ElementsComputer-based Animation

• Animated GIFs
• Animated GIFs are a special kind of GIF file
  known as GIF89a
• An animated GIF file stores multiple images as
  separate blocks within a single GIF file
• When being viewed on the Web, the multiple images
  are streamed (played back one at a time)
• Streaming the viewer does not have to wait for
  the entire GIF to be downloaded before it begins
  running on a Web page