Вы находитесь на странице: 1из 86

Graphics & Multimedia Lab Manual

Prepared By Sri V Prasad Associate Professor Dept. Of Computer Science & Engg.

Raghu Institute of Technology

Approved by AICTE(New Delhi) , Affiliated to Andhra University(Andhra Pradesh), Dakamarri(V), Bheemunipatnam (M), Visakhapatnam District, Andhra Pradesh, India. Tel No: +91 8922 248003, 248013. Fax no: +91 8922 248013. Website: www.raghuinstech.com

As the name suggests, multimedia is a set of more than one media element used to produce a concrete and more structured way of communication. In other words multimedia is simultaneous use of data from different sources. These sources in multimedia are known as media elements. Its importance has realized in almost all walks of life, may it be education, cinema, advertising, fashion and what not. Throughout the 1960s, 1970s and 1980s, computers have been restricted to dealing with two main types of data - words and numbers. But the cutting edge of information technology introduced faster system capable of handling graphics, audio, animation and video. And the entire world was taken aback by the power of multimedia. Multimedia is nothing but the processing and presentation of information in a more structured and understandable manner using more than one media such as text, graphics, animation, audio and video. Thus multimedia products can be an academic presentation, game or corporate presentation, information kiosk, fashion-designing etc. Multimedia systems are those computer platforms and software tools that support the interactive uses of text, graphics, animation, audio, or motion video. If the sequence and timing of these media elements can be controlled by the user, then one can name it as Interactive Multimedia.


Text Inclusion of textual information in multimedia is the basic step towards development of multimedia software. Text can be of any type, may be a word, a single line, or a paragraph. The textual data for multimedia can be developed using any text editor. The text can have different type, size, color and style to suit the professional requirement of the multimedia software.

Graphics Another interesting element in multimedia is graphics. As a matter of fact, taking into consideration the human nature, a subject is more explained with some sort of pictorial/graphical representation, rather than as a large chunk of text. Unlike text, which uses a universal ASCII format, graphics does not have a single agreed format. They have different format to suit different requirement. Most commonly used format for graphics is .BMP or bitmap pictures. The size of a graphics depends on the resolution it is using. A computer image uses pixel or dots on the screen to form itself. And these dots or pixel, when combined with number of colors and other aspects are called resolution. Resolution of an image or graphics is basically the pixel density and number of colors it uses. And the size of the image depends on its resolution. There are several graphics packages available to develop excellent images and also to compress them so that they take lesser disk-space but use higher resolution and more colours. Packages like Adobe PhotoShop, Adobe Illustrator, PaintShop Pro etc. are excellent graphics packages. Animation Moving images have an overpowering effect on the human peripheral vision. Followings are few points for its popularity.

Visualizing three-dimensional structures:

As you know the computer screen is two-dimensional. Hence users can never get a full understanding of a three-dimensional structure by a single illustration, no matter how well designed. Animation can be used to emphasize the three-dimensional nature of objects and make it easier for users to visualize their spatial structure. The animation need not necessarily spin the object in a full circle - just slowly turning it back and forth a little will often be sufficient. The movement should be slow to allow the user to focus on the structure of the object.

You can also move three-dimensional objects, but often it is better if you determine in advance how best to animate a movement that provides optimal understanding of the object. This predetermined animation can then be activated by simply placing the cursor over the object. On the other hand, user-controlled movements requires the user to understand how to manipulate the object (which is inherently difficult with a two-dimensional control device like the mouse used with most computers - to be honest, 3D is never going to make it big time in user interfaces until we get a true 3D control device).


PICT - A widely used format compatible with most Macintosh JPEG - Joint Photographic Experts Group - a format that compresses files and lets you choose compression versus quality TIFF - Tagged Image File Format - a widely used format compatible with both Macintosh and Windows systems Windows BMP - A format commonly used on MS-DOS and MS-Windows computers GIF - Graphics Interchange Format - a format used on the Internet, GIF supports only 256 colours or grays


Can be used as reinforcement Can be used to clarify or symbolize a concept Creates the positive attitude of individuals toward what they are learning and the learning process itself can be enhanced.

The content of a topic can be more carefully selected and organized The teaching and learning can be more interesting and interactive The delivery of instruction can be more standardized. The length of time needed for instruction can be reduced.

Information of C Graphic Package

C graphics using graphics.h functions can be used to draw different shapes, display text in different fonts, change colors and many more. Using functions of graphics.h in turbo c compiler you can make graphics programs, animations, projects and games. You can draw circles, lines, rectangles, bars and many other geometrical figures. You can change their colors using the available functions and fill them. Following is a list of functions of graphics.h header file. Every function is discussed with the arguments it needs, its description, possible errors while using that function and a sample c graphics program with its output.

Screen For C graphics

The most basic thing you have to learn before stepping in the C shore of graphics is about the monitor. The monitor you are staring at right now contains lots of small dots called pixels , when each pixels glow in different colours you see an image.You can imagine it as minute bricks which can change to any colour used in building up the screen you see. When we initialize a programming for using C graphics.h it converts the whole screen into a matrix, if you dont know what a matrix in mathematics means ,just understand that your screens top left corner is taken as origin the x-axis increases by width from left to right and the y-axis increases by length from top to bottom.The co-ordinates we enter in each function is mapped according to this order.

For developing graphics using C we need to do it in three simple steps. 1. Loading the header file of C graphics.h 2. Initializing 'graphics driver' and 'grahpics mode' 3. Using the functions where ever necessary

Loading The Header File

#include<stdio.h> #include<graphics.h> void main() { }

Loading the header file of C graphics.h

The C graphics.h is the header file which should be included to initalize your computer to start using grahipcs methods and also to initialize the monitor.These kinds of statements before the main program are called preprocessor dierctives.Its very simple as coded below.

Initializing Graphics Form Borland C graphics library

This initialization is done inside the main program.The method initgraph() is used for this purpose there are three parameters for this , the first two are of integer type and the next is the path which you can leave blank in quoutes to take the default path.The integer parameters are initalized in this method for all the C graphics programs so you just need to memorize it and apply it for all C graphics programming from now on.

Initializing 'Graphics Driver' and 'Graphics Mode' from Borland C graphics library
#include<stdio.h> #include<conio.h> #include<graphics.h> void main() { int gdriver=DETECT,gmode; initgraph(&gdriver,&gmode," "); }

