Top Banner
P REREQUISITES This course is part of Information Technology program (B.Sc. (IT)) of Kuvempu University. A student registering for the fifth semester of B.Sc. (IT) of Kuvempu University must have completed the fourth semester of B.Sc.(IT). The student should have attained the knowledge of the following modules: Algorithms Java Programming Unix & Shell Programming Software Engineering ©NIIT Coordinator Guide – Graphics and Multimedia 1
66
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Graphics and Multimedia

PREREQUISITES

This course is part of Information Technology program (B.Sc. (IT)) of Kuvempu University.

A student registering for the fifth semester of B.Sc. (IT) of Kuvempu University must have completed the fourth semester of B.Sc.(IT). The student should have attained the knowledge of the following modules:

Algorithms Java Programming Unix & Shell Programming Software Engineering

©NIIT Coordinator Guide – Graphics and Multimedia 1

Page 2: Graphics and Multimedia

CHAPTER-SPECIFIC INPUTS

Chapter One

ObjectivesIn this chapter, the students have learned to:

Identify the need for computer graphics Discuss the history of computer graphics Identify the applications of computer graphics

Focus AreasIntroduce computer graphics as a revolutionary development in the field of computer sciences. Tell the students that William Fetter invented the term computer graphics in 1960. Explain the term computer graphics followed by the history of computer graphics hardware.

Conduct an open discussion on the applications of computer graphics. You may discuss the applications of computer graphics discussed in the Additional Inputs section.

Next, discuss operating system support for graphics. Finally, discuss programming language support for graphics. Inform the students that they will learn to use C programming for creating graphics as a part of this curriculum.

Additional InputsThe following section provides some extra inputs on the important topics covered in the SG:

History of Computer Graphics - Interesting Facts

The following table lists the various events in the history of computer graphics:

Event Year

First computer animation film 1961

First video game – Spacewar 1961

First computer model of a human figure 1964

First home video game named Odyssey, which allowed users to move points around a screen

1966

Fractals

Most graphic packages allow you to create simple graphics using lines, polygons, and curves easily. However, these basic tools cannot help you in creating clouds, trees, or for that matter the jazzy patterns in the AVS used in audio software such as Winamp or the latest Windows Media Player. Such real-life or complex patterned graphics are implemented using the concept of fractals.

Fractals are mathematically generated patterns, which are produced by recursive implementation of self-similar pattern at varying scales within itself. For example, fractals can be implemented to create a tree from a small leaf with a tiny stem under it by infinite recursions of the same pattern (mathematical function).

2 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 3: Graphics and Multimedia

A well-known fractal named after its inventor, Benoit Mandelbrot, is the Mandelbrot set. Mandelbrot discovered the concept of fractals when he wrote a program to run a mathematical formula (dealing with fractional dimensions such as 1.2 dimes ions) recursively on an IBM computer. The output was a pretty pattern.

Applications of Computer Graphics - Geographical Information Systems (GIS)

GIS is a software system through which you can capture, store, and manipulate geographical information and display it in various forms. Geographical information (spatial data) has always been better understood through pictures rather than numerical data. GIS depicts geographical information pictorially, in the form of maps. Consequently graphics form an inevitable part of GIS.

Applications of Computer Graphics - Computer Aided Design (CAD)

CAD is the use of computers for creating engineering drawings used in various fields such as architecture, and civil engineering. CAD has been a boon for engineers, who can now use graphical tools for CAD, such as AutoCAD, and create, manipulate, and share engineering drawings with ease.

OpenGL

OpenGL is a known and highly used Application Programming Interface (API) for creating 2D and 3D graphics, which has become a de-facto industry standard. It is an easy to use, reliable, and portable graphics development environment, which is compatible with popular programming languages such as C, C++, and Java.

You can download various applications made using OpenGL at its official site, http://www.opengl.org. For example, to download games made in OpenGL visit http://www.opengl.org/applications/windows/games/.

Solutions to Chapter One Questions1. What is the need for computer graphics?

Ans.

Graphical communication is an old and more popular method of exchanging information than verbal communication and is more convenient when computers are utilized for this purpose.

As the volume of information increases, problem of storage arises. Also, in the 21st century people do not have time to read huge number of pages. This problem was solved by computer graphics. This can be clearly understood with the help of an example where we want to present the performance of a factory since 1980. For this, we require a number of pages to render this large volume of information related with financial, numerical and statistical information. It will take a lot of time to analyze such a long report. We can easily represent this data in a pictorial form thus making it simple to understand. Pictures can represent a huge database in the form of bar charts, pie charts, and so on.

Two other prominent applications of graphics are in the field of Computer Aided Design (CAD) and Computer Aided Manufacturing (CAM). In CAD, graphics techniques are used to produce the drawings of certain parts of a machine from any viewing angle. In CAM computer graphics techniques, one may display the manufacturing layout for a given part and trace the path taken by machine tools for a given manufacturing process.

©NIIT Coordinator Guide – Graphics and Multimedia 3

Page 4: Graphics and Multimedia

2. Define computer graphics and Interactive computer graphics?

Ans.

Computer graphics can be defined as the use of computers to define, store, manipulate, interrogate, and present pictorial output of the data.

Interactive computer graphics refers to devices and systems that facilitate the man-machine graphic communication.

3. Briefly, narrate the history of graphics hardware technology?

Ans.

In early days, the high cost of the hardware for computer graphics remained the obstacle, which prevented their widespread use. Computers have been getting progressively more inexpensive and it has become a household article these days. The microelectronics revolution and the subsequent reduction in the price of the digital hardware have completely changed the situation. Due to this price reduction, it is now realistic to expect that all computers with graphic display hardware capability will be making extensive use of computer graphics.

The announcement of the IBM personal computer using 16-bit Intel 8088 microprocessor on August 12, 1981, can be regarded as a historic event, which had a profound effect in the world of computers. These computers significantly improved the state of display technology in the world of computers.

The next major change in PC display technology was announced by Apple Company in 1984, when it introduced the Macintosh PC. It was the first PC that did not include a text-based display but provided only a graphic display. The application programs developed for the Macintosh advocated WYSIWYG (What You See Is What You Get) style of interface. This concept has become a basic requirement in the area of desktop publishing (DTP). The PowerPC's from IBM, Apple, and other vendors created a new standard for DTP computers. With such a development, computer graphics and multimedia has become a necessity for all types of users.

4. How to make graphics processing faster?

Ans.

Video/Graphic processing can be made faster in two ways: by using a graphic co-processor and a graphic accelerator. The graphic co-processor boosts video performance by assuming tasks normally handled by the CPU. An accelerator takes control of graphic task, which are otherwise performed by the CPU. However, an accelerator is not programmable. It is a functioned processor, which caries out specific tasks hard-coded into the chip.

5. What is graphics processor? Why it is needed?

Ans.

Graphics processor helps in managing the screen faster with an equivalent software algorithm executed on the CPU. Through the use of these processors certain amount of parallelism can be achieved for executing graphic commands. Several manufacturers of personal computers use a proprietary graphics processor.

6. Name some graphics processors.

Ans.

Some graphics processors are:

Intel 82786 Texas Instruments 43010

4 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 5: Graphics and Multimedia

7. Justify the statement "Windows OS is so popular"?

Ans.

The Windows OS is popular because it supports a graphical user interface (GUI), in which users can perform operations with the help of graphical objects such as windows and buttons. Apart from an intuitive GUI, it supports various other features such as support for integrated application environment, multitasking, multimedia, and networking.

8. What are the strengths of UNIX operating system?

Ans.

The Unix operating system has been known and popular as a simple, small, portable, powerful, time-sharing operating system. However, now it has also gained commercial strength. It is still the most portable and configurable of all operating systems. Unix has adopted to the new hardware architecture and application requirements by incorporating new functionalities such as distributed file system, X11 base GUIs, Multi threading, distributability and so on. Unix became quite popular within Bell Labs.

9. What is a pixel?

Ans.

Pixel may be defined as the smallest size object or color spot that can be displayed and addressed on a monitor.

10. Give the different applications of Computer Graphics.

Ans.

Computer graphics is used in every field. Some of the major application areas are:

a. Building design and construction

b. Electronic Design

c. Mechanical Design

d. Entertainment and Animation

e. Aerospace industry

f. Medical Technology

g. Cartography

h. Art and Commerce.

11. Name the Computer languages that support Computer Graphics.

Ans.

Some languages that support computer graphics are:

a. FORTRAN

b. BASIC

c. PASCAL

d. C

©NIIT Coordinator Guide – Graphics and Multimedia 5

