Graphics Hardware by jennyyingdi



Graphics and Sound

You don't speak in a digital signal. A digital signal is a language of 1s and 0s that can be
processed by mathematics. We speak in real-world, analog signals. Analog signals are
real world signals that you and I experience everyday - sound, light, temperature, and
pressure. A digital signal is a numerical representation of the analog signal. It may be
easier and more cost effective to process these signals in the digital world. In the real
world, we can convert these signals into digital signals through our analog-to-digital
conversion process, process the signals, and if needed, bring the signals back out to the
analog world through the digital-to-analog converter.

Digital Signal Processors
A digital signal processor (DSP) is a type of microprocessor - one that is incredibly fast
and powerful. A DSP is unique because it processes data in real time. This real-time
capability makes a DSP perfect for applications that cannot tolerate any delays. For
example, did you ever talk on a cell phone where two people couldn't talk at once? You
had to wait until the other person finished talking. If you both spoke simultaneously, the
signal was cut--you didn't hear the other person. With today's digital cell phones, which
use DSP, you can talk normally. The DSP processors inside cell phones process sounds
so rapidly you hear them as quickly as you can speak - in real time. Here are just some of
the advantages of designing with DSPs over other microprocessors:

Graphics Tablets
NISIS Graphics Tablets provide an intuitive, cordless, Radio Frequency pen-type
pointing device for use with drawing, painting, graphics, CAD and photographic
applications. NISIS Graphic Tablets also offer a free non-mechanical and cordless, Radio
Frequency mouse. Having no moving parts, these mice do not suffer from the frustrating
problem that mechanical mice experience when the internal rollers become dirty, leading
to the cursor not moving when the mouse is moved.
The active area on the NISIS Graphics Tablets is covered with a transparent lift-up film
so you can slide in photographs or drawings and trace images with the pen.
The pen can detect up to 512 levels of pressure that can be used for many different
effects, such as to vary the width of the line you draw, or the density of paint coverage
when using an airbrush type tool.
Bundled with Handwriting recognition software, Annotation software for Microsoft
Word, Signature verification and encryption software and Art Dabbler, a powerful
graphics package, NISIS Graphics Tablets offer the most cost effective solution you will
find in the market today.

Multimedia – Graphics & Sound                                                     Page 1 of 10
Two types of graphics images: Bitmap (Paint-type) graphic and Vector (Draw-type)
There are two different methods of creating and saving graphical images on the
computer. One is called "bitmap" (or "paint") and the other is called "vector" (or "draw").
Although they may appear identical on the computer screen, each stores images in
different manner that affects how you create the image and what you can do with it.
A bitmap graphic expresses an image strictly in the collection of dots. Each dot can be in
different colors. The number of colors varies from two (i.e. black or white) to millions
depending on settings. Realistic photographs are good examples of bitmap graphic
expressed in thousands of colors. To help understand what bitmap graphic is, you might
want to draw an analogy between bitmap graphic and impressionist paintings such as the
ones by Monet since both express images in small dots. (The size of dots is obviously a
lot smaller in the case of computer.)
On the other hand, vector graphic expresses image in the collection of objects. An object
can be a circle, square, triangle, or a more elaborated shape in different colors, and they
are all stored in the form of mathematical functions inside the computer. Because each
object is expressed in mathematical function, objects can be enlarged without jugged
lines. (If you enlarge bitmap graphics, lines invariably become jugged.) Combining
different objects and laying them on top of each other can create a complex image. A
vector graphic is like a picture you create by arranging pieces of colored paper that have
been cut in different shapes.
By using these types of graphics, you can create props for communicative activities such
as information gap activities and find-difference activities, cue cards for vocabulary,
graphics for quizzes and tests, etc. It first takes more time to create graphics on the
computer than with pen and a copying machine. However, once stored electronically, the
same graphics be used repeatedly and can easily be modified. we will use black-&-white
line drawings as our examples. They are simplest kind of graphics, yet very useful. Also,
file sizes can be kept small when they are stored.
 Let’s compare the tools for paint and those for draw. First, in draw, an eraser is non-
existent because you can only manipulate objects. You can delete an entire object, but not
modify a part of it. Second, paintbrush, paint bucket, and spray can tools are not available
in draw. Third, tools to create an enclosure such as circle and rectangles can be set to fill
the shape in colors. So, it is possible to achieve similar effect to paint bucket. Fourth, text
(or text field) is treated as an object.
The following face of cat is a combination of an oval, triangle, circles, line, and free hand
line. Each component is an object and can be moved freely without affecting others.
However, it is more convenient to group more than one object together such as eyes,
mouth or even an entire face. Draw program provides a function called "group/ungroup"
to achieve this. A grouped object behaves as a single unit. Objects are ordered according
to the order of creation. A new object goes on top of other objects. Since each object is