Graphic Programs using C package

Experiment No: 01 Specification: General program for drawing different types of curves. Program Theory: Circle function in C Declaration :- void circle(int x, int y, int radius); circle function is used to draw a circle with center (x,y) and third parameter specifies the radius of the circle. Rectangle function in C Declaration :- void rectangle(int left, int top, int right, int bottom); Rectangle function is used to draw a rectangle. Coordinates of left top and right bottom corner are required to draw the rectangle. Left specifies the x-coordinate of top left corner, top specifies the y-coordinate of top left corner, right specifies the x-coordinate of right bottom corner, bottom specifies the y-coordinate of right bottom corner. Ellipse function in C Declarations:- void ellipse(int x, int y, int stangle, int endangle, int xradius, int yradius); Ellipse is used to draw an ellipse (x,y) are coordinates of center of the ellipse, stangle is the starting angle, end angle is the ending angle, and fifth and sixth parameters specifies the X and Y radius of the ellipse. To draw a complete ellipse strangles and end angle should be 0 and 360 respectively. Line function in C Declaration :- void line(int x1, int y1, int x2, int y2); Date: 27-06-2012

Line function is used to draw a line from a point(x1,y1) to point(x2,y2) i.e. (x1,y1) and (x2,y2) are end points of the line.the code given below draws a line.

Sector function in C Declaration :- void sector( int x, int y, int stangle, int endangle, int xradius, int yradius); Sector function draws and fills an elliptical pie slice. Drawpoly function in C Drawpoly function is used to draw polygons i.e. triangle, rectangle, pentagon, hexagon etc.

Declaration :- void drawpoly( int num, int *polypoints ); num indicates (n+1) number of points where n is the number of vertices in a polygon, polypoints points to a sequence of (n*2) integers . Each pair of integers gives x and y coordinates of a point on the polygon. We specify (n+1) points as first point coordinates should be equal to (n+1)th to draw a complete figure. To understand more clearly we will draw a triangle using drawpoly, consider for example the array:int points[] = { 320, 150, 420, 300, 250, 300, 320, 150}; points array contains coordinates of triangle which are (320, 150), (420, 300) and (250, 300). Note that last point(320, 150) in array is same as first. Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) { #1.C

int gdriver=DETECT, gmode; int poly[16]={300,300,350,250,400,250,450,300,400,350,350,350,300,300}; initgraph(&gdriver,&gmode,""); circle(100,100,80); rectangle(200,50,400,150); ellipse(500,100,60,59,70,30); line(50,200,600,200); sector(100,400,90,30,100,150); drawpoly(7,poly); getch(); closegraph(); return 0; } OUTPUT:

Experiment No: 2 Specification: Draw Various types of lines and curves.

Date: 27-06-2012

Program A: Program to draw a line. Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) { int gdriver=DETECT, gmode, left=100,top=100; initgraph(&gdriver,&gmode,""); line(left-50,top+50,left+50,top+50); getch(); closegraph(); return 0; } Output: #2A.C

Program B: Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) {

Draw a triangle using three lines. #2B.C

int gdriver=DETECT, gmode, x=300,y=300; initgraph(&gdriver,&gmode,""); line(x,y-200,x-100,y); line(x,y-200,x+100,y); line(x-100,y,x+100,y); getch(); closegraph(); return 0; } Output:

Program C:

Write a C program to draw a triangle in a square. #2C.C

Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) { int gdriver=DETECT, gmode, x=300,y=300; initgraph(&gdriver,&gmode,""); line(x-100,y-200,x+100,y-200); line(x-100,y-200,x-100,y); line(x+100,y-200,x+100,y); line(x,y-200,x-100,y); line(x,y-200,x+100,y); line(x-100,y,x+100,y); getch(); closegraph(); return 0; }


Program D:

Program to draw star with lines.

Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) { int gdriver=DETECT, gmode, x=300,y=300; initgraph(&gdriver,&gmode,""); line(x-100,y-200,x+100,y-200); line(x-100,y-200,x,y); line(x+100,y-200,x,y); line(x-100,y-50,x+100,y-50); line(x-100,y-50,x,y-250); line(x+100,y-50,x,y-250); getch(); closegraph(); return 0; }



Program E:

Program to print colored lines.

Program Theory: Outtextxy function in C Declaration: void outtextxy(int x, int y, char *textstring); outtextxy displays a text string in the viewport at the given position (x, y), using the current justification settings and the current font, direction, and size. To maintain code compatibility when using several fonts, use textwidth and textheight to determine the dimensions of the string. If a string is printed with the default font using outtext or outtextxy, any part of the string that extends outside the current viewport is truncated. Setcolor function in C Declaration: void setcolor(int color); setcolor sets the current drawing color to color, which can range from 0 to getmaxcolor. The current drawing color is the value to which pixels are set when lines, and so on are drawn. The drawing colors shown below are available for the CGA and EGA, respectively. Palette Number 0 1 2 3 Name BLACK Three Colors LIGHTGREEN LIGHTRED LIGHTCYAN GREEN CYAN Value 0 YELLOW



1 2 3 4 5 6 7 8 9 10 11 12


outtextxy function in C Declaration: void outtextxy(int x, int y, char *textstring); outtextxy displays a text string in the viewport at the given position (x, y), using the current justification settings and the current font, direction, and size. Program Code: #include<conio.h> #include<graphics.h> int main(void) { #2E.C

int gdriver=DETECT,gmode,i,x=50,j,k,l; initgraph(&gdriver,&gmode,""); for(i=1,j=0,k=0,l=0;i<=4;i++,j++,k++,l++) { setcolor(i); if(i==1) outtextxy(50,x-10,"SOLID LINE"); else if(i==2) outtextxy(50,x-10,"DOTTED LINE"); else if(i==3) outtextxy(50,x-10,"CENTERED LINE"); else outtextxy(50,x-10,"DASHED LINE"); setlinestyle(j,k,l); line(50,x,600,x); x+=50; } getch(); closegraph(); return 0; }


Program F: Program Theory: Arc function in C

Program to draw a Curve.