Page 6: Graphics and Multimedia

12. Why C language is popular for graphics programming?

Ans.

C has become a choice for today's professionals, developers for graphics programming. C is a structured language and is rich in expressive power and applicable to a wide variety of users. Because of the rich set of graphical functions available, this language helps in designing for graphical applications. The C code is small, fast, portable, and flexible.

FAQ1. What are real time computer graphics?

Ans:

Real time graphics deal with producing images in real time. An example of real time graphics is creating scenes for video games. They are used in simulating real life actions. For this reason they are used extensively in the entertainment industry.

2. What is Computer-Generated Imagery (CGI)?

Ans:

CGI is the application of computer graphics for creating special effects. A common use of CGI is in creating action effects or crowd in movie shoots.

3. Give some of the features of Windows OS.

Ans:

Some of the features of Windows OS are:

Easy-to-use GUI Multitasking Integrated application environment Extensive hardware support Networking Device independence DOS compatibility

4. What is meant by CGM?

Ans:

The mechanism called CGM (Computer Graphics Metafiles) provides for the exchange of pictures between applications. It supports bitmap facility for the creation and manipulation of graphics images.

6 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 7: Graphics and Multimedia

Chapter Two

ObjectivesIn this chapter, the students have learned to:

Describe graphics hardware components and software packages Define interactive graphics Compare raster and random display systems Use graphical input devices and interactive techniques Identify graphical user interface design techniques

Focus AreasIntroduce the term interactive computer graphics to students. Tell them that interactive graphics need special hardware to function. Ask students to identify graphics components that can be used for interactive graphics. Explain the various characteristics of displays, such as aspect ratio, resolution, refresh rate, and interlacing.

Explain the concept of random and raster scanning in displays. Explain the various types of display technologies. Refer to the Focus Areas section and explain the difference between raster and vector images. Initiate a discussion on the comparison between various types of displays.

Additional InputsThe following section provides some extra inputs on the important topics covered in the SG:

Raster vs Vector Graphics

Raster images are stored as pixels. Once created and saved in a raster(bitmapped) form, an image can be edited by altering individual pixels through bitmap creation and editing packages such as Photoshop. However, these images cannot be scaled without losing quality. If you scale a raster graphic it 'pixalates' that is the individual pixels begin to show up and the quality of the image is lost.

Given here are the two versions of the same image - one in normal size and another magnified:

©NIIT Coordinator Guide – Graphics and Multimedia 7

Page 8: Graphics and Multimedia

Unlike raster images, vector or random images are made up and stored as geometric shapes. These can be scaled without loss of quality, and can be easily edited in packages such as Adobe Illustrator. The following image shows an image created and magnified to 3200% in Adobe Illsutrator.

Raster graphics are used commonly on the Web or for normally displaying on computers because in this case the high quality and size of vector graphics is not required. Vector graphics are not suitable for use on the Web, because vector file formats are not widely supported by browsers (except Flash, which is also a vector based format). The high quality vector graphics are more suitable for creating graphics such as logos and brochures, where quality is a prime concern.

In some cases, such as logos where you may want to use the same graphic for the Web as well as printing, you can create a vector graphic and import it as a raster graphic for the Web and retain the original vector format copy also. In this way, you will also be able to make changes to the image easily. This kind of functionality is supported in Illustrator and Photoshop, where you can import an illustrator graphic in Photoshop.

8 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 9: Graphics and Multimedia

Setting Display Properties

Your operating system lets you set the properties of your monitor as required. In Windows, you can set the display properties by performing the following steps:

1. Right-click on your desktop and select Properties from the short cut menu. The Display Properties dialog box opens.

2. Navigate to the Settings tab as shown in the following figure:

3. Select a resolution using the Screen Area slider. The resolutions shown in the slider depends on the size of your monitor. The size of a monitor is specified as its diagonal length. The following table shows recommended size based on the monitor size:

Monitor Size Recommended Resolutions

14 800 X 600

15 1024 X 768

17 1024 X 768 or 1152 X 864

19 1152 X 864 or 1280 X 960

21 1280 X 960

©NIIT Coordinator Guide – Graphics and Multimedia 9

Page 10: Graphics and Multimedia

4. Click the Advanced button. A dialog box opens. Navigate to the Monitor tab in this dialog box as shown in the following figure:

5. Ensure that the Hide modes that this monitor cannot display checkbox is selected. Now, select an appropriate refresh rate from the Refresh Frequency drop-down list. Note that the refresh rates displayed in this dialog box depend on the resolution of your monitor. Refresh frequency is inversely proportional to resolution. That is, higher resolutions support low refresh rates. For example, the following snapshots show the Refresh Frequency options available for a 15" monitor at 800 x 600 resolution and 1024 X 780 resolution:

10 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 11: Graphics and Multimedia

6. Click OK in the dialog box to apply the selected refresh rate and then click OK in the Display Properties dialog box to close it and apply the settings.

More Display Characteristics

Apart from resolution, refresh rate, and aspect ratio, some other characteristics of monitors include:

Viewing angle: It is the maximum angle at which you can view a monitor's display without any reduction in brightness or color of the image. Most CRT monitors support a viewing angle of 1800. That is, even when you are standing at an angle of 180 degrees to a CRT monitor, you can view it without any loss of color of brightness. However, if you try viewing a laptop from an angular position, you will see the display darker than when you view it from the normal position of 90 0. LCD displays do not support good viewing angles.

Dot pitch: It is the distance between the phosphor dots on a monitor, which have the same color. This distance is measured diagonally and expressed in millimeters. It is desirable to have a low dot pitch for sharper image display.

Pixel pitch: It is the distance between the centers of two adjacent pixels, usually expressed in millimeters.

Contrast ratio: It is ratio between the brightest white and darkest black in a monitor. It is evaluated as:Brightness at the center of the monitor when all pixels are whiteBrightness at the center of the monitor when all pixels are black

Response time: It is a characteristic of LCD monitors, which is related to the frame rate of the LCD monitor. A high response time means that the monitor can display full motion movies without any problems. This characteristic does not apply to CRT monitors because they have the capability of displaying full motion video without any problems.

Solutions to Chapter Two Questions1. Compare the merits and demerits of raster and random scanning system.

Ans.

1. In raster scan display, the electron beam is swept across the screen, one row at a time from top to bottom. Random scan monitors draw a picture one line at a time and so they are also referred to as vector displays.

2. Refreshing on raster scan display is carried out at the rate of 60 to 80- frames per second. Refresh rate on a random scan system depends on the number of lines to be displayed.

3. The picture definition is stored in a memory area called refresh buffer or frame buffer in case of a raster scan display. In case of random scan display, picture definition is stored as a set of line-drawing commands in an area of memory referred to as the refresh display file. Refresh display file is also called the display list, display program, or the refresh buffer.

2. Define pixel, resolution, and aspect ratio.

Ans.

Pixel can be defined as the smallest size object or color spot that can be displayed and addressed on a monitor.

Image resolution refers to pixel spacing that is the distance from one pixel to the next pixel.

The aspect ratio of the image is the ratio of the number of X pixels to the number of Y pixels. The standard aspect ratio for PC’s is 4:3 and some use 5:4.

©NIIT Coordinator Guide – Graphics and Multimedia 11

Page 12: Graphics and Multimedia

3. Explain the principle of drawing pictures on CRT.

Ans.

In CRT, an electron gun produces a stream of electrons. This electron beam can be switched on/off through a heating system. The electron beam is focused towards the phosphor coated screen. The point where the beam hits the screen becomes phosphorent and produces a speck of light. A pair of focusing grids, focus the beam to a particular point on the screen. The grid controls the focusing with the help of magnetic/electric fields. In this way a whole picture can be drawn by illuminating the points on the screen.

4. Explain briefly the working principle of Shadow mask CRT.

Ans.

The Shadow Mask CRT is based on the principle of combining the basic colors - red, green and blue. The shadow mask CRT, instead of using one electron gun, uses three different guns placed adjacent to each other to form a triangle or a "Delta". Each pixel point on the screen is made up of three types of phosphors to produce red, blue, and green colors. Just in front of the phosphor screen, is a metal screen, called a "shadow mask". This plate has holes placed strategically, so that the beams from the three electron guns are focused on particular color- producing pixel only.

Now, unlike the beam penetration CRT’s, the acceleration of the electron beam was being monitored, one can manipulate the intensity of the three beams simultaneously. If the red beam is made more intense, we get more of red color in the final combination etc. Since fine-tuning of the beam intensities is comparatively simple, we can get much more combination of colors than the beam penetration case.

