1

Experiment 1 Implementation of circle, line and ellipse

Date : 30/7/19 drawing algorithm
AIM:

To draw a circle, line and ellipse using algorithm.

PROCEDURE:

Circle (Midpoint algorithm)

1. Input radius r and circle center(x,y) and obtain the first point in the
circumference of a circle centered on the origin as (X0, Y0)= (0, r).

2. Calculate the initial value of the decision parameter as P0=5/4-r.

3. At each xk position, starting at k=0, perform the following nest. if pk<0, the
next point along the circle centered as (0,0) is (xk+1,yk) and
pk+1=pk+2xk+1+1 otherwise next point along the circle is (xk+1,yk-1) and
pk+1=pk+2xk+1+1-2yk+1 where 2xk+1=2xk+2 and 2yk+1=2yk-2.

4. Determine symmetry points in the other seven octants.

5. Move each calculated pixel position(x,y) as the circular path centered as

(xc,yc) and plot the coordinate values X=x+xc, y=y+yc.

6. Repeat the step 3 through 5 until x>=y.

Bresenham’s line drawing algorithm for |m|<1

7. Input the two line end points and store the left endpoint in (x0,y0).

8. Load (x0,y0) into the frame buffer, that is plot the first point.×

9. Calculate constants and obtain the starting value for the decision parameter.

10. At each x along the line starting at k=0, perform the following test if pk<0,
the next point to plot is (xk+1,yk)and pk+1=pk+2y,otherwise the next point to
pot is (xk+1,yk+1) and pk+1=pk+2y-2x.

11. Repeat step 4 x times.

 2

MIDPOINT ELLIPSE ALGORITHM

12. Input xy and ellipse center(xc,yc) and obtain the first point on an ellipse
centered on the origin as (x0,y0)=(0,ry)

13. Calculate the initial value of the decision parameter in region, as p0=x2y-
r2x ry+1/4r2x

14. At each xk position in region1, starting at k=0, perform the following test if
pk<0, the next point along the ellipse centered on(0,0) is(xk+1,yk) and
Pk+1=pk+2r2yxk+1+r2y Otherwise, the next point along the circle is (xk+1, yk-
1) .

15. Calculate the initial value of the decision parameter in region 2 using the
last point(x0,y0) calculated in region1.

16. At each yk position in region2, stating at k=0, perform the following test.tff
p2k>0, the next point along the ellipse centered on(0,0) is(xk,yk-1).

17. Determine the symmetry points in the other three quadrants.

18. Move each calculated pixel position(x,y) Onto the elliptical path centered
on(xc,yc) and plot the co-ordinated values:

X=x+xc

Yy=y+yc

19. Repeat the steps for region1 until 2ryx>=2rxy.

PROGRAM CODING:

#include<stdio.h>
#include<conio.h>
#include<math.h>
#include<graphics.h>
void lined(int, int, int, int);
void circled(int, int, int);
void ellipsed(int, int, int, int);
void main()
{
int x, y, xe, ye, r, rx, ry, n;
int gd=DETECT, gm;
initgraph(&gd, &gm, "C:\\TURBOC3\\BGI");
do
 3

{
clrscr( );
printf("\n1. Line\n2. Circle\n3. Ellipse\n");
printf("Enter the Choice:");
scanf("%d",&n);
switch(n)
{
case 1:
printf("\nLINE DRAWING\nEnter the x and y axis:");
scanf("\n%d%d",&x,&y);
printf("\nEnter the Xend and yend:");

scanf("%d%d",&xe,&ye);
lined(x,y,xe,ye);
break;
case 2:
printf("\nCIRCLE DRAWING");
printf("\n Enter the x and y axis and also Radius:");
scanf("%d%d%d",&x,&y,&r);
circled(x,y,r);
break;
case 3:
printf("\nELLIPSE DRAWING");
printf("\nEnter the x,y and rx,ry:");
scanf("%d%d%d%d",&x,&y,&rx,&ry);
ellipsed(x,y,rx,ry);
break;
default:
exit(0);
break;
}
}while(n<=3);
getch();
closegraph( );
}
void lined(int xa,int ya,int xb,int yb)
{

int dx=abs(xa-xb);
int dy=abs(ya-yb);
int p=2*dy-dx;
int xend=2*dy;
int yend=2*(dy-dx);
 4

int x,y,end;
if(xa>xb)
{
x=xb;
y=yb;
xend=xa;
}
else
{ x=xa;
y=ya;
yend=xb;
}
while(x<xend)
{
x++;
if(p<0)
p+=xend;
else
{ y++;
p+=yend;
}
putpixel(x,y,10);
}
getch( );
}
void circled(int x,int y,int r)
{
int m=0,n=r, q;
void cplot(int,int,int,int);
q=3-(2*r);
while(m<n)
{
cplot(x,y,m,n);
if(q<0)
q=q+(4*m)+10;
else
{
q=q+(4*(m-n))+10;
n--;
}
m++;
}
if(m==n)
 5

cplot(x,y,m,n);
getch( );
}
void cplot(int xc,int yc,int x,int y)
{
putpixel(xc+x,yc+y,15);
putpixel(xc-x,yc+y,15);
putpixel(xc+x,yc-y,15);
putpixel(xc-x,yc-y,15);
putpixel(xc+y,yc+x,15);
putpixel(xc-y,yc+x,15);
putpixel(xc+y,yc-x,15);
putpixel(xc-y,yc-x,15);
}
void ellipsed(int xc,int yc,int rx,int ry)
{ int i;
for(i=0;i<=360;i++)
{
putpixel(xc+rx*cos(i*3.14/180),yc+ry*sin(i*3.14/180),15);
}
getch( );
 6

OUTPUT:

1.line 2.circle 3.ellipse

Enter the choice: 1

Line drawing

Enter the x and y axis: 30 40

Enter the x end and y end:80 90

1.line 2.circle 3.ellipse

Enter the choice:2

Circle drawing

Enter x and y and also radius: 80 90 50

1.line 2.circle 3.ellipse

Enter the choice:3

ellipse drawing

RESULT:

Thus the program is executed successfully and the output has been
verified.
 7

Experiment 2 Implementation to draw fill and clip the

Date : 13/08/19 polygon

AIM:
To write a program to implement a polygon fill and clip the polygon.

PROCEDURE:

FLOOD FILL ALGORITHM:

1. Create a function called as flood fill(x,y,old color,new color)

2. Reassign the pixel values that are currently set to given interior color with the
desire fill color.

3. Using either a 4-connected or 8-connected approach the step through pixel

positions unitl all interior points have been required.

4. Repeat until the polygon is completely filled

SUTHERLAND HODGMAN ALGORITHM

5. A convex polygon and a convex clipping area are given. The task is to clip
polygon in clock wise order clip given polygon against e.

6. Input is in the form of vertices of the polygon in clock wise order. Clip given
polygon against e.

7. The edge of clipping area is extended infinitely to create a boundary and all
the vertices are clipped using the boundary. The new list of vertices generated is
passed to the next edge of the clip polygon in clock wise until all the edges have
been used.

8. There are for possible cases for any given edge given polygon against current
clipping edge.

9. Both vertices are inside only the second vertex is added to the output list

10. First vertex is outside while second one is inside both the point of
intersection of the edge with the clip boundary and the second vertex are added
to the output list.

11. First vertex is inside while second one is outside only the point of
intersection of the edge with the clip boundary is added to the output list.

12. Both vertices are outside no vertices are added to the output list.
 8

13. There are two subproblems that need to be discussed before implementing
the algorithm.

14. To decide is if a point is inside or outside the clipper polygon.

15. If the vertices of the clipper polygon are given in clockwise order then all
the points lying on the right side of the clipper edges are inside that polygon.

16. Given the line starts from(x1,y1) and ends as (x2,y2).

17. To find the point of intersection of an edge with clip boundary.

18. If two points of each line (1,2,3,4) are known then their point of intersection
can be calculated using formula.

PROGRAM CODING:

import javax.swing.*;
import java.awt.*;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.image.BufferedImage;
import java.util.*;

public class Application extends JPanel implements MouseListener

{
private static final int WIDTH = 720;
private static final int HEIGHT = 480;
private static final int BOUNDARY_RGB = Color.red.getRGB();
private static final Color RED = Color.RED;
private BufferedImage mImage;
private ArrayList<Point> mVertices;
private Integer mFloodPoint;
private static Point point;
private void clearImage(){
mVertices = new ArrayList<>();
Graphics2D graphics2D = mImage.createGraphics();
graphics2D.setBackground(Color.black);
graphics2D.clearRect(0,0,WIDTH,HEIGHT);
repaint();
revalidate();
}
 9

Application(){
mImage = new BufferedImage(WIDTH,
HEIGHT,BufferedImage.TYPE_3BYTE_BGR);
mVertices = new ArrayList<>();
mFloodPoint = 0;
point = new Point(0,0);
addMouseListener(this);
}
@Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D graphics2D = mImage.createGraphics();
graphics2D.setBackground(Color.black);
g.drawImage(mImage,0,0,this);
}

@Override
public void mouseClicked(MouseEvent e) {
}
private boolean isVertexPoint(int x, int y){
for(Point point :mVertices)
if(point.X == x && point.Y == y)
return true;
return false;
}
private boolean isInside(int x, int y) {
boolean result = false;
int i,j;
for (i = 0, j = mVertices.size()- 1; i < mVertices.size(); j = i++) {
if ((mVertices.get(i).Y > y) != (mVertices.get(j).Y > y) &&
(x < (mVertices.get(j).X - mVertices.get(i).X) * (y -
mVertices.get(i).Y) /
(mVertices.get(j).Y-mVertices.get(i).Y) + mVertices.get(i).X))
{
result = !result;
}
}
return result;
 10

}
private void drawPolygon() {
if(mVertices.size() >= 3){
int totalVertices = mVertices.size();
Graphics2D graphics2D = mImage.createGraphics();
graphics2D.setColor(RED);
for(int i = 0 ; i < totalVertices - 1; ++i){
Point current = mVertices.get(i);
Point next = mVertices.get(i+1);
graphics2D.drawLine(current.X,current.Y,next.X, next.Y);
}
Point first = mVertices.get(0);
Point last = mVertices.get(totalVertices -1);
graphics2D.drawLine(first.X,first.Y,last.X,last.Y);
repaint();
revalidate();
}
}

@Override
public void mousePressed(MouseEvent e) {
if(e.getButton() == MouseEvent.BUTTON1) {
System.out.println("Adding point : " + e.getX()+" "+e.getY());
mVertices.add(new Point(e.getX(),e.getY()));
}
else if(e.getButton() == MouseEvent.BUTTON3){
if(mFloodPoint==0) {
System.out.println("Drawing polygon");
drawPolygon();
mFloodPoint = 1;
}
else if(mFloodPoint==1){
System.out.println("Filling polygon");
floodFill(e.getX(),e.getY(),Color.green);
mFloodPoint = 2;
}
else if(mFloodPoint==2){
Scanner in = new Scanner(System.in);
 11

System.out.println("Enter first corner point of clip window, width

height x y h w: ");
point.X = in.nextInt(); point.Y = in.nextInt();
int h = in.nextInt();
int w = in.nextInt();
in.close();
System.out.println("Clipping polygon");
clip(w, h);
mFloodPoint = 2;
System.out.println("Clipping polygon finished");
}
}
else if(e.getButton() == MouseEvent.BUTTON2){
clearImage();
}
}

private void floodFill(int x, int y, Color fillColor) {

Stack<Point> callStack = new Stack<>();

callStack.add(new Point(x,y));
while(!callStack.isEmpty()) {
Point point = callStack.pop();
if(isInside(point.X, point.Y)) {

if(mImage.getRGB(point.X, point.Y) != fillColor.getRGB() /*&&

mImage.getRGB(point.X, point.Y) != BOUNDARY_RGB*/)
{
//System.out.println("adding point " + point.toString());
mImage.setRGB(point.X, point.Y, fillColor.getRGB());
repaint();
revalidate();
callStack.add(new Point(point.X + 1, point.Y));
callStack.add(new Point(point.X - 1, point.Y));
callStack.add(new Point(point.X, point.Y + 1));
callStack.add(new Point(point.X, point.Y - 1));
}
}
 12

}
repaint();
}
private void clip(int w, int h){
for(int i=0;i<mImage.getWidth(); i++){
for(int j=0;j<mImage.getHeight(); j++){
if((i<=point.X || i>=point.X + w) || (j<=point.Y || j>=point.Y + h)){
mImage.setRGB(i, j, Color.black.getRGB());
}
}
}
repaint();
}

@Override
public void mouseReleased(MouseEvent e) {
}

@Override
public void mouseEntered(MouseEvent e) {
}

@Override
public void mouseExited(MouseEvent e) {
}

class Point{
int X, Y;
Point(int X, int Y){
this.X = X;
this.Y = Y;
}
}
public static void main(String[] args) {
Application app = new Application();
JFrame jFrame = new JFrame();
jFrame.setSize(720, 480);
jFrame.setBackground(Color.BLUE);
 13

jFrame.add(app);
jFrame.setVisible(true);
}
}

OUTPUT:

Javac polygon2.java

Java polygon

Adding point: 142 170,236 70,344 73,449 182,442 257,292 290,163 216

Drawing polygon

Filling polygon
 14

Adding point: 300 208,190,191,218,165,263 159,328 158,420 222,363 267,230

240,184 204

Enter first corner point of clip window, width height.

X,y,h,w:300 208 191 165

Clipping polygon

Clipping polygon finished

 15

RESULT:

Thus the program is executed successfully and the output is verified.

 16

Experiment 3 Implementation of 2D and 3D transformation

Date : 3/09/19 in blender

AIM:

To write a program to implement 2D and 3D transformation techniques

using blender.

PROCEDURE:

3D ANIMATION

1. Install blender application(version 2.78) open a new page and delete the cube
by pressing ‘x’ to delete the selected object or insert in that object itself.

2. Press “shift+A” got to “mesh” and then select the “monkey”

3. The monkey will appear in the screen and then press ‘Z’ to hide the box and
numpad1 for ‘front’ view and numpad5 for pers/ortho view.

4. And then press “ctrl+three” for the select of the object and goto tools and
addmodifier and shrinkwrap.

5. Press “shift+D” to display the two objects for the edit mode.

6. Select an object(“monkey”) and select addmodifier and shrinkwrap and select

the target as “cube” and press “apply”.

7. Press “tab” key to select that whole object.

8. Atlast goto toggle edit mode and select “numpad slash” and press “z” and
press “A”.

9. Enable the edit mode and press “G” to select the object and stretch the object.

10. Press “B” to make it as a perfect cube a nd press “B*2”.Select and make it
as a perfect cube.

11. And press “numpad slash” to view the object and press tab to select the
object.

12. Press shift key+right click to select the both the objects.

13. Apply modifier->go to shape keys->press join as shapes.

14. Now we can increase and decrease the value by changing the shapes.
 17

15. And now finally the output comes. The cube is converted to monkey by
morphing.

2D-ANIMATION

16. On the blender select 2D animation.

17. By creating a new layer draw a rectangle.

18. Select another frame and select the object by pressing G and move the
object to appropriate position.

19. Repeat step5 unitl.

OUTPUT:

3D ANIMATION
 18

2D ANIMATION

RESULT:

Thus the program is executed successfully and the output has been
verified.
 19

Experiment 4 A man walking in the city road

Date : 17/09/19 Animation creation-1

AIM:

To implement a man walking in the road graphic animation using c++

programming language.

PROCEDURE:

CREATING MAN

1. For creating man we should measure a pixel rate on creating a man head with
three points.

2. Enter the leg and hand length using graphic line with three length

3. Set delay time for executing graphic animation.

4. For making a man to walk walk+=5;

5. Line circle meter to exclude to assign with walk.

6. Once walking is to begin clear the black screen.

CREATING HOUSE

7. In these we use two clouds scenery animation measure the pixel point and
ellipse creating with different co-ordinates.

8. For right cloud measure the animation on scenery measure the ellipse with
five coordinates.

CREATING MOON

9. Hence we create a cycle using lines scenery animation measure the pixel
point and lines and ellipse creating with different co-ordinates.
 20

PROGRAM CODING:

#include<stdio.h>

#include<conio.h>

#include<graphics.h>

#include<dos.h>

void main()

int gdriver=DETECT,gmode,i;

int x1=100,t1=x1-30,t2=x1+30;

int a1=t1,a2=t2;

initgraph(&gdriver,&gmode,"c:\\turboC3\\BGI");

//road

line(10,401,630,401);

//wheels

circle(40,370,30);

circle(150,370,30);

line(40,370,100,370);

line(40,370,60,340);

line(100,370,120,340);

line(120,340,60,340);

line(60,340,60,335);

line(55,335,65,335);

line(150,370,100,320);
 21

line(100,320,90,320);

//

for(i=0;i<30;i++)

for(;t1<x1+30&&t2>x1-30;t1++,x1++,t2--)

delay(50);

clrscr();

line(0,310,1366,310);

circle(x1,100,30);

line(

x1,130,x1,220);

line(x1,150,a1=a1+5,200);

line(x1,150,a2=a2-3,200);

line(x1,220,t1=t1+4,310);

line(x1,220,t2=t2-2,310);

t1=x1-30;t2=x1+30;a1=t1;a2=t2;

getch();
 22

OUTPUT:

RESULT:

Thus the program is executed successfully and the output has been
verified.
 23

Experiment 5 A person riding a bicycle in a park

Date : 15/10/19 Animation Creation-II

AIM:

To implement a person riding a bicycle in a park graphic animation using

VB.net programming language

PROCEDURE:

1. Select the form from VB.net.

2. Insert the picture by clicking the picturebox in the toolbox.

3. Insert another picturebox2 to create the person riding a bicycle image.

4. Select timer in the toolbox to move the image.

5. Select the image by right click the arrow button of the picturebox and choose
image from local folder.

6. Load the picturebox, run the file by click the run button.

7. Add the size of the image to stretch the image like PictureBox1.SizeMode =
PictureBoxSizeMode.StretchImage.

8. Add the code for picture box 2.

9. Set the timer to move the image

Timer1.Interval = 500

If PictureBox1.Left < 950 Then

PictureBox1.Left = PictureBox1.Left + 10

PROGRAM CODING:

Public Class Form1

Private Sub PictureBox1_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles PictureBox1.Click
 24

PictureBox1.Image = Image.FromFile("d:\summer-city-park-with-street-
lights_1262-16617.jpg")

PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage

End Sub

Private Sub PictureBox2_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles PictureBox2.Click

PictureBox2.Image = Image.FromFile("d:\IgnorantMintyAlbatross-
size_restricted.gif")

PictureBox2.SizeMode = PictureBoxSizeMode.StretchImage

PictureBox2.Location = New Point(PictureBox2.Left - 10,

PictureBox2.Top + 10)

End Sub

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As

System.EventArgs)

PictureBox1.Location = New Point(PictureBox1.Left - 10, PictureBox1.Top +

10)

End Sub

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MyBase.Load

End Sub

Private Sub Timer1_Tick_1(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles Timer1.Tick

Timer1.Interval = 500

If PictureBox1.Left < 950 Then

PictureBox1.Left = PictureBox1.Left + 10
 25

Else

Timer1.Enabled = False

End If

End Sub

End Class

OUTPUT:

RESULT:

Thus the program is executed successfully and the output has been
verified.

Experiment 6
 26

Date : 31/10/19 Animation Creation –III

AIM:

To implement the cartoon simulation character technique using blender.

PROCEDURE:

1. In html code , select all the items to create the image using the tools and tags
used in the html code.

2. Type the tag <html> code and insert all the tags inside the html code.

3. Load the animation by run the code using the chrome browser.

4. To run the code right click and run the code by using chrome tab.

5. To run this save as give file name and save as .html code.

6. The animation will run.

PROGRAM CODING:

<HTML>
<head>
<title>Minions CSS</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="container">
<h1> </h1>
<h6> <a href="www.amrzek.com"></a></h6>
<div class="bill">
<div class="lights">
<span class="white_light"></span>
 27

<span class="dark_light"></span>
</div>
<div class="hair">
<span class="hair1"></span>
<span class="hair1
make_it_left_hair1"></span>
<span class="hair2"></span>
</div>
<div class="eyes">
<div class="eye_animate"></div>
<div class="glasses"></div>
<div class="white_part">
<div class="brown_eye">

<spanclass="black_part"></span>
</div>
</div>
</div>
<div class="black_tie">
<span class="right_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
<span class="left_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
</div>
 28

<div class="smile"></div>
<div class="arm"></div>
<div class="hand"><span
class="hand_parts"><span></div>

<div class="arm make_it_right_arm"></div>

<div class="hand make_it_right_hand"><span
class="hand_parts"><span></div>
<div class="curves">
<span class="curve1"></span>
<span class="curve1
make_it_left_curve"></span>
<span class="curve2"></span>
</div>
<div class="clothes">
<div class="main"></div>
<div class="blue_borders"></div>
<div class="right_shirt"></div>
<div class="right_shirt make_it_left"></div>
<div class="bottom"></div>
</div>
<div class="pocket">
<div class="logo"></div>
<span class="lines"></span>
</div>
<div class="legs">
<div class="right_leg"></div>
<div class="right_leg make_it_left_leg"></div>
 29

<div class="shoes"><span
class="small_shoes"></span></div>
<div class="shoes make_it_left_shoes"><span
class="small_shoes"></span></div>
</div>
<h2>Bill</h2>
</div>
<div class="jerry">

<div class="lights">
<span class="white_light"></span>
<span class="dark_light"></span>
</div>
<div class="jerry_hair">
<ul>
<li class="h1"></li>
<li class="h2"></li>
<li class="h3"></li>
<li class="h4"></li>
<li class="h5"></li>
<li class="h6"></li>
<li class="h7"></li>
<li class="h8"></li>
<li class="h9"></li>
<li class="h10"></li>
<li class="h11"></li>
<li class="h12"></li>
</ul>
 30

</div>

<div class="eyes1">
<div class="eye_animate"></div>
<div class="glasses"></div>
<div class="white_part">
<div class="brown_eye">
<span
class="black_part"></span>
</div>
</div>
</div>
<div class="eyes2">
<div class="eye_animate"></div>
<div class="glasses"></div>
<div class="white_part">
<div class="brown_eye">
<span
class="black_part"></span>
</div>
</div>
</div>

<div class="jerry_hand">
<div class="jerry_lh"></div>
<div class="animated_lh">
<span class="gloves_lh"></span>
<span class="gloves_lh2"></span>
 31

</div>

<div class="jerry_rh"></div>
<span class="gloves_rh"></span>
</div>
<div class="black_tie">
<span class="right_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
<span class="left_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
</div>
<div class="jerry_smile">
<span class="teeth1"></span>
<span class="teeth2"></span>
</div>
<div class="curves">
<span class="jerry_curve1"></span>
<span class="jerry_curve1
jerry_left_curve"></span>
<span class="jerry_curve2"></span>
</div>
<div class="clothes">
<div class="main_jerry"></div>
 32

<div class="right_shirt
jerry_right_shirt"></div>
<div class="right_shirt jerry_left_shirt"></div>
<div class="jerry_bottom"></div>
</div>
<div class="pocket">
<div class="logo"></div>
<span class="lines"></span>
</div>
<div class="legs">
<div class="jerry_shoes"><span
class="jerry_small_shoes"></span></div>
<div class="jerry_shoes
jerry_left_shoes"><span class="jerry_small_shoes"></span></div>
</div>
<h2>Jerry</h2></div>
<div class="evil">
<ul class="evil_hair">
<li class="eh1"></li>
<li class="eh2"></li>
<li class="eh3"></li>
<li class="eh4"></li>
<li class="eh5"></li>
</ul>
<div class="eyes">
<div class="eye_animate"></div>

<div class="glasses"></div>
<div class="white_part">
 33

<div class="brown_eye">
<span
class="black_part"></span>
</div>
</div>
</div>
<div class="black_tie">
<span class="right_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
<span class="left_tie">
<div class="top_tie"></div>
<div class="down_tie"></div>
</span>
</div>
<div class="evil_mouth">
<span class="evil_teeth"></span>
<span class="evil_teeth1"></span>
</div>
<div class="clothes">
<div class="right_shirt evil_right_shirt"></div>
<div class="right_shirt evil_left_shirt"></div>
<div class="evil_bottom"></div>
<div class="evil_logo"><p>M</p></div>
</div>

<div class="legs">
 34

<div class="evil_right_leg"></div>
<div class="evil_right_leg
evil_left_leg"></div>
<div class="shoes evil_right_shoes"><span
class="small_shoes"></span></div>
<div class="shoes evil_left_shoes"><span
class="small_shoes"></span></div>
</div>
<div class="evil_hand">
<div class="evil_rh">
<span class="evil_gloves_rh"></span>
</div>
<div class="evil_lh">
<span class="evil_gloves_lh"></span>
</div>
</div>
<h2>Evil</h2>
</div>
</div>
</body>
</HTML>
 35

OUTPUT:

RESULT:

Thus the program is executed successfully and the output has been
verified.