Declaration: void arc(int x, int y, int stangle, int endangle, int radius); arc draws a circular arc in the current drawing color centered at (x,y) with a radius given by radius. The arc travels from stangle to endangle. If stangle equals 0 and endangle equals 360, the call to arc draws a complete circle. The angle for arc is reckoned counterclockwise, with 0 degrees at 3 o'clock, 90 degrees at 12 o'clock, and so on. Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main(void) { int gdriver=DETECT, gmode; initgraph(&gdriver,&gmode,""); arc(100,100,0,150,80); getch(); closegraph(); return 0; #2F.C

} Output:

Experiment No: 3 Specification: Create various types of texts and fonts.

Date: 04-07-2012

Progarm A: Write a C program to create various types of texts and fonts. Program Theory: Settextstyle function in C Declaration: void settextstyle(int font, int direction, int charsize); settextstyle sets the text font, the direction in which text is displayed, and the size of the characters. A call to settextstyle affects all text output by outtext and outtextxy. The parameters font, direction, and charsize passed to settextstyle are described in the following: font: One 8x8 bit-mapped font and several "stroked" fonts are available. The 8x8 bit-mapped font is the default. The enumeration font_names, which is defined in graphics.h, provides names for these different font settings: Name DEFAULT_FONT TRIPLEX_FONT SMALL_FONT SANS_SERIF_FONT GOTHIC_FONT SCRIPT_FONT SIMPLEX_FONT TRIPLEX_SCR_FONT COMPLEX_FONT Value Description 0 1 2 3 4 5 6 7 8 8x8 bit-mapped font Stroked triplex font Stroked small font Stroked sans-serif font Stroked gothic font Stroked script font Stroked triplex script font Stroked triplex script font Stroked complex font


9 10

Stroked European font Stroked bold font

direction: Font directions supported are horizontal text (left to right) and vertical text (rotated 90 degrees counterclockwise). The default direction is HORIZ_DIR. The size of each character can be magnified using the charsize factor. If charsize is nonzero, it can affect bit-mapped or stroked characters. A charsize value of 0 can be used only with stroked fonts.

If charsize equals 1, outtext and outtextxy displays characters from the 8x8 bitmapped font in an 8x8 pixel rectangle onscreen.

If charsize equals 2, these output functions display characters from the 8x8 bitmapped font in a 16*16 pixel rectangle, and so on (up to a limit of ten times the normal size).

When charsize equals 0, the output functions outtext and outtextxy magnify the stroked font text using either the default character magnification factor (4) or the user-defined character size given by setusercharsize.

Setusercharsize function in C Declaration: void setusercharsize(int multx, int divx, int multy, int divy); setusercharsize gives you finer control over the size of text from stroked fonts used with graphics functions. The values set by setusercharsize are active only if charsize equals 0, as set by a previous call to settextstyle. With setusercharsize, you specify factors by which the width and height are scaled. The default width is scaled by multx : divx, and the default height is scaled by multy : divy. Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> # 3A.C

int main() { int gd=DETECT,gm; initgraph(&gd,&gm," "); settextstyle(TRIPLEX_FONT,HORIZ_DIR,USER_CHAR_SIZE); setusercharsize(1,1,1,1); outtextxy(50,50,"NORMAL"); setusercharsize(2,1,1,1); outtextxy(50,200,"WIDER"); setusercharsize(1,1,2,1); outtextxy(350,50,"TALLER"); setusercharsize(1,2,1,2); outtextxy(350,200,"HALF TALLER AND HALF WIDER"); getch(); closegraph(); return 0; }


Program B: Write a C program to create various types of texts and fonts but with proper alignment. Program Theory: Settextjustify function in C Declaration: settextjustify(int horiz, int vert); Text output after a call to settextjustify is justified around the current position (CP) horizontally and vertically, as specified. The default justification settings are LEFT_TEXT (for horizontal) and TOP_TEXT (for vertical). The enumeration text_just in graphics.h provides names for the horiz and vert settings passed to settextjustify. Description horiz Name LEFT_TEXT Value Action 0 left-justify text center text right-justify text bottom-justify text center text top-justify text #3B.C



Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main() { int gd=DETECT,gm,i,y=0; initgraph(&gd,&gm," ");

settextstyle(TRIPLEX_FONT,HORIZ_DIR,USER_CHAR_SIZE); line(317,0,317,getmaxy()); for(i=0;i<=4;i++) { line(0,y,getmaxx(),y); y+=100; } moveto(317,100); settextjustify(CENTER_TEXT,CENTER_TEXT); outtext("CENTER-CENTER"); moveto(317,200); settextjustify(LEFT_TEXT,TOP_TEXT); outtext("LEFT-TOP"); moveto(317,300); settextjustify(RIGHT_TEXT,TOP_TEXT); outtext("RIGHT-TOP"); moveto(317,400); settextjustify(LEFT_TEXT,BOTTOM_TEXT); outtext("LEFT-BOTTOM"); moveto(317,500); settextjustify(RIGHT_TEXT,TOP_TEXT);

outtext("RIGHT-TOP"); getch(); closegraph(); return 0; }


Experiment No:4 Specification: Program Code:

Date: 04-07-2012 Create two dimensional objects using lines and curves. #4.C

#include<graphics.h> #include<stdio.h> #include<conio.h> int main() { int gdriver=DETECT,gmode; initgraph(&gdriver,&gmode,""); arc(100,100,90,270,50); arc(110,100,85,275,50); line(200,50,160,150); line(200,50,240,150); line(240,150,160,80); line(160,80,240,80); line(240,80,160,150); circle(350,100,50); arc(500,100,60,225,50); sector(100,300,0,270,50,50);

circle(300,300,105); circle(300,300,100); outtextxy(290,210,"12"); outtextxy(340,220,"1"); outtextxy(370,255,"2"); outtextxy(385,300,"3"); outtextxy(370,345,"4"); outtextxy(340,375,"5"); outtextxy(300,385,"6"); outtextxy(260,375,"7"); outtextxy(230,345,"8"); outtextxy(210,300,"9"); outtextxy(220,255,"10"); outtextxy(250,220,"11"); outtextxy(280,350,"ROLEX"); line(300,300,220,289); setlinestyle(0,0,3); line(300,300,340,280); line(300,300,300,230); getch(); closegraph();

return 0; } Output:

Experiment No: 5 Specification: Animating 2D Pictures using Transformations.