5. Explain the principle of DVST system.

Ans.

The Direct View Storage Tube (DVST) behaves like a CRT with highly persistent phosphor. Pictures drawn on this screen will be seen for several minutes (40-50 minutes) before fading. It is similar to a CRT as far as the electronic gun and phosphor-coated mechanisms are concerned. However, instead of the electron beam directly writing the pictures on the phosphor coated CRT screen, the writing is done with the help of a fine-mesh wire grid. The grid made of very thin, high quality wire is located with a dielectric and is mounted just before the screen on the path of the electron beam from the gun. A pattern of positive charges is deposited on the grid and this pattern is transferred to the phosphor coated CRT by a continuous flood of electrons. This flood of electrons is mounted by a "flood gun", which is separate from the electron gun that produces the main electron beam.

6. What are the different graphical input interactive techniques?

Ans.

Following are the various graphical input interactive techniques:

a. Positioning

b. Constraints

c. Grids

d. Gravity Field

e. Rubber band methods

f. Dragging

12 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 13: Graphics and Multimedia

7. Why refreshing is required in CRT?

Ans.

When an electron beam strikes a dot of phosphor material, it glows for a fraction of a second and then fades. As brightness of the dots begins to reduce, the screen image becomes unstable and gradually fades out. In order to maintain a stable image, the electron beam must sweep the entire surface of the screen and return to redraw it number of times per second. That is, the screen must be refreshed multiple times in a second.

8. Name the different positioning devices.

Ans.

The various positioning devices are:

Mouse Tablet Joystick Digitizer Light pen Track ball

9. What are pointing devices? Give examples.

Ans.

A pointing device is a hardware peripheral that allows user to point to objects on the screen and perform operations on them, such as selecting, clicking, moving, and dragging. Mouse is an example of pointing device.

10. Explain the working principle of Mouse.

Ans.

A mouse is a small handled box used to position the screen cursor. It has two wheels at right angles to each other. Each of these wheels is connected to the shaft encode. For every incremental rotation of the wheel, an electrical signal is produced by the shaft encode. As the device is moved on a flat surface, the movement is coded in the x and y directions by counting the number of pulses received from the shaft encoder. These values are held in separate registers and the computer can sample them at a suitable rate. The device can, therefore, be used for a moving cursor around the display screen.

11. Explain the working of Light pen along with a diagram.

Ans.

Light pen has a very simple working. Every pixel on the screen that is a part of the picture emits light. All that the light pen does is to make use of this light signal to indicate the position. A small aperture is held against the portion of the picture to be modified and the light from the pixels falls on a photocell, after passing through the aperture. This photocell converts the light signal received from the screen to an electrical pulse to be sent as a signal sent to the computer. Since the electrical signal is rather weak, an amplifier amplifies it before being sent to the computer.

A "tracking software" keeps track of the position of the light pen always. Through the use of the tracking software, a signal received by the light pen at any point indicates the portion of the picture that needs to be modified.

Note that, when the pen is being moved to its position, to the position where the modification is required, it will encounter various other light sources on the way. These light sources should not trigger the computer to accept the signal. So the aperture of the light pen is normally kept closed till the final position is reached, and then it can be opened by a switch.

©NIIT Coordinator Guide – Graphics and Multimedia 13

Page 14: Graphics and Multimedia

12. If we use 3 bits for primary colors how many different colors are possible?

Ans.

8 colors are possible.

13. How many different choices are possible if we use 24 bits per pixel?

Ans.

16.7 million (224) colors.

FAQ1. Some portable computers have high quality, evenly colored, perfectly flat displays. Are these LCD displays?

Ans:

These could be flat panel displays called Gas Plasma displays, which use neon bulbs.

2. What is SVG?

Ans:

Scalable Vector Graphics (SVG)is an XML based language for describing 2D vector graphics. It is being viewed as the standard for describing vector graphics on the web in the future. However, currently many browsers do not support it.

3. Should the resolution of an image be changed as per the monitor resolution?

Ans:

When you create images you can set their resolution. The resolution of an image should ideally be between 72 and 96 ppi. However, the exact value should be decided based on the monitor resolution. For example, for a 14 inches monitor with 800 X 600 resolution an image resolution of 76-78 is acceptable. However, for a 21 inches monitor with 1280 X 960 resolution, an image resolution of around 96 is acceptable.

4. What is an appropriate refresh rate, when multiple refresh rates are available for a given resolution?

Ans:

The most appropriate refresh rate is considered to be 72 and 85 Hz.

14 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 15: Graphics and Multimedia

Chapter Three

ObjectivesIn this chapter, the students have learned to:

Create graphics using C functions Create animation using C functions

Focus AreasIntroduce C as one of the oldest but strongest programming languages. Tell the students that C also supports graphics and animation. Although creating an animation using a modern animation package such as Imageready is much easier than writing hundreds of lines of code in C, C forms the foundation of such graphics packages. In fact, students can create a graphics package such as MS Paint themselves using C's support for graphics and knowledge of some additional concepts such as handling the mouse input.

Next, mention the two modes through which graphics and text can be displayed in C language.

Tell the students that the actual graphics and animation is done in the graphics mode. You can explain the basics of the graphics mode referring to the topic, "Creating Graphics in C" from the Additional Inputs section.

Explain the various graphics functions available in C using examples. Take the example of creating a hut. Start by creating a hut simply using the line drawing related functions. Next, explain how to create the same hut using rectangle(), bar(), arc() and other such shape related functions. Now explain the concept of filling images using solid fills or patterns. Again, use the example of the hut to demonstrate the related functions. For practice you could discuss with the class, the creation of the Indian flag or a human face. These examples have been explained at the back of the book.

Finally, explain animation support in C.

Additional InputsThe following section provides some extra inputs on the important topics covered in the SG:

Creating Graphics in C

To write a C program for creating graphics, you must follow the following procedure:

1. Include the graphics.h file in your program.2. Switch over to the graphics mode, which offers the best resolutions using the initgraph() function.

This function initializes the graphics mode. Its syntax is:initgraph(int *driver, int *mode, char *path);

3. As its parameters you must specify the graphics mode such as EGA or VGA (depends on the graphics adapter being used), the graphics driver (a program that interfaces between the hardware and your C program), and path of the graphics driver. To specify the value of the graphics driver parameter, refer to the following table:

Value/Constants

0 or DETECT

1 or CGA

2 or MCGA

3 or EGA

©NIIT Coordinator Guide – Graphics and Multimedia 15

Page 16: Graphics and Multimedia

Value/Constants

4 or EGA64

5 or EGAMONO

6 or IBM8514

7 or HERCMONO

8 or ATT400

9 or VGA

10 or PC3270

Note that during execution with a call to initgraph(), your system switches to the graphics mode and the mouse cursor disappears.

4. Call appropriate functions to create graphics.5. Close the graphics mode using the closegraph() function, when you have written the code for

creating graphics.6. Call the restorecrtmode() to restore the original video mode of your monitor.

Drawing Shapes in C

You have learned about various shape creation functions in the textbook, such as arc() and bar(). If you want to create a rectangle or square boundary without any color inside it, you can use the rectangle() function. The syntax of this function is:

rectangle(int left, int top, int right, int bottom);

To draw a rectangle you must specify the coordinates of its top left and bottom right corner points as the four parameters of the rectangle() function. This function creates a rectangle in the specific line style, thickness, and color, which have been set prior to a call made to this function. If these were not set, the defaults are used.

Note that the bar() and rectangle() functions are different. The bar() function creates a rectangular shape without boundary and fills it in the current fill pattern and color. On the other hand, rectangle() creates a rectangular boundary in the current color and pattern.

While drawing shapes in C programs, it is important to understand the screen coordinate system and the meaning of the parameters that specify the coordinate points of these shapes.

When you switch to the graphics mode, the whole screen becomes a virtual coordinate system according to which the coordinates specified in the graphics function in your programs are determined. Each pixel represents a point in this coordinate system. It is important to identify the position where you want to draw your shapes.

16 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 17: Graphics and Multimedia

As an example, consider the following screen coordinate system in the 640 X 480 mode:

Error Checking Routine

It is a good practice to check for errors when initiating the graphics mode. You can do this using the graphresult() function.

The graphresult() function returns an integer representing the values given in the following table:

Value Constant Associated error message, a string which can be returned by the grapherrormsg()

0 grOk No error

-1 grNoInitGraph (BGI) graphics not installed (use initgraph)

-2 grNotDetected Graphics hardware not detected