Multimedia – Graphics & Sound                                                       Page 2 of 10
independent, an object on top does not affect the object underneath. This is a major
difference between paint and draw. It is possible to change the order of objects.

By using these graphics, you can create props for communicative activities. These can be
information gap activities and find-difference activities, cue cards for vocabulary,
graphics for quizzes and tests. Etc. It takes more time to create these graphics than with
pen and a copying machine, however, once stored electronically the same graphics can be
used repeatedly and can be easily modified.

Graphics Hardware
Display hardware contains the circuitry used to hold the graphic image and convert it to
analog signals to be sent to the monitor. The capabilities of the display hardware
determine the colour resolution. Display hardware might accommodate colours at 640 x
480, 256 colour at 800 x 600 and 16 colour at 1,024 x 768.

Display hardware can be part of the computer’s motherboard or take the form of a board
residing in a card slot. The Macintoshes have built-in motherboard graphics with at least
8-bit colour depth. Windows PCs use add-in cards. SVGA (super video graphics adapter)
cards offer a vast number of choices in terms of enhanced resolution and colour depth.

Speed is a major consideration in multimedia graphics display. Many cards now offer
graphics coprocessors designed specifically to quickly crunch through image data.

All monitors are not created equally. Physical size (measured diagonally) is the most
noticeable difference comes in 14”, 15”, 17”, etc. Unlike television screens larger
monitors display more information rather than just making the image larger.

Manufacturers offer different screen qualities. More expensive monitors offer more
sophisticated colour control correction controls especially useful when the display is to be
used for print production as well as multimedia.

Scanners are used to digitize existing photos and artwork into the computer. Hand-held
scanners are not well suited for production work. Flatbed scanners are the most common
and accommodate flat reflective art in much the same way as a photocopier. Typical
flatbed offers 24-bit colour depth at 300-dpi minimum. A higher resolution is necessary
for sophisticated print production or you wish to acquire the highest quality from the
source material.

Still-Image Digital Camera
Digital cameras employ the same basic technology as camcorders to acquire images, but
instead record still images to memory or disk. From there the images can be transferred to
the computer for use with an array of programs. The advantage is instant access to

Multimedia – Graphics & Sound                                                    Page 3 of 10
pictures without waiting developing and scanning. Other cameras can be used and the
picture when developed by a photo shop, the image is saved on a diskette or CD-ROM.

Graphics Tablets
Tablets provide an alternative input to the mouse when creating and editing graphics. The
tablet’s surface is responsive to the positioning of a pen-like stylus, allowing the user
more control in creating expressive strokes with paint and image processing software.

DSP Cards
DSP cards have special DSP (digital signal processor) chips on them that can accelerate
certain processing intensive tasks. Custom software drivers must be written by
application manufacturers in order to divert these tasks to the DSP and perform them.

Graphics Software
Tools that allow developers to create and edit all graphic elements used in the multimedia
titles. The most basic programs are those that come bundled with the operating system,
for example Microsoft Paint.

Image processing software are the digital equivalent of the photographer’s darkroom.
Selection tools are incorporated that are designed for isolating specific portions of photo
realistic images for further manipulation. Basic operations akin to those of the darkroom
include adjusting brightness, contrast, density, colour balance, saturation, cropping, and
rotation. They also excel at selective composting of multiple images including the use of
transparency and masks.

Image Editing Programs
Useful in making changes, such as changing the brightness or contrast or applying
textures or patterns to existing images. For example, PhotoShop.

Paint Software
Paint software is designed to provide the tools for computer graphics staples such as
lines, circles, rectangles, polygons and freehand strokes, complete with colour fill.

Drawing and Illustration Software
Differs from Paint software in that each element created retains it own identity. That
means that the object created can be manipulated without affecting the rest of the image.