Date: 11-07-2012

Program Code:


#include<stdio.h> #include<conio.h> #include<graphics.h> int main() { int gd=DETECT,gm,x=10,y=200; initgraph(&gd,&gm,""); for(;x<=500;x++) { line(0,y+56,getmaxx(),y+56); rectangle(x,y,x+100,y+50); arc(x+15,y+50,0,180,9); sector(x+15,y+50,0,360,6,6); arc(x+80,y+50,0,180,9); sector(x+80,y+50,0,360,6,6); rectangle(x+5,y+10,x+80,y+25);

rectangle(x+82,y+10,x+98,y+40); outtextxy(x+5,y+30,"VOLVO"); if(x==10) getch(); if(x<500) clearviewport(); } getch(); closegraph(); return 0; } Output:

Experiment No:6 Specification: Program Theory: Setfillstyle function in C Declartion: void setfillstyle(int pattern, int color); Drawing a Colored image.

Date: 18-07-2012

setfillstyle sets the current fill pattern and fill color. To set a user-defined fill pattern, do not give a pattern of 12 (USER_FILL) to setfillstyle; instead, call setfillpattern. If invalid input is passed to setfillstyle, graphresult returns -1(grError), and the current fill pattern and fill color remain unchanged. Fillellipse function in C Declaration: void fillellipse(int x, int y, int xradius, int yradius); Draws an ellipse using (x,y) as a center point and xradius and yradius as the horizontal and vertical axes, and fills it with the current fill color and fill pattern.

Program Code: #include<graphics.h> #include<stdlib.h> #include<conio.h> #include<dos.h> void main() { int gd=DETECT,gm,i,j,p,q,x,y,k,flag,r=0;


initgraph(&gd,&gm,""); y=getmaxy()/2; i=0; p=0; q=0; j=0; flag=0; for(k=0;k<500;k++) while(!kbhit()) { setcolor(r); line(0+i,y+20,0+i,y-20); line(0+i,y+20,20+i,y); line(0+i,y-20,20+i,y); setfillstyle(SLASH_FILL,BLUE); fillellipse(80+i,y,50,10); ellipse(80+i,y,10-p,350+p,50,10); setfillstyle(SLASH_FILL,RED); fillellipse(80+i,y,40,10); ellipse(80+i,y,10-p,350+p,40,10); setfillstyle(SLASH_FILL,GREEN); fillellipse(80+i,y,30,10); ellipse(80+i,y,10-p,350+p,30,10); setfillstyle(SLASH_FILL,YELLOW);

fillellipse(80+i,y,20,10); ellipse(80+i,y,10-p,350+p,20,10); setfillstyle(SLASH_FILL,CYAN); fillellipse(80+i,y,10,10); ellipse(80+i,y,10-p,350+p,10,10); line(130+i,y-12,130+i,y+1); line(125+i,y-20,125+i,y-5); line(135+i,y-18,140+i,y-5); line(35+i,y+15,55+i,y+10); line(40+i,y+20,55+i,y+10); if(flag==0) p=p+2; if(flag==1) p=p-2; circle(130+i,y-18,6); circle(130+i,y-18,1); line(60+i,y-25,30+i,y-45+j); line(30+i,y-45+j,100+i,y-25); line(60+i,y+25,30+i,y+45+q); line(30+i,y+45+q,100+i,y+25); i=i+3;

if(i>=638) i=0; if(flag==0) j=j-2,q=q+2; if(flag==1) j=j+2,q=q-2; if(j<=-10) flag=1; else if(j>=0) flag=0; delay(10000); cleardevice(); r++; } getch(); closegraph(); }


Experiment No:7 Specification: Program Theory: delay function in C Declaration: void delay(int millisec); Create an object and apply rotate function on it.

Date: 18-07-2012

The function pauses the computation for the the specified number of milliseconds. Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> int main() { int gd=DETECT,gm,j=0; initgraph(&gd,&gm,""); while(!kbhit()) { setcolor(RED); for(j=0;j<=50;j++) { cleardevice(); ellipse(100,100,0,360,0+j,50); #7.C

delay(2000); } for(j=50;j>=0;j--) { cleardevice(); ellipse(100,100,0,360,0+j,50); delay(2000); } } getch(); closegraph(); return 0; } Output:

Experiment No:8 Specification: Creating three dimensional objects using wire frame Program Theory:

Date: 01-08-2012

A wire frame model is a visual presentation of a three dimensional or physical object used in 3D computer graphics. It is created by specifying each edge of the physical object where two mathematically continuous smooth surfaces meet, or by connecting an object's constituent vertices using straight lines or curves. The object is projected onto the computer screen by drawing lines at the location of each edge. The term wireframe comes from designers using metal wire to represent the 3 dimensional shape of solid objects.3D wireframe allows to construct and manipulate solids and solid surfaces.3D solid modeling technique efficiently draws high quality representation of solids than the conventional line drawing. Using a wire frame model allows visualization of the underlying design structure of a 3D model. Traditional 2-dimensional views and drawings can be created by appropriate rotation of the object and selection of hidden line removal via cutting planes. Since wireframe renderings are relatively simple and fast to calculate, they are often used in cases where a high screen frame rate is needed (for instance, when working with a particularly complex 3D model, or in real-time systems that model exterior phenomena). When greater graphical detail is desired, surface textures can be added automatically after completion of the initial rendering of the wireframe. This allows the designer to quickly review chansolids or rotate the object to new desired views without long delays associated with more realistic rendering. Wire frame models were used extensively to represent 3D objects during the 1980s and early 1990s when properly filled 3D objects would have been too complex to calculate and draw with the computers of the time.

Construction: In the construction of the wire-frame model, the edges of the objects are shown as lines. the image(model) assumes the appearances of a frame constructed out of wire. so, it is called as "wire frame" model and it is mostly useful in sheet-metal process to know which is driving surface and which is follower surface shown in different colored lines. Use of wireframe model: 1. Viewing the model from any desired point-This can be obtained by changing line of sight. 2. To produce standard orthographic and auxiliary views. 3. To produce exploded and perspective view more easily. 4. To analyse distances within the structure and checking tolerances and interference. 5. To decrease number of prototypes required. 6. Editing the model:-Some CAD systems can automatically remove hidden lines using a command called hide. Program Code: #include <stdio.h> #include <graphics.h> #include <math.h> #include <stdlib.h> #include <dos.h> #include <conio.h> #define ORG -50 double face1[5][2] = { { 250, 125 }, { 350, 125 }, { 350, 225 }, { 250, 225 }, { 250, 125 } # 8.C

}; double face2[5][2] = { { 250+ORG, 125-ORG }, { 350+ORG, 125-ORG }, { 350+ORG, 225-ORG }, { 250+ORG, 225-ORG }, { 250+ORG, 125-ORG } };