-3 grFileNotFound Device driver file not found

-4 grInvalidDriver Invalid device driver file

-5 grNoLoadMem Not enough memory to load driver

-6 grNoScanMem Out of memory in scan fill

-7 grNoFloodMem Out of memory in flood fill

-8 grFontNotFound Font file not found

-9 grNoFontMem Not enough memory to load font

-10 grInvalidMode Invalid graphics mode for selected driver

-11 grError Graphics error

-12 grIOerror Graphics I/O error

©NIIT Coordinator Guide – Graphics and Multimedia 17

Page 18: Graphics and Multimedia

Value Constant Associated error message, a string which can be returned by the grapherrormsg()

-13 GrInvalidFont Invalid font file

-14 GrInvalidFontNum Invalid font number

-15 grInvalidDeviceNum Invalid device number

-18 GrInvalidVersion Invalid version number

You can use the graphresult() function to catch errors as follows:

/* initialize graphics mode */

initgraph(&gdriver, &gmode, "d:\\tc\\bgi");

/* read result of initialization */

errorcode = graphresult();

if (errorcode != grOk) { /* an error occurred */

printf("Graphics error. \n");

grapherrormsg(errorcode);

printf("Press any key to halt:");

getch();

exit(1); /* return with error code */

}

Animating

In the book, a step is missing for implementing animation.

When you call imagesize(), it returns the area of the rectangle bounding the image. Before calling getimage(), you must allocate enough memory so that the image can be handled by getimage() as:

int area = imagesize(25,30,75,75);

unsigned char * buf = malloc(arear);

getimage(25,30,75,75, buf);

The malloc() function allocates as many bytes as specified in its parameter.

18 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 19: Graphics and Multimedia

Solutions to Chapter Three Questions1. Compare the features of text and graphics mode?

Ans.

The following table compares the text and graphics modes:

Text mode Graphics mode

You can only handle text. You can display, capture, and animate figures.

You can display in 16 colors on a color monitor.

You can display various colors.

Text mode display is in two forms, 25 rows of 40 columns or 25 rows of 80 columns.

The resolution of the graphics mode depends on the adapter.

2. With the help of an illustration, explain how initgraph() function works.

Ans.

The initgraph() function is used to initialize the graphics system to load appropriate graphics drive and video mode used by the graphics functions. The syntax of this function is:

initgraph(int *driver, int *mode, char *path)

As its parameters, you must specify the graphics mode such as EGA, or VGA (depends on the graphics adapter being used), the graphics driver (a program that interfaced between the hardware and your C program), and path of the graphics driver.

For example, to initialize graphics mode in CGA high resolution mode:

int gdriver = 1, gmode=4;

initgraph(&gdriver, &gmode, "d:\\tc\\bgi");

For example, to select the best driver and mode possible on a computer:

int gdriver = DETECT, gmode;

initgraph(&gdriver, &gmode, "d:\\tc\\bgi");

3. Use graphics function to draw concentric circles?

Ans.

#include<conio.h>

#include<graphics.h>

# include<stdio.h>

main() {

int gdriver = DETECT, gmode;

/* initialize graphics mode */

initgraph(&gdriver, &gmode, "d:\\tc\\bgi");

circle(100,100,90);

circle(100,100,50);

circle(100,100,30);

©NIIT Coordinator Guide – Graphics and Multimedia 19

Page 20: Graphics and Multimedia

getch();

restorecrtmode();

}

Inform the students that the path “d:\\tc\\bgi” should be changed according to the machine settings. The code given here has been tested on Turbo C 3.0.

4. Develop a C program to draw a structure of a fish and give animation.

Ans.

#include<graphics.h>

#include<stdio.h>

#include<stdlib.h>

#include<conio.h>

#include<dos.h>

void main() {

int gdriver=DETECT,gmode;

int i;

initgraph(&gdriver,&gmode,"e:\\tc\\bgi");

int max_y=getmaxy()/2;

i=0;

setcolor(BLUE);

while(!kbhit()) {

line(0+i,max_y+30,0+i,max_y-30); /*triangle*/

line(0+i,max_y+30,30+i,max_y);

line(0+i,max_y-30,30+i,max_y);

ellipse(90+i,max_y,0,360,60,35);

circle(120+i,max_y-5,5);

i=i+3;

if(i>=635)

i=0;

delay(100);

cleardevice();

}

getch();

closegraph();

}

Inform the students that the path “e:\\tc\\bgi” should be changed according to the machine settings. The code given here has been tested on Turbo C 3.0.

20 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 21: Graphics and Multimedia

5. Develop a C program to draw a car shape and move the car using animation functions.

Ans.

#include<graphics.h>

#include<conio.h>

#include<dos.h>

#include<stdlib.h>

void car_wheel(int x,int y) {

setcolor(WHITE);

setfillstyle(SOLID_FILL,WHITE);

circle(x,y,10);

floodfill(x,y,WHITE);

circle(x,y,25);

}

void car_body() {

car_wheel(50,200);

car_wheel(200,200);

setcolor(RED);

line(25,200,0,210);

line(40,160,70,130);

bar(105,110,125,130);

line(0,160,40,160);

line(70,130,170,130);

line(170,130,200,160);

line(175,200,75,200);

line(200,160,260,160);

line(260,160,260,200);

line(260,200,225,200);

arc(50,200,0,180,25);

arc(200,200,0,180,25);

setfillstyle(SOLID_FILL,RED);

floodfill(150,170,RED);

}

void main() {

int gdriver = DETECT,gmode;

int i;

void *buff;

initgraph(&gdriver,&gmode,"e:\\tc\\bgi ");

car_body();

buff=malloc(imagesize(0,100,270,230));

©NIIT Coordinator Guide – Graphics and Multimedia 21

Page 22: Graphics and Multimedia

getimage(0,100,270,230,buff);

putimage(0,100,buff,XOR_PUT);

i=0;

while(!kbhit()) {

if(i>500) i=0;

putimage(i,100,buff,OR_PUT);

delay(75);

putimage(i,100,buff,XOR_PUT);

putimage(i+5,100,buff,OR_PUT);

delay(75);

putimage(i+5,100,buff,XOR_PUT);

i =i+10

}

closegraph();

restorecrtmode();

getch();

}

Inform the students that the path “d:\\tc\\bgi” should be changed according to the machine settings. The code given here has been tested on Turbo C 3.0.

6. List the different graphics functions along with example.

Ans.

C supports various graphics functions, such as:

line(int x1, int y1, int x2, int y2): This draws a line from position (x1, y1) to (x2, y2)Example: line(10,50,10,100);

bar(int x1, int y1, int x2, int y2): This draws a filled rectangle with diagonal from (x1, y1) to (x2,y2)bar(10,25,100,75)

circle(int x, int y, int r): This draws a circle with center at (x, y) and radius of r.Example: circle(50,50,10)

arc(int x, int y, int start, int end, int r): This draws an arc of circle with the center at (x,y), radius r and start and end specified in degrees to mention the portion of the circle that forms the arc.Example: arc(100,100,0,90,20) draws the first quarter of the circle, arc with center (100,100) and radius 20.

7. What is the use of malloc() function in C.

Ans.

The malloc() function allocates memory for an object. The number of bytes of memory to be allocated is specified as its parameter.

22 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 23: Graphics and Multimedia

8. Explain the use of getimage() and putimage() with examples?

Ans.

The getimage() function captures the image inside the rectangle whose diagonal is defined by (x1, y1), and (x2,y2),where x1, y1, x2, and y2 are the first four parameters of getimage(). The captured image is stored in an array, which is specified as the last parameter of getimage().

For example, to capture a rectangle whose diagonal is defined by (10, 50) and (50, 125), you can use the getimage() function as:

int area = imagesize(10,50,50,125);

unsigned char * buf = malloc(arear);

getimage(10,50,50,125, buf);

The putimage() function copies the image captured using getimage(), starting at location (x, y), where x and y are the first two parameters of this function. The image to be captured is specified as the third parameter. The fourth parameter of this function specifies how the image has to be copied and takes any of the following values:

COPY_PUT or 0, which copies the image as it is XOR_PUT or 1, which performs an exclusive OR between the background pixels and the image

pixels OR_PUT or 2, which performs an inclusive OR between the background pixels and the image pixels AND_PUT or 3, which performs an AND between the background pixels and the image pixels NOT_PUT or 4, which inverts the pixels of the image.

For example, animate a rectangle as it is you can use the COPY_PUT option in putimage:

putimage(10,50, buf, COPY_PUT);

FAQ1. What are the various fill patterns in C?