Drawing Programs
Used to create draw-type (vector) graphic images. Provide for freehand as well as
geometric shapes. Useful in creating designs where precise dimensions and relationships
are important. Draw programs (CorelDraw) are typically designed for generic use with
on-screen graphics and desktop printers. (Drawing programs create graphics for desktop

Multimedia – Graphics & Sound                                                    Page 4 of 10
Paint Programs
Used to create paint-type (bitmap) graphic images. Useful in creating original artwork
because they provide the tools (brushes and pens) used by artists. Illustration Programs
(Adobe Illustrator) are typical examples used to create original art in PostScript format.

Graphics Conversion Software
Transform a graphics file from one format and/or platform to the desired one. Some
image processors input and output a reasonable number of graphics formats.

Program Features
In deciding which programs to use the developer must look at:
    - The type of images the program will support and if it is primarily for paint or
        vector images
    - Cross platform compatibility (Can it create graphics that can be used on both
        Macintosh and Windows-based computer)
    - File format supported (Does it allows saving and/or converting graphic images
        using the more popular file formats?)
    - Support object layering (Including more than one bitmap in an image and to edit
        each bitmap independently of the others)
    - Image enhancement (provide painting tools to allow for retouching the image)
    - Selection tools (allow for selection of any portion of the image using a freehand
        tool and to add special effects to your image)
    - Colour adjustments (allow you to adjust colours by selecting from a wide range of

Clip Art and Stock Photography
Often the cost and skills associated with creating the requisite elements of a production
are prohibitive. Designers and producers rely on canned clips and media that are readily

Stock photography has a similar story.

Type, like graphics can take on different forms in multimedia. A very important
consideration when using type is that in many instances the type that is seen on the screen
is actually a graphic image. If you are producing a product that will be sent to others you
must ensure that what you distribute will work on other machines. In order for your
presentation to display correctly on other computers those systems must contain the same
type style. If not then the type will be substituted for a different type style which might
cause an undesirable effect.

Multimedia – Graphics & Sound                                                    Page 5 of 10
What works best is to make your typeface a part of the screen image. The benefit of this
is that the it is not subject to dependence on a specific type being present on the computer
in order for it to display well on the screen.

Interactivity means that the user takes control of the media and the options presented to
him or her. By doing this the user can seek specific and direct information without going
through other data that may not be relevant to his information quest.
In interactivity the program responds to you. In multimedia when you press a button,
something will happen, such as:
         A background or slide will change
         An audio or video clip will play
         A transition will happen
         You can either enter or exit the presentation

Multimedia interactivity is not only critical it is mandatory to the process. Multimedia
depends on developing a user interface that has a pleasing look and intuitive feel, enticing
the user to become involved, once the user gets there however, he needs to know where
to begin and how to carry on. It is important that the user interface be based on a common
sense approach that user automatically know how to use the product at first glance.

                            Draw-type Vector)                   Paint-type (Bitmap)
      Advantages            Ability to resize and rotate an     Produces photo quality
                            image without distortion of the     images
                            Smaller file size
      Disadvantages         As complexity increase the file     Large image size
                            size increase
                            Cannot be displayed in photo
                            Poor image quality
      Best Used             For graphic images that need to     For quality photographs
                            retain distinct lines when their
                            sizes change, for example a
                            company’s logo.

Graphic image file size can become unproductively large as complexity increases. The
designer must balance the need for quality with keeping the file size as small as possible.
The smaller the file size the less time required for download and display on the screen.

Screen Resolution: Measured in horizontal and vertical pixels with 640 x 480 being the
lowest standard. The larger the pixel count and the smaller the diameter are, then the
higher the image resolution. A screen resolution of 1024 x 768 will display a much better
quality image than a screen resolution of 640 x 480 on the same monitor.

Multimedia – Graphics & Sound                                                    Page 6 of 10
Image size: Determined by the number of pixels making up the image. The screen
resolution and the image size determine how much of the screen is occupied by the
                      Example,       Image size           640 x 480
                                     Screen Resolution: 640 x 480
                                                          = 1 entire screen

                       Example,       Image size            320 x 240
                                      Screen Resolution:    640 x 480
                                                            = ¼ screen

Colour Depth:         Each pixel can display from one colour to millions of colours.
                      Various numbers of colours can be associated with each pixel
                      depending on the number of bits specified.
                      4-bit = 16 colours (24 = 2 x 2 x 2 x 2 = 16)
                      8-bit = 256 colours (28 = 256)
                      16-bit = 65,000 colours and
                      24-bit = 16.7 millions
The range of colours available for pixels is called the colour depth.

File size:      The file size of a bitmap image is related to the image size, and colour
depth. Calculated using the formula:
        File size = (image size in pixels x colour depth in bits) / 8
        Example, given than an image is 640 x 480 pixels with a colour depth of 8 bits,
        then the file size is 640 x 480 x 8 / 8 = 307,200 bytes or 307.2 Kbytes.
        The more colours, the higher the image quality and the larger the file size.

                            Using Graphic Images on the Web

The time to download an image from the web depends on the file size and the modem
speed. Files are normally loaded from top to bottom. Calculated by using: file size /
(modem rate x 8)
For example, a file size of 560 Kbytes using a modem of 56 Kbits/sec would take
                         560          10 seconds
                       56 * 8          8
                       = 1.25 seconds

File Compression:      Process that reduces the file size of a graphic image and therefore
                       reduces the download time to the user’s computer. Files are
                       compressed before they are sent to the user’s computer and
                       decompressed before they are displayed. The standard file formats
                       for the Web, (GIF, JPEG and PNG) are automatically compressed
                       when they are created. The compression ratio varies from one
                       format to another.

Multimedia – Graphics & Sound                                                   Page 7 of 10
       ·   GIF is the prevalent graphic file format for images, both illustrations and
           photographs, on the Web. GIF compression ratio is an average of 4:1
       ·   JPEG is used when still photographic images are digitized. JPEG compression
           ratio is from 10:1 to 100:1
       ·   PNG is a relatively new bitmap graphics file format that is similar to GIF.

Compression Techniques:
  1. Analyzing the image and noting repeating patterns. Repeated patterns are reduced
     to a single unit.
  2. Loading the image in stages. First a faint image which gets brighter as loading is
     completed. This approach gives the user an idea of the image’s contents and
     allows him/her to wait for the entire image to appear.
  3. Thumbnail: Display a small version of the larger image that are both linked. Can
     display the larger image by clicking on the thumbnail version.
  4. File size is a function of the image size, quality and colour. These factors can be
     adjusted using an image-editing program. It is important to start from the best
     quality image possible.

In the early days of desktop computers the only sound that you heard was a beep
followed by an error message. Now an entire range of sounds can be displayed through a
computer, including music, narration, sound effects and original recording of events. The
element of sound is fundamental to multimedia.

What are Sound Waves?
Vibrations created when we speak.
Sound wave patterns are called analog wave pattern. The pattern has two attributes that
affect how you work with sound on a computer.
Volume:        the height of each peak. The higher the peak the louder the sound.
Frequency:     the distance between the peaks.
               The greater the distance the lower the sound.

For sound to be included in multimedia application, the sound wave must be converted
from analog (sound waves) to digital (bits) form. This conversion is done through a
process called sampling. In sampling every fraction of a second, a sample of the sound is
recorded in digital bits.

Factors affecting quality
a)     The number of times the sample is taken (the sample rate).
       Three most common sample rates are 11.025 kHz, 22.05 kHz and 44.1 kHz. The
       higher the sample size the more samples that are taken and thus the better the
       quality of the digitized sound.