double angle = 5.0 * M_PI / 180; double midx1, midy1, midx2, midy2; void rotate (void) { int i; for (i=0; i<5; i++) { double xnew, ynew;

xnew = midx1 + (face1[i][0] - midx1) * cos (angle) (face1[i][1] - midy1) * sin (angle); ynew = midy1 + (face1[i][0] - midx1) * sin (angle) + (face1[i][1] - midy1) * cos (angle);

face1[i][0] = xnew; face1[i][1] = ynew;

xnew = midx2 + (face2[i][0] - midx2) * cos (angle) (face2[i][1] - midy2) * sin (angle); ynew = midy2 + (face2[i][0] - midx2) * sin (angle) + (face2[i][1] - midy2) * cos (angle);

face2[i][0] = xnew; face2[i][1] = ynew; }


for (i=0; i<4; i++) { setcolor(7); line (face1[i][0], face1[i][1], face1[i+1][0], face1[i+1][1]); setcolor(8); line (face2[i][0], face2[i][1], face2[i+1][0], face2[i+1][1]); setcolor(9); line (face1[i][0], face1[i][1], face2[i][0], face2[i][1]); }

delay (12500); }

void main() { int gd = DETECT, gm;

midx1 = (face1[0][0] + face1[1][0]) / 2.0; midy1 = (face1[1][1] + face1[2][1]) / 2.0; midx2 = (face2[0][0] + face2[1][0]) / 2.0; midy2 = (face2[1][1] + face2[2][1]) / 2.0;

initgraph (&gd, &gm, "..\\bgi");

while (!kbhit())


closegraph(); }


Experiment No:9

Date: 01-08-2012

Specification: Rotating, Scaling, Reflecting, Shearing, and Translating 3D objects. Program Theory: Methods for geometric transformations and object modeling in three dimensions are extended from two-dimensional methods by including considerations for the z coordinate. We now translate an object by specifying a three-dimensional translation vector, which determines how much the object is to be moved in each of the three coordinate directions. Similarly, we scale an object with three coordinate scaling factors. In three-dimensional space, we can now select any spatial orientation for the rotation axis. Alternatively, a user can easily set up a general rotation matrix, given the orientation of the axis and the rotation angle. As in the twodimensional case, we express geometric transformations in matrix form. Any sequence of transformations is then represented as, a single matrix, formed by concatenating the matrices for the individual transformations in the sequence. Translation: In 3D homogeneous co-ordinates representation, a point is translated from position P (x,y,z) to position P(x,y,z), by using the translating matrix T (i.e P=P.T) where T= 1 0 0 0 1 0 0 0 1 0 in which tx,ty,tz specifies the translation distance. Thus the point x =x+tx; 0 y=y+ty, z=z+tz. 0

tx ty tz 1 y-axis Examples P(x,y,z) y-axis P(x,y,z)





Figure (i) represents the transformation of single point P. Figure (ii) represents the transformation of the complete 3D object, which is done by the translating its co-ordinates, denoted by the dotted lines.

Steps of Translating 1. 2. 3. 4. Start Initialize the graphics mode. Construct a 2D/3D object Transformation Each point x=x+tx, y=y+ty and z=z+tz 5. Plot the points and join.

Inputs: Translating points Rotation To generate a rotation transformation for an object, we must designate an axis of rotation and the amount of angular rotation. Unlike two-dimensional applications, where all transformations are carried out in the xy plane, a three-dimensional rotation can be specified around any line in space. The easiest rotation axes to handle are those that are parallel to the coordinate axes. Also, we can use combinations of coordinate axis rotations to specify any general rotation.

Rotation about z-axis X=xcos y sin Y= xsin + y cos Z=z Rotation about x-axis Y=y cos z sin Z=y sin + z cos X=x Rotation about y-axis Z=z cos x sin

X=z sin + x cos Y= y Input : enter angle to be rotated : 180 Output: rotated image by 180o


Scaling: Scaling is a kind of transformation in which the size of an object is changed. The changes in size does not make any effect on the image or objected shape. Which is carried out for polygons by multiplying each coordinates with the scaling factor (ie Sx,Sy,Sz).

X Y Z 1 P =

Sx 0 0 0 1 0 0 S

0 Sz 0

0 0 0 0

x y z 1 P => P= S.P (i.e: X=x.Sx,Y=y.Sy,Z=z..Sz)

Sy 0

Uniform Scaling: To achieve uniform scaling the values of scaling factor must be kept equal. Differential Scaling: Its produced when the scaling factors are not equal. To prevent an object from moving its position while scaling we can use a fixed point. Example: Scaling with respect to a selected fixed position (xf,,yf,zf) which is represented as follows.

(xf,,yf,zf) (xf,,yf,zf) Fig: (i) Initial Fig: (ii) Moving the object to origin


(xf,,yf,zf) Fig(iii) Scaling of the object Fig(iv) Final after scaling

Matrix representation for arbitrary fixed point scaling sx 0 0 T(xf,,yf,zf) .S(sx,sy,sz).T(-xf,,-yf,-zf) = 0 sy 0 0 0 0 0 (1-sx)xf (1-sx)xf 1

0 sz (1-sx)xf

Steps of Scaling

1. 2. 3. 4.

Start Initialize the graphics mode. Construct a 2D/3D object Scaling x= Sx.x , y = Sy.y , z=Sz..z Input: Scaling factor Output:

Before scaling

After scaling

Reflection: The three dimensional reflection can be relative to a selected reflection axis or with respect to a selected reflection plane. The three dimensional reflection matrices are set up similarly to those for two dimensions. Reflections about equivalent to 1800 rotation about that axis. Reflection with respect to a plane is equivalent to 1800 rotation in four dimensional space. The reflection to xy,yz and zx plane are :