Ans:

The various fill patterns include:

Pattern Constant Value Description

EMPTY_FILL 0 Background color fill

SOLID_FILL 1 Solid fill

LINE_FILL 2 -------

LTSLASH_FILL 3 /////

SLASH_FILL 4 ///// (thick lines)

BKSLASH_FILL 5 \\\\ (thick lines)

LTBKSLASH_FILL 6 \\\\

HATACH_FILL 7 Hatch fill (light)

XHATCH_FILL 8 Cross hatch fill (heavy)

INTERLEAVE_FILL 9 Interleaving line fill

WIDE_DOT_FILL 10 Dot fill (widely spaced)

©NIIT Coordinator Guide – Graphics and Multimedia 23

Page 24: Graphics and Multimedia

Pattern Constant Value Description

CLOSE_DOT_FILL 11 Dot fill (closely spaced)

USER_FILL 12 User-defined fill pattern

2. How can you create user-defined fill patterns?

Ans:

A pattern is stored as a sequence of 8 bytes, with each byte corresponding to a set of 8 pixels. The value of a pixel is set in the current color, if the value of the corresponding bit is 1. For example, you can define a pattern as:

char pattern[] = {0xCC, 0xAA, 0x33, 0x28,0xAB,0x10,0x17,0xFF};

You use setfillstyle() for predefined patterns. For user-defined patterns, such as the one given above, you can use setfillpattern(char * pattern, int color).

3. C supports a graphics mode and a text mode. Does that mean that you cannot output graphics in graphics mode?

Ans:

You can print graphics in the graphics mode as well. The various text functions available in the graphics mode are:

outtextxy(int x,int y, char * text), which displays the text specified as its third parameter at position specified by the first and second parameters, in current font, size and direction.

settextstyle(int font, int direction, int charsize), which allows you to set the font, size, and direction of the text. Fonts can be any of the 11(value 0 - 10) predefined fonts, direction can be HORIZ_DIR or VERT_DIR, and size can be 0 or any non-zero value positive value. The size manipulation involves various other functions also such as textheight(), textwidth(), and setusercharsize(). For more information you can refer to www.cs.colorado.edu/~main/bgi/doc/settextstyle.html.

settextjustify(int horiz_justi, int vert_justi), allows you to justify and align text. The possible values for the parameters are, LEFT_TEXT (only horiz_justi), CENTER_TEXT (both horiz_justi and vert_justi), RIGHT_TEXT (only horiz_justi), BOTTOM_TEXT (only vert_justi), TOP_TEXT (only vert_justi).

4. How can you make an object animate infinitely till you press the Enter key to exit?

Ans:

You can make an object animate till you hit a key using the kbhit() function. When this function is called it returns true if an input character is available in the read buffer for reading. If there is nothing to be read, it returns false. You can use this function as:

int continue =1;

while(continue) {

if(kbhit()) {

ch = getch();

if(ch ==27)

break;

}

else {

//animation code

24 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 25: Graphics and Multimedia

}

}

5. It is easy to draw lines or plot points in relation to the screen coordinate system. How can you move the cursor by a position relative to another point on the screen?

Ans:

You can do this using the moverel(int x, int y) function. It moves the cursor x pixels in the X direction and y pixels in Y direction from the current position. Note that it does not draw any line while doing so. To draw a line from a point to a relative point use the linerel(int x, int y) function.

©NIIT Coordinator Guide – Graphics and Multimedia 25

Page 26: Graphics and Multimedia

Chapter Four

ObjectivesIn this chapter, the students have learned to:

Describe the origin, and development of multimedia Identify the components of multimedia List the digital imaging technologies Describe video as a component of multimedia Describe audio as a component of multimedia Identify types of animation Describe 3D animation techniques Apply digital filtering and special effects List latest multimedia technologies, tools, and accessories

Focus AreasIntroduce multimedia by asking students the various reasons why they would use a computer. Common answers would be listening to music, watching video, and surfing websites, which are rich in graphics, text, audio, and video. Tell the students that these are the components that are collectively known as multimedia. At this stage list each of the components of multimedia including text, graphics, sound, video, and animation.

Explain the difference between a normal desktop PC and a multimedia system. Discuss the origin and development of multimedia briefly. Introduce some of the multimedia packages and products being used in the field of multimedia nowadays.

Next, explain digital imaging. You may explain this concept with reference to the additional inputs given in the Additional Inputs section.

Discuss video and audio as multimedia components. Prompt students to identify common formats for these components as well as tools used for creating, editing, and using these components.

Two other important topics in this chapter are Animation and Digital Filtering and Special Effects. Discuss these topics in an interactive manner with the students. You could link the latter topic to Photoshop, which is discussed in the next chapter and create context for it.

Additional InputsThe following section provides some extra inputs on the important topics covered in the SG:

Sampling Rate of Audio

An important characteristic of audio, when it is digitized is the sampling rate. Sound is in the form of analog signals. When these analog signals are digitized for use on computers, the sound waveforms is measured or sampled at specific intervals. The number of samples taken per second is the sampling rate. Informally, you could compare a sample to a frame in an animation or video. The more the number of frames, the smoother is the animation or video. Similarly, the higher the sampling rate, the better is the quality of digitized sound. A high sampling rate would therefore mean that the sound was digitized from its analog waveform more precisely. Mathematically, sampling rate is expressed in Hz as twice the highest frequency of sound in the analog waveform.

26 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 27: Graphics and Multimedia

Important Scanner Characteristics for Digital Imaging

The resolution (dpi) of a scanner is a crucial characteristic to be considered during digital imaging. Apart from resolution other important characteristics to be considered during digital imaging are:

Bit depth: Bit depth is the number of bits per pixel. Bits contain color information. Therefore, the number of bits defining a pixel in an image, affects the quality of the 'realism' of the digital image as compared to the original image. This is actually because the tones in an image depend on bit depth. An image with bit depth of 1 will be able to represent 21 = 2 tones (black and white). An image with more bit depth can represent more number of tones. For example, images with bit depth 24, can represent over 16 million tones. With the popularity of digital imaging, modern scanners are supporting higher bit depths. For example, most good HP scanners now support 48-bit depth.

Dynamic range: Dynamic range is the ratio of the brightest signal to the darkest signal that a scanner can detect and represent it in the digital image. The dynamic range affects the quality of shadows and highlights in an image. For example, an image, which has shadows may appear to be completely black in certain shadowy regions if the dynamic range is low and may not allow all shadows to be depicted appropriately. Although, a higher bit depth makes it possible to store more information so that the dynamic range can be higher; however it does not ensure a higher dynamic range. Mathematically, dynamic range is the difference between the maximum and minimum values of image density that a scanner can capture. The notations commonly used to donate densities are DMax and DMin. Therefore , Dynamic Range = DMax -Dmin. The desktop scanners, which use CCDs do not have high dynamic ranges. Only Drum scanners have a high dynamic range. Some scanners such as those of Canon and Nikon claim of dynamic ranges up to 4.2.

Pixel dimension: Pixel dimension is the height and width of an image in pixels. It indicates the actual pixels that scanned image uses. For example, a 3" X 4" image scanned at 200 dpi will be stored using (height X dpi) 600 pixels x (width X dpi) 800 pixels, which is the resolution of the scanned image.

Calculating File Size of a Scanned Object in Terms of Scanner Characteristics

The file size of a scanned object depends on the following:

Pixel dimensions Bit depth Resolution

A simple formula for estimating the size of a file in which an object will be scanned can be calculated from the following formula:

File size = (Pixel Resolution x Bit depth x Resolution)/8 bytes

For example, if a 24-bit, 10" x 11"image is scanned at 300 dpi, its file size would be:

File size = (3000 x 3300 x 24 x 300) / 8 = 8910000000 bytes.

©NIIT Coordinator Guide – Graphics and Multimedia 27

Page 28: Graphics and Multimedia

Popular Audio Formats

The four most popular audio file formats include:

Format Description

MIDI Musical Instrument Digital Interface or MIDI was developed in 1982. It stores digital music instructions instead of actual sound data. It can play only music as it records notes not sounds.

The size of a MIDI file is very small and its extension is .mid or .midi

Typically the file size of a .midi file is 25 KB for 5 minutes audio.

WAVE Format WAVE Format was developed by IBM and Microsoft. It is Windows' inherent file format for storing audio. For example, sounds that are played when you perform an action in Windows such as logging on to Windows are all in .wav format. It stores uncompressed CD quality audio; however the file size of a .wav file is very large. Typically the file size if a .wav file is 10 MB for a minute’s audio.