Multimedia – Graphics & Sound                                                    Page 8 of 10
b)      The amount of information stored about the sample (the sample size).
        The two most common sample sizes are 8 and 16 bits. An 8-bit sample allows for
        256 values that are used to describe the sound, whereas a 16-bit sample allows for
        65,536 values. The higher the sample size, the better the quality of the digitized
        sound and the larger the file size.

A sound card and software program are used to digitize the sound. A sound from an
external source is sent to the card. The card sample the sound based on the sample rate
and the bit value and then produces the digital approximation of the analog signal.
Once a sound is digitizes it is easy to be manipulated using a sound-editing program.

Sound files can be saved in several formats. Popular audio file formats include:
·    WAV – developed by Microsoft and IBM that has become widely used for audio on
     the Web.
·    AIFF (Audio Interchange File Format)
·    AIFFC (Audio Interchange File Format Compression)
·    RealAudio (.ra) – A compression sound file developed by Real Networks that allows
     streaming of the sound file over the Web.
·    MP3 (MPEG Layer 3) – A format that compresses large audio file (entire songs) for
     playback on the Web at near stereo quality.

Musical Instrument Digital Interface (MIDI)
MIDI is the standard format that enables computer and electronic musical instruments to
communicate sound information. A MIDI file begins with an event (such as pressing a
key on a MIDI keyboard), and codes the event as a series of commands. This information
is stored as a file, which can be sent from the computer to an instrument such as a
synthesizer, for playback.

Advantage of MIDI
Hundred times smaller than audio files

Requires specialized equipment for recording and playback or a MIDI compatible audio

Primary consideration is the file size.

Streaming Media
A technology that allows audio and video to be played in real time.

Multimedia – Graphics & Sound                                                      Page 9 of 10
A media player must be installed on a computer to stream sound files through the Web.
These players are usually available for free from various download sites. Examples are
RealPlayer, Windows Media Player, MP3 and Quicktime.

Appropriate use            Some sounds are content-related, such as hearing a foreign
                           phrase pronounced. Other sounds are for effect, such as creating
                           a mood or setting a scene. Avoid using sound when there is no
                           compelling benefit.
Quality                    Start with the highest quality sound available and reduce file
                           size by converting to a compressed format.
Cost Consideration         When recording audio files, investing in high-end equipment
                           can prove worthwhile.
Alternative methods        Consider using sound and still images as an alternative to video
                           to reduce file size.
Streaming                  Considering streaming large audio files
User control               Provide a way to give the user some control over the audio.

Multimedia – Graphics & Sound                                                  Page 10 of 10

To top