Reflection relative to xy plane:Rfz = 1 0 0 0 0 1 0 0 0 0 Reflection relative to XY plane

0 -1 0 0 0 1

Reflection relative to YZ plane

Reflection relative to XZ plane

Steps of Reflection 1. 2. 3. 4. a. Start Initialize the graphics mode. Construct a 2D object Reflection About X axis i. x= x , y = -y

ii. b. About Y axis i. ii.

Plot (x,y) x= -x , y=y plot (x,y)

Shearing Shearing transformations are used to modify the shape of the object and they are useful in 3D viewing for general projection transformations

Shx= 1 a b 0 01 0 0 0 0 1 0 0 0 0 1

Shy= 1 0 0 0 a 1 b 0 0 0 0 10 0 00

Shz= 1 0 0 0 0 1 0 0 a b 1 0 0 0 0 1

Steps for shearing 1. 2. 3. 4. a. Start Initialize the graphics mode. Construct a 2D object Shearing X-shear i. ii. iii. b. Y-shear i. ii. c. Plot (x,y) Get the shearing value shy x=x , y=y+ shy * x Get the shearing value shx x=x + shx * y, y=y Plot (x,y)

Program Code: #include<stdio.h> #include<conio.h> #include<graphics.h> #include<math.h> void translate(); void scale(); void rotate(); void shear(); void reflect(); int main() { int ch; int gd=DETECT,gm; initgraph(&gd,&gm,""); setcolor(6); outtextxy (100,88,"Object."); rectangle(100,150,150,100); getch(); cleardevice(); translate();


scale(); rotate(); shear(); reflect(); closegraph(); return 0; } void translate() { int tx,ty; setcolor(2); outtextxy(240,10,"TRANSLATION"); outtextxy(238,20,"------------"); printf("\nEnter tx: "); scanf("%d",&tx); printf("\nEnter ty: "); scanf("%d",&ty); cleardevice(); rectangle(100,150,150,100); printf("\nAfter Translation"); rectangle(100+tx,150+ty,150+tx,100+ty);

getch(); cleardevice(); } void scale() { int sx,sy; setcolor(2); outtextxy(240,10,"SCALING"); outtextxy(238,20,"--------"); printf("\nEnter sx: "); scanf("%d",&sx); printf("\nEnter sy: "); scanf("%d",&sy); cleardevice(); rectangle(100,150,150,100); printf("\nAfter Scaling"); rectangle(100*sx,150*sy,150*sx,100*sy); getch(); cleardevice(); }

void rotate() { float theta; int x1,x2,x3,x4; int y1,y2,y3,y4; int ax1,ax2,ax3,ax4,ay1,ay2,ay3,ay4; int refx,refy; printf("\nEnter the angle for rotation: "); scanf("%f",&theta); theta=theta*(3.14/180); cleardevice(); setcolor(2); outtextxy(240,10,"ROTATE"); outtextxy(238,20,"-------"); refx=100; refy=100; x1=100; y1=100; x2=150; y2=100; x3=150;

y3=150; x4=100; y4=150; ax1=refy+(x1-refx)*cos(theta)-(y1-refy)*sin(theta); ay1=refy+(x1-refx)*sin(theta)+(y1-refy)*cos(theta); ax2=refy+(x2-refx)*cos(theta)-(y2-refy)*sin(theta); ay2=refy+(x2-refx)*sin(theta)+(y2-refy)*cos(theta); ax3=refy+(x3-refx)*cos(theta)-(y3-refy)*sin(theta); ay3=refy+(x3-refx)*sin(theta)+(y3-refy)*cos(theta); ax4=refy+(x4-refx)*cos(theta)-(y4-refy)*sin(theta); ay4=refy+(x4-refx)*sin(theta)+(y4-refy)*cos(theta); rectangle(100,150,150,100); line(ax1,ay1,ax2,ay2); line(ax2,ay2,ax3,ay3); line(ax3,ay3,ax4,ay4); line(ax4,ay4,ax1,ay1); getch(); cleardevice(); } void shear() {

int x,y; rectangle(100,150,150,100); outtextxy(10,10,"Enter value of x shear:"); scanf("%d",&x); cleardevice(); line(100,150,150,150); line(100+x,100,150+x,100); line(100,150,100+x,100); line(150,150,150+x,100); getch(); cleardevice(); rectangle(100,150,150,100); outtextxy(10,10,"Enter value of y shear:"); scanf("%d",&y); cleardevice(); line(100,100,100,150); line(150,100+y,150,150+y); line(100,100,150,100+y); line(100,150,150,150+y); getch(); cleardevice();

} void reflect() { outtextxy(50,50,"REFLECTION"); rectangle(100,150,150,100); line(80,160,170,160); outtextxy(175,160,"Y=0"); rectangle(100,170,150,220); getch(); } OUTPUT:

Adobe Flash (formerly Macromedia Flash) is a multimedia platform used to add animation, video, and interactivity to web pages. Flash is frequently used for advertisements, games and flash animations for broadcast. More recently, it has been positioned as a tool for "Rich Internet Applications" ("RIAs"). Flash manipulates vector and raster graphics to provide animation of text, drawings, and still images. It supports bidirectional streaming of audio and video, and it can capture user input via mouse, keyboard, microphone, and camera. Flash contains an object-oriented

language called ActionScript and supports automation via the JavaScript Flash language (JSFL). Flash content may be displayed on various computer systems and devices, using Adobe Flash Player, which is available free of charge for common web browsers, some mobile phones, and a few other electronic devices (using Flash Lite). Some users feel that Flash enriches their web experience, while others find the extensive use of Flash animation, particularly in advertising, intrusive and annoying. Flash has also been criticized for adversely affecting the usability of web pages.

History of FLASH:
Flash originated with the application SmartSketch, developed by Jonathan Gay. It was published by Future Wave Software, which was founded by Charlie Jackson, Jonathan Gay and Michelle Welsh. SmartSketch was a drawing application for pen computers running the PenPoint OS. When PenPoint failed in the marketplace, SmartSketch was ported to Microsoft Windows and Mac OS. As the Internet became more popular, FutureWave added cell animation editing to the vector drawing capabilities of SmartSketch and