Real Audio Specifically developed with the Internet as the target, its main advantage is streaming audio. .ra files can only be played with a Real One player because it is a proprietary format.

MP3 MPEG Layer 3 or MP3 is a highly compressed but good quality sound file format, which has revolutionized digital music sharing and storing. MP3 files have the extension .mp3 and .mpga.

Typically a 5 minutes audio is stored between 4.5 to 5.5 MB.

Apart from the above formats, other known formats include AU format (.au), AIFF format (.aif or.aiff), SND format (.snd), Windows Media Audio format (.wma), flac format (.flac), and ogg format (.ogg).

Popular Video Formats

The most popular video formats include:

Format Description

MPEG It is one of the most popular formats, which can be played on computers as well as most VCD/DVD players. The quality is the same as that of VCRs.

MPEG actually encompasses versions, MPEG1, MPEG2, and MPEG4.

AVI (.avi) Used on the Windows platform. The quality of these files is not good, considering their size.

QuickTime (.mov) Commonly used on Macintosh systems. It is also compatible with the Windows platform. Its quality is good, considering the size of the files. This format also provides streaming video.

RealVideo(.rm) Used for streaming video. The quality is considered to be decent.

28 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 29: Graphics and Multimedia

Some other video formats include, DivX, ASP, Intel Video Technology (IVF), and WMV.

Scanning Images for Web Use

When you scan an image or create one, save it at 72 dpi for use on the Internet. Anything more than 72-dpi causes files to be unnecessarily large and increase download time. However, a file used for the Web cannot be used for the print media. Files destined for print need much higher resolution than files to be displayed on screen only.

Solutions to Chapter Four Questions1. What is multimedia?

Ans.

Multimedia can be defined as presentation of information with integration of multiple media elements that can be used on and manipulated by computer. This media includes graphic software, video, audio, animation software, and computer hardware such as CD players, scanners and cameras.

2. What are the main components of Multimedia?

Ans.

The components of Multimedia are as follows:

Text Graphics Sound Animation Video

3. With illustration briefly narrate the origin and development of multimedia technology?

Ans.

Multimedia is an effective medium to express information in a more attractive way. It makes use of text, pictures, audio, animation, and video. It was started more then 25 years ago. However, it only became popular with the advent of desktop computers.

Audio was the first multimedia data incorporated into desktop computing, with the introduction of soundboards built around the tone-synthesis chips. In addition, video could also be captured, displayed and stored on a computer disk with the help of digital overlay and capture boards installed on any ordinary computer.

However, the use of audio and video on desktop computers was limited due to their large size and high computing power requirements. These limitations were overcome through the introduction of compression/decompression engines for reducing the sizes of these files. As the demand increased for multi standard compression on the same system, several manufacturers introduced a new generation of compression chips that supported software programming. These chips contained hardware engines for operations requiring high computing power and also integrated processors that can be programmed to control data flow within the chip. Such technologies made audio and video boards capable of transferring data to computer systems efficiently, in some cases, in real time.

The advent of RISC technology, parallel processing architecture, high speed hard disk, optical disk drives and a variety of interfacing devices made it possible to design computer systems that have multimedia features as standards.

The latest breakthrough in the field of multimedia was the advent of the Internet and other high-speed networking technologies. These have presented new opportunities such as video conferencing, medical imaging, and scientific visualization.

©NIIT Coordinator Guide – Graphics and Multimedia 29

Page 30: Graphics and Multimedia

4. Give different applications for multimedia?

Ans.

Multimedia finds application in the field of entrainment, marketing, broadcasting, advertising, publication, telecommunications, training, collaborative engineering, and design manufacturing process because of its user-friendly operation.

5. What are sound cards?

Ans.

Sound card is the hardware for sound input and output. It is used with speakers, headphones, and microphones to record and play sound. Some sound cards also include MIDI, .Wav, and MP3.

6. How do graphics help in digital imaging?

Ans.

In digital imaging, film less camera may capture an image electronically, or an image may be traditionally created and scanned, or it may be created directly on the computer using graphics packages. The last option is where graphics help digital imaging. Direct graphics can be created on a computer in sophisticated, feature-rich packages such as Photoshop. These graphics editing packages allow creation of realistic digital images for use in multimedia applications.

In addition, graphics packages also help to edit digital images, which have been scanned or captured in digital cameras.

7. What are the different choices for digital imaging?

Ans.

There are three different choices for digital imaging:

A film less camera may capture an image electronically The image may be created within the computer using various paints and illustration programs The image may be created traditionally and than scanned into digital form

8. What are the different kinds of film less cameras available in the market?

Ans.

There are five different types of film less cameras suitable for digital imaging available in the market:

Video floppy disk Cameras Digital Cameras PCMCIA Cameras Filmless Camera backs Still Video Cameras

9. Explain how an artist can make use of multimedia software for his work.

Ans.

An artist can create illustrations using illustration software such as Adobe Illustrator. He can also apply special effects to existing and new images through filters such as those in Photoshop and Illustrator. In addition, he can scan hand-drawn illustrations and apply effects to or edit them. He can also create animation and add sound to his artwork using such software.

30 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 31: Graphics and Multimedia

10. Explain how moving images are recorded on the hard disk.

Ans.

Moving images can be captured or copied on the hard disk with the help of a capture board.

Digital cameras RF or audio and video ports are connected to the corresponding RF of Audio video ports available in the capture board. With the help of any Video studio software live images can be captured and stored on the hard disk.

11. Explain how sound helps in multimedia. What are the major types of sound files?

Ans.

Sound in multimedia can include speech, special effect sounds, and music. Sound is an essential component of a multimedia production, such as video or animation, and presentations. It helps to make a multimedia application, entertaining, easy to understand, and more presentable. For example, a presentation used for computer-based training can be more effective for students, if the text is also read out as it is displayed.

The major types of sound file formats include Wave files and MIDI files.

12. What is sampling?

Ans.

The process of transfer of information from analog to digital is called sampling.

13. What is animation? Explain different types of animation techniques.

Ans.

Animation is the process in which each frame of a film or movie is produced individually and viewed in rapid succession to give an illusion of continuous movement. On PCs the two main types of animation techniques are as follows:

Object animation: Is the moment of unchanged text and object around the screen Cell animation/Frame animation: Is made of different frames on screen where they are rapidly

displayed to simulate motion.

14. Explain the meaning of the following terms: Morphing, Rendering, Wrapping.

Ans.

Morphing: It is the process of transformation of one image to another by the transformation and distortion of corresponding points in both the images. The best example will be Kawasaki advertisement where the motorbike changes into a cheetah.

Rendering: The process of converting your designed objects with texturing and animation into an image or a series of images is called rendering.

Wrapping: It is the process where certain parts of the image could be marked for a change and made to change to different one for example legs of cheetah to be morphed with the wheels and head with head lights. Head can alone be marked and wrapped.

15. What is the meaning of file format?

Ans.

The method by which software organizes the data in the saved file is called the file format. The file name extension or suffixes indicate the format or usage of the file. Several different types of file formats are used by various kinds of software. For example: the GIF file format used for Web page images is a standard format that can be opened by any program that supports that standard format.

©NIIT Coordinator Guide – Graphics and Multimedia 31

Page 32: Graphics and Multimedia

16. Why do we use a scanner? Name the different types of scanners?

Ans.

Scanner is a peripheral device, which captures real object or image and saves it in a digital file as a graphic. Different types of scanner are as follows:

Flatbed or Sheet-fed Scanner Film Scanner Handheld Scanner 3 D Scanner

17. What are the components of a multimedia system?

Ans.

The components of a multimedia system are as follows:

Monitor CPU Mouse Keyboard Microphone CD drive and disc Speaker Digital camera Joystick Scanner Printer Web camera

18. Explain the significance of file extensions and file formats.

Ans.

File formats organize and store data in a specific format. The quality and characteristics of the format decide the quality and usage of the data stored in the file, and the applications with which the file will be compatible. For example, a graphic can be saved as a bitmap file or a GIF file. In the first case, the quality of the graphic is good because bitmap format does not compress data, whereas GIF does. However, the size of the file in the first case will be much more than the size of the file in the second case. Therefore, bitmap graphics cannot be used on web pages because they take a lot of time to load, whereas GIF graphics can be used.

File extensions help a user as well as an application to identify the file format. For example, you can identify a graphic file by its extension such as .gif or .jpg. Similarly when you double click on a .gif file, Windows would read the extension and select the appropriate program for opening the file.

Fill in the Blanks