released FutureSplash Animator on multiple platforms. FutureWave approached Adobe Systems with an offer to sell them FutureSplash in 1995, but Adobe turned them down at that

time. FutureSplash was used by Microsoft in its early work with the Internet (MSN), and also by Disney Online for their subscription-based service, Disney's Daily Blast. In 1996, FutureSplash was acquired by Macromedia and released as Flash, contracting "Future" and "Splash". Flash is currently developed and distributed by Adobe Systems, as the result of their 2005 purchase of Macromedia.

Flash files are in the SWF format, traditionally called "ShockWave Flash" movies, "Flash movies," or "Flash applications", usually have a .swf file extension, and may be used in the form of a web page plug-in, strictly "played" in a standalone Flash Player, or incorporated into a self-executing Projector movie. Flash Video files have an .flv file extension and are either used from within .swf files or played through an flv-aware player, such as VLC, or QuickTime and Windows Media Player with external codecs added. The use of vector graphics combined with program code allows Flash files to be smallerand thus for streams to use less bandwidththan the corresponding bitmaps or video clips. For content in a single format (such as just text, video, or audio), other alternatives may provide better performance and consume less CPU power than the corresponding Flash movie, for example when using transparency or making large screen updates such as photographic or text fades.

Scripting language:
ActionScript is the programming language used by Flash. It is an enhanced superset of the ECMAScript programming language, more commonly known as Javascript, but provides additional features for processing animations and other functionality not normally found in Javascript.

The Timeline in Adobe Flash Professional organizes and controls a document's content over time in layers and frames. Like movie film, Flash documents divide lengths of time into

frames. Layers are like multiple filmstrips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead:

Layers in a document are listed in a column on the left side of the Timeline. Frames contained in each layer appear in a row to the right of the layer name. The Timeline header at the top of the Timeline indicates frame numbers.

Playhead indicates the current frame displayed on the Stage. As a document plays, the playhead moves from left to right through the Timeline. By default, the playhead loops when it reaches the end.

The Timeline status displayed at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame. Note: When an animation is played, the actual frame rate is displayed; this may differ from the document's frame rate setting if the computer cannot calculate and display the animation quickly enough.

Parts of the Timeline A. Playhead B. Empty keyframe C. Timeline header D. Guide layer icon E. Frame view pop-up menu F. Frame-by-frame animation G. Tweened animation H. Scroll to Playhead button I. Onion-skinning buttons J. Current frame indicator K. Frame rate indicator L. Elapsed time indicator

The Timeline shows where animation occurs in a document, including frame-by-frame animation, tweened animation, and motion paths. Controls in the layers section of the Timeline make it possible to hide, show, lock, or unlock layers, as well as display layer contents as outlines. You can drag frames to a new location on the same layer or to a different layer. If you enable the onion skin feature, you can see multiple frames simultaneouslyhelpful when creating frame-by-frame animations. In addition to the main Timeline you see displayed in the Flash workspace, movie clip and button symbols also have timelines. Timelines can be nested (placed inside other timelines) to organize animations and specific functionality within a Flash project.

Experiment No: 10 Specification: Timeline programs for designing in flash. Program A: Creating a blinking text. Program Code:
1. Open the flash document.

Date: 05-09-2012


2. Choose the text box from the toolbar and typethe word CONGRATULATIONS in layer 1. 3. Select the complete word and increase the font size and assign the color. 4. Now assign mirror effect to the contents of layer 1. 5. Now insert layer 2 and fill it with stars design. 6. With every time slice change the order and number of stars in layer 2. 7. Finally go to control and test the movie.


Experiment No: 10

Date: 05-09-2012

Specification: Timeline programs for designing in flash. Program B: Program to change a circle in a square. Program Code:
1. Open the flash document. 2. Select the circle tool from tool bar, draw the circle on the work area and color it. 3. Click on 40th frame and then right click on it. Click on sub-option insert new key frame. 4. Select the last key frame (39th frame). 5. Draw the rectangle with a different color on the circle so that rectangle covers the circle completely. 6. Again click on last frame (i.e. 39th frame) and mark tween option as none under the properties panel. 7. Then select last but one panel before 39 i.e. 38.go to tween option and select as shape. 8. Go to control; click test the movie.



Experiment No: 10

Date: 12-09-2012

Specification: Timeline programs for designing in flash. Program C: procedure to indicate a ball bouncing in steps. Program Code:
1. Open the flash document. 2. Select the circle tool from the tool bar and draw a circle on work area and color it. 3. Select the rectangle tool from tool bar and draw stairs image on the work area. 4. Now, by changing the position of the ball( at every step ) keep inserting a new frame in time slice. 5. Go to control; click test the movie.



Experiment No: 10 Specification: Timeline programs for designing in flash.

Date: 12-09-2012

Program D: procedure to create animation which displays WELCOME. Program Code:

1. Create a new flash document. 2. Choose the text box from tool window and type the word as welcome on layer 1. 3. Select the complete word and increase its length and assign the color. 4. In timeline window, select the first frame. Right click on it and choose insert key frame option. Now, delete the last letter E from the word welcome and change the colors of remaining word. 5. Repeat the above procedure for letter m, o, c, l, e, w for the frames 2, 3, 4, 5, 6, 7. 6. Now select all the 7 key frames, right click on it and choose the option reverse the key frames. 7. After reversing all the frames, copy the last frame and past on next frame. 8. Select the complete word welcome and change the color. 9. Finally go to the control; click test the movie.



Experiment No: 10 Specification: Timeline programs for designing in flash.

Date: 19-09-2012

Program D: procedure to display BG image through name using mask filter. Program Code:
1. Open the flash document. 2. Go to file option and click on the option import; open external library; select the background image. 3. The selected image will be stores in your library. Open library and drag the image on the work area. 4. Go to view option; select zoom out. Resize the picture so that it exactly fixes the work area. 5. Insert layer2.choose text tool from tool bar and type your name. 6. Select the text to change its font size and its color. Place text on left on work area. 7. Right click on 70th frame of layer 2 and insert a key frame. Move the text to right side of work area, right click on 69th frame of layer 2.go for properties, in properties panel, go to tween option and select motion type. 8. Right click on layer 2 and choose option mask. 9. Go to control; click test the movie.



ActionScript is an object-oriented language originally developed by Macromedia Inc. (now owned by Adobe Systems). It is a dialect of ECMAScript (meaning it is a superset of the syntax and semantics of the language more widely known as JavaScript), and is used primarily for the development of websites and software targeting the Adobe Flash Player platform, used on Web pages in the form of embedded SWF files. The language itself is open-source in that its specification is offered free of charge and both an open source compiler and open source virtual machine are available. ActionScript was initially designed for controlling simple 2D vector animations made in Adobe Flash (formerly Macromedia Flash). Initially focused on animation, early versions of Flash content offered few interactivity features and thus had very limited scripting capability. Later versions added functionality allowing for the creation of Web-based games and rich Internet applications with streaming media (such as video and audio). Today, ActionScript is suitable for use in some database applications, and in basic robotics, as with the Make Controller Kit. Flash MX 2004 introduced ActionScript 2.0, a scripting programming language more suited to the development of Flash applications. It is often possible to save time by scripting something rather than animating it, which usually also enables a higher level of flexibility when editing. Since the arrival of the Flash Player 9 alpha (in 2006) a newer version of ActionScript has been released, ActionScript 3.0. ActionScript 3.0 is an object-oriented programming

language allowing far more control and code reusability when building complex Flash applications. This version of the language is intended to be compiled and run on a version of the ActionScript Virtual Machine that has been itself completely re-written from the ground up (dubbed AVM2). Because of this, code written in ActionScript 3.0 is generally targeted for Flash Player 9 and higher and will not work in previous versions. At the same time, ActionScript 3.0 executes up to 10 times faster than legacy ActionScript code. Timeline by player version:

Flash Player 2

Flash Player 3 Flash Player 4 Flash Player 5 Flash Player 6 Flash Player 7 Flash Player 8 Flash Player 9 (initially called 8.5) Flash Player 10 (initially called Astro) Flash Player 11

Timeline by ActionScript version: 20002003: ActionScript "1.0" 20032006: ActionScript 2.0 2006today: ActionScript 3.0

Flash Lite:

Flash Lite 1.0: Flash Lite is the Flash technology specifically developed for mobile phones and consumer electronics devices. Supports Flash 4 ActionScript.

Flash Lite 1.1: Flash 4 ActionScript support and additional device APIs added. Flash Lite 2.0 and 2.1: Added support for Flash 7 ActionScript 2.0 and some additional fscommand2 API.

Flash Lite 3: Added support for Flash 8 ActionScript 2.0 and also FLV video playback. Flash Lite 4: Added support for Flash 10 ActionScript 3.0 as a browser plug-in and also hardware graphics acceleration.

AIR: Adobe AIR supports ActionScript, in addition to some extended contents, such as the Stage3D engine Adobe has developed. ActionScript on Adobe AIR has also increased efficiency and popularity because of its versatility of being able to run on many interfaces. The amount of APIs (Application programming interfaces) pointed at ActionScript 3.0 has also risen dramatically. SYNTAX: ActionScript code is free form and thus may be created with whichever amount or style of whitespace that the author desires. The basic syntax is derived from ECMAScript. ActionScript 2.0 The following code, which works in any compliant player, creates a text field at depth 0, at position (0, 0) on the screen (measured in pixels), that is 100 pixels wide and high. Then the text parameter is set to the "Hello, world" string, and it is automatically displayed in the player: When writing external ActionScript 2.0 class files the above example could be written in a file named Greeter. as as following.

createTextField("greet", 0, 0, 0, 100, 100); greet.text = "Hello, world"; class com.example.Greeter extends MovieClip { public function Greeter() {} public function onLoad():Void { var txtHello:TextField = this.createTextField("txtHello", 0, 0, 0, 100, 100); txtHello.text = "Hello, world"; } }

PROGRAMS ON ACTION SCRIPTS Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_1.fla

Program 11(a): Creating a text field.

this.createTextField(Howgreat,1,0,0,100,100); this.Howgreat.text=Hello world;


Hello World

Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_2.fla

Program 11(b): Creating Password input screen

this.createTextField(x,1,0,0,50,10); x.password=true; x.text=Hello;



Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_3.fla

Program 11(c): Drawing Curves. this.createEmptyMovieClip(Circle_mc,1); with(circle_mc) { Linestyle(0,0x0000FF,100); moveTo(0,150); curveTo(100,55,200,140); moveTo(200,150); curveTo(140,240,10,160); }


Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_4.fla

Program 11(d): Determining language and OS of a System. version=eval($version); var ostype; OSArray=version.split( ); ostype=OSArray[0] trace(OS is +ostype); var a=System.capabilities.language; trace(Language is +a);


OS is WIN Language is en

Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_5.fla

Program 11(e):Calculate the distance between 2 points. function func() { var x1=10; var y1=10; var x2=5; var y2=5; var x0=x2-x1; var y0=y2-y1; var dist=Math.sqrt(Math.pow(x0,2)+Math.pow(y0,2)); trace(The distance between 2 points is +dist); } func();


The distance between 2 points is 7.07106781186548

Expermiment No:11 Specification: Action Script Programming in flash version 2.0 #Action_Script_6.fla

Program 11(f):Implementation of selection sort.

function ssort() { var min:Number; var temp:Number; var maxsize=5; var elements:Array; elements=new Array(); elements[0]=23; elements[1]=13; elements[2]=67; elements[3]=6; elements[4]=21; for(var i=0;i<maxsize;i++) { if(elements[j]<elements[min]) { min=j; } } temp=elements[i]; elements[i]=elements[min]; elements[min]=temp; } for(var i=0;i<maxsize;i++) trace(elements[i]); }



6 13 21 23 67

Experiment No: 12 Specification:

Date: 03-10-2012

Creation of html pages which includes 3 links. Program Name : Each link should consist a graphical image designed in flash. Program Code: #Pgm12.html

1. Open any 3 flash documents which are previously done. 2. In each flash document, go to file; click publish. By that, there is new file of html format is created. 3. So, we will get 3 html pages for respective flash documents. 4. Now, in same document folder, create a new html document and type the code and save it as 12.fla. 5. Now, after saving the code, double click the 12.html. Program Code: <html> <head> <body> <a href="stairs.html">click here! </a> <a href="congo.html">click here!</a> <a href="sqare_ball.html">click here!</a> </body> </html> </head>