1. Multimedia constitutes an integration of multiple media such as text, graphics, audio, video, and animation elements.

2. JPEG uses lossy compression techniques.3. Wave or .wav files are Microsoft standard file format for storing waveform audio data.4. The amount of data that can be transmitted from one computer to another in a given time frame is

called bit rate.5. The process of removal of extraneous noise that inevitable creeps into a recording is called filtering.

32 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 33: Graphics and Multimedia

FAQ1. What is a decibel?

Ans:

Decibel is a relative measure of the loudness/intensity of sound. It is actually measured as a ratio. A sound of 0dB is hardly audible to the human ear. Hearing a sound above 80-85 dB can be painful and damaging for the human ear.

2. Can you attach your home stereo speakers directly to your computer for better sound quality?

Ans:

The speakers are powered by the sound card and essentially the quality of sound produced by them would depend on the sound card itself. It is not advisable to attach your home stereo speakers to your computer because the quality of sound may still be bad. This is because the power that these speakers need is much more than what the sound card's amplifier can provide. Moreover, home stereo speakers do have magnetic shield protection and can damage your monitor or data in disks such as hard disk or floppy.

3. Do scanner characteristics such as bit depth also apply to digital cameras?

Ans:

Yes, in most cases it does apply because they mostly work on similar principles.

4. What is an audio codec?

Ans:

A codec is software that implements a compression/decompression technique. It is used for compressing/decompressing audio data to a file format or a streaming audio format. Specific audio -codecs act as interfaces to audio players such as Winamp, and Windows Media players. Like audio codecs, video codecs are used to compress/decompress video. To see a list of codecs, visit ttp://en.wikipedia.org/wiki/List_of_codecs#Video_codecs. To view the list of codecs installed on your system, open the Control Panel and select Sound and Multimedia (or Sound in some systems). The Sound and Multimedia Properties dialog box opens. Navigate to the Hardware tab and select Audio Codecs in the list. Next, click the Properties button, a dialog box showing the codecs installed will open.

©NIIT Coordinator Guide – Graphics and Multimedia 33

Page 34: Graphics and Multimedia

Chapter Five

ObjectivesIn this chapter, the students have learned to:

Edit bitmap and vector graphics Change color modes Compare different file formats Use Photoshop tools and features:

Rectangle Marquee tool Lasso tool Painting tools Editing tools Color selection and cropping tools Selection tools Printing features Graphics file formats supported

Use the layers palette

Focus AreasIntroduce Photoshop as one of the most popular image editing and graphics creation tool, which is an Adobe product. Inform the students that Photoshop's first version, 1.0, was shipped in 1990. Since then various versions have been launched. Version 6.0 included various new features, which made Photoshop very popular. The latest version of Photoshop is Photoshop CS, which includes revolutionary features in the field of image editing. Ask the students to refer to the official Adobe site to get an overview of the new features of Photoshop CS.

Provide the students a brief list of the various tools supported by Photoshop and kind of image editing and graphic creation that can be done using these tools. Emphasize the advantages of Photoshop in various fields, such as printing and media.

Tell them that 2D morphing is also possible in Photoshop, where they can actually merge the body of one person with the face of another.

Additional InputsThe following section provides some extra inputs on the important topics covered in the SG:

Photoshop Shortcuts

Table 5.1 below lists keyboard shortcuts of some commonly used operations in Photoshop:

Short cuts Tools

F1 Photoshop Help

F5 Brush Palette

F6 Color Palette

F7 Layer Palette

F8 Navigator, Info

F9 History, Actions, Tool Presets

34 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 35: Graphics and Multimedia

Short cuts Tools

Shift+ Alt Copy same layer

Ctrl +R Rulers

Zoom In Ctrl++

Zoom In Ctrl--

Fit on Screen Ctrl+0

Lock Guides Alt +Ctrl+

Fill Foreground color Ctrl + Delete or Ctrl + Backspace

Fill background color Alt + Delete or Alt + Backspace

Brush Tool (B) B

Rectangular Marquee Tool M

Move Tool V

Lasso Tool L

Dodge/Burn/Sponge Tool O

Blur/Sharpen/Smudge Tool R

Type Tool T

Pen Tool P

Eraser Tool E

Crop Tool C

Multiple History (Step Backwards)

Ctrl +Alt+ Z

Direct selection Ctrl+ Any Arrow

Decrease brush size [

Increase brush size ]

Previous brush <

Next brush >

Free Transform Ctrl + T

©NIIT Coordinator Guide – Graphics and Multimedia 35

Page 36: Graphics and Multimedia

Pen Tool in Photoshop Version 6

An important graphics creation and tracing tool in Photoshop is the Pen tool. Pen tool enables creation of vector illustration through lines and curves. Using the Pen tool you can create your own illustrations. Unlike a Pencil tool, a Pen tool does not merely create an outline; it creates the outline of an illustration as a path, which can be edited during creation or even after creation.

Perform the following steps to create a face of a person using the Pen tool:

1. Open a new image in Photoshop.2. Click the Pen tool icon, in the toolbox. Now, place the mouse cursor in the image area. 3. Click at any point in the blank canvas from where you want to start creating the illustration. A point

will appear on the canvas. This point is called an anchor point or a node. 4. Click at another location in the canvas to connect the anchor point created in Step 3 to the new point.

A line will be created between the two anchor points as shown in the following figure:

Note that the point, which is filled with solid color is the one, which was created in this step and is currently selected.

36 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 37: Graphics and Multimedia

5. Similarly, you can keep clicking to connect points in the shape of a face. Note that the closer you click to create anchor points, the more curved will the path be. The following figure shows the outline of the face after the last anchor point has been connected to the first anchor point to form a closed path:

When you are at the first and the last anchor points, the mouse cursor (representing the pen tool) will appear with a small circle below it to indicate that the path will be closed if the points are connected. Once a path is closed you can only edit it, you cannot extend it.

6. To fill color in the illustration created using Pen tool, you must convert the path to a selection by performing the following steps:a. Open the Paths palate by selecting Window>Show Paths.b. Click the > sign on the right side of the Paths palate, and select Make Selection... from the

menu. Click OK in the Make Selection dialog box that appears. The Workpath will be converted to a selection.

c. Fill color in the selection using the Paint Bucket tool as shown in the following figure:

©NIIT Coordinator Guide – Graphics and Multimedia 37

Page 38: Graphics and Multimedia

Note that you can convert a selection back to a path in the same way by selecting Make Work Path... in the Paths palate.

The procedure explained above is only one of the ways, and not a versatile way, of using the Pen tool. You can use the Pen tool to create curves by dragging while you click to create an anchor point. You can also edit individual anchor points.

To draw a curve using the Pen tool, click to create the starting anchor point. Next, click and drag to create the next anchor point. A curve will be created as shown in the following figure:

Notice the two extended lines eemanating out of the selected anchor point in the above figure. These are called the handles of the anchor point. You can move the handles simultaneously or individually using the Convert Anchor Point tool (available in the Pen tool options if you right click on it). By dragging the handles, you change the orientation of the curve as desired.

Apart from the Convert Anchor Point tool under the Pen tool, two other useful options are Add Anchor Point Tool and Delete Anchor Point Tool. You can select the Add Anchor point tool to add an anchor point at any location in a path. You can then use the handles of this anchor point, to modify the shape of the path at that point. Similarly, you can delete an anchor point in a path using the Delete Anchor Point tool. These two tools along with the Convert Anchor Point tool can be used to impart a smooth shape to an illustration.

Creating Custom Filters in Photoshop

Apart from the filter effects available in Photoshop's Filter menu, you can also create your own custom filter for applying on images. Using a custom filter, you can change the brightness value of each pixel in the image according to a predefined mathematical operation known as convolution. Convolution is an integral based mathematical operation between two functions, which is often said to 'blend' the functions.

As a result of the application of convolution each pixel in an image on which a custom filter is applied is reassigned a value based on the values of surrounding pixels.

To create a custom filter, perform the following steps:

1. Open the image to which you want to apply the filter.

38 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 39: Graphics and Multimedia

2. Select Filter > Other > Custom from the main menu of Photoshop. The Custom dialog box opens as shown here:

The Custom dialog box shows the preview of the image in the right hand side box, if the Preview checkbox on the left side is selected.

3. Click in any unlabeled text box, which represents the pixel being evaluated. Enter the value by which you want to multiply that pixel's brightness value. This value can be between -999 to +999. Using the values entered in the various textboxes You can adjust the image brightness at a micro level and create a filter of your own by entering different values in the textboxes. Note that you do not have to enter values in all the text boxes. In addition, you can set the value by which you want to divide the sum of the brightness values entered in the unlabeled text boxes, in the Scale text box. You can also enter a value in the Offset text box to add it to the result of the scale calculation.

4. Click OK to apply the filter in the image after you have entered all the desired values. In addition, you can save the custom filter as a .ACF by clicking on the Save button. You can load an already saved custom filter, by clicking the Load button and browsing to the desired .ACF file. The following figure shows the effect of a custom filter on an image in the preview box:

Improved Usability in Photoshop CS

Photoshop in general allows users to customize the graphical user interface according to their convenience by showing/hiding, and placing the palates, toolbox, and rulers. However, a remarkable feature in Photoshop CS is the ability to save the Photoshop working environment as a Workspace. That is, the way you place palates and the toolbox, how you separate grouped palates can be saved even after you close Photoshop, so that the next time you open it, the GUI appears the same as you had left it before closing.

This Workspace features are available under the Window>Workspace.

©NIIT Coordinator Guide – Graphics and Multimedia 39

Page 40: Graphics and Multimedia

Solutions to Chapter Five Questions1. Fill in the blanks:

a. Computer Graphics can be classified into _____________ and _______________.

Ans.

Bitmap

Images

b. A Photoshop file can contain vector & raster data.

Ans.

True

c. __________ is defined as the number of pixel along the height & width of bitmap.

Ans.

Resolution

d. _____________ Method is used to assign color values to any new pixel, at the time of re-sampling.

Ans.

Interpolation

e. Vectors graphics are made of ____ and ______ defined by mathematical objects, which are called vectors.

Ans.

Line

Curves

2. How many colors are there in RGB Color mode?

Ans.

RGB images use three colors, Red, Green, and Blue. These colors are known as primary colors.

3. What is gamut in Photoshop?

Ans.

The series of colors that a color system can demonstrate or print is called gamut in Photoshop. A color that can be displayed in RGB may be out of gamut, and therefore unprintable, for your CMYK setting.

4. What is a layer?

Ans.

Layers can be visualized as transparent sheets placed over one another in an image. Creating a layered image refers to putting different objects on different levels in a sequence. . You can create empty layers and add content to them, or you can create new layers from existing content. When you create a new layer, it appears either above the selected layer or within the selected layer set in the Layers palette.

40 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 41: Graphics and Multimedia

Layer sets help you organize and manage layers. You can use layer sets to easily move layers as a group, to apply attributes and masks to groups of layers, and to reduce clutter in the Layers palette. You cannot create a new layer set within an existing layer set.

5. Name the different selections tools.

Ans.

The selection tools in Photoshop include the Lasso tool, Pen tools, Marquee Tool, and Path selection tool.

6. What are editing Tools?

Ans.

Editing tools are used to fine-tune or modify graphic elements. Photoshop delivers high-powered image editing, photo retouching, and composition tools. It also supports features, such as Making Color Adjustments, Auto Color Command, Adjustment Layers and Fill Layers, and Masking Layers to help you get professional-quality results.

7. Give the steps to use rubber stamp tool.

Ans.

To use the rubber stamp tool (Clone tool), perform the following steps:

1. Open the image that you want to clone. 2. Select rubber stamp tool. 3. Select an appropriate brush size and style from the Brush drop down in the options bar at the top.

Also set values for other options such as blending mode, opacity, and flow. Determine how you want to align the sampled pixels. If you select Aligned, you can release the mouse button without losing the current sampling point. As a result, the sampled pixels are applied continuously, no matter how many times you stop and resume painting. If you deselect Aligned, the sampled pixels are applied from the initial sampling point each time you stop and resume painting. Select Use All Layers to sample data from all visible layers; deselect Use All Layers to sample only from the active layer.

4. Press Alt and click the image that you want to clone, to select the source point for cloning.5. Use the brush to clone the image by dragging the mouse on another area. The image will be cloned

in that area.

8. What is File Format? Name the different image file formats?

Ans.

The method by which the software organizes the data in the saved file is called the file format. The file name extension or suffixes indicate the format or usage of a file and a brief description of that format. Several different types of file format are used by various kind of software to save files. For example, the GIF file format used for Web page images are standard formats that can be opened by any program that supports it.

The various image file format are as follows:

Tagged-Image File Format (TIFF) Graphics Interchange Format (GIF) Joint Photographic Experts Group (JEPG) Encapsulated PostScript (EPS) Portable Document Format (PDF) Portable Network Graphics (PNG) TGA- Targa

©NIIT Coordinator Guide – Graphics and Multimedia 41

Page 42: Graphics and Multimedia

9. Give the steps to use the image printing utility of Photoshop?

Ans.

In Photoshop, you can print a complete image, selected area of an image, or even one or more layers.

To print a complete image, select File --> Print from the main menu (or press Ctrl + P). The Print dialog box opens up as shown in the following figure:

Ensure that the All radio button is selected. You can also set the print resolution by selecting it from the Print Quality drop-down. After making the desired print settings click OK to print.

To print a selected area, make a selection in the image using the Rectangular Marquee tool and select File >Print. Select the Selection option button in the Print dialog box and click OK.

Note that by default, Photoshop prints all visible layers and channels. If you want to print just certain layers or channels, make them the only ones that are visible and then print.

42 Coordinator Guide – Graphics and Multimedia ©NIIT

Page 43: Graphics and Multimedia

You can also choose to print the filename, along with crop marks, registration marks and a caption along with the image. To set such options, select File >Page Setup in Photoshop 6. The Page Setup dialog box opens as shown in the following figure:

You can select the checkboxes if you want to include the corresponding options in the printed image:

Caption: Selecting this checkbox will print a caption with the image. This caption can be set in the File Info dialog box. To open the File Info dialog box select File > File Info, and choose Caption from the Section drop-down list. Type a caption in the Caption text area and click OK.

Calibration Bars: Select this checkbox to print the calibration and color bars for your image. A calibration bar is a row of 11 gray squares of different values. A color bar is a row of 11 colors. These bars can be helpful when trying to calibrate to a specific printer. This option is available only for a PostScript printer.

Registration Marks: Select this checkbox to print a registration mark such as bull's eyes around the image. These marks can be helpful for aligning color separations.

Corner Crop Marks: Select this checkbox to view horizontal and vertical lines around the corners of the image, defining where the image should be trimmed.

Center Crop Marks: Select this checkbox to view the exact center of the image defined by two crossed lines.

Labels: Select this checkbox to print the file name next to the image. You can also print the name of the appropriate color channel if you are using color separations.

Negative: Select this checkbox to print an image that appears like a negative of the original image. With this option selected, the colors are reversed.

Emulsion Down: Select this checkbox to print the image as a horizontal mirror image of the original image.

Interpolation: Interpolation refers to a printer's ability to resample an image as they print it to improve its resolution. This option is useful in case of low-resolution images.

The buttons on the left side also present some useful options such as printing a border around the image and printing a background with the image.

©NIIT Coordinator Guide – Graphics and Multimedia 43

Page 44: Graphics and Multimedia

FAQ1. Why are options under the Filter menu grayed or not available sometimes?

Ans:

The most common reason for this, assuming that an image is open, is that the Color mode of the image is not supported by the Filter commands. For examples, filters cannot be applied to Index images.

2. Can you open a Photoshop 6.0 file in Photoshop CS?

Ans:

Yes, a Photoshop 6.0 file can be opened in Photoshop CS. However, the new features of Photoshop CS may not be available to that file. In addition, the file may not appear exactly as created in Photoshop 6.0.

3. Can you apply a gradient on an existing image?

Ans:

Yes, a gradient on an existing image can be applied using Quick Masking. To do this, open the image and copy the area (or the whole image) to which you want to apply a gradient. Now open a new image and click the Edit in Quick Mask Mode button in the toolbox. Next, select the Gradient tool and apply a gradient in the new image. Click the Edit in Standard Mode button. A selection will be formed on the new image. Select Edit>Paste Into from the main menu. The image opened first will be pasted in the selection and a gradient will be applied to it.

4. Can you delete the path created as an outline of an illustration using the Pen tool?

Ans:

Yes, the path created as an outline of an illustration using the Pen tool can be deleted. To do this, open the Paths palate, right-click Work Path, and select Delete Path from the shortcut menu.

5. An image has been created using multiple layers. Can you merge all layers into one layer before saving the image?

Ans:

Yes, it is possible to merge all layers by selecting Layer>Flatten Image from the main menu.

44 Coordinator Guide – Graphics and Multimedia ©NIIT