INDEX

S.No Experiment Name Date

1 Study about the various Multimedia Tools like Adobe, Maya etc. 24-02-2022
for creation of various kinds of multimedia applications and
animation based applications

2 Write a program to design an interactive web application for 03-03-2022

the University Management System
3 Design an interactive application using AngularJS for a dynamic 03-03-2022
weather updates application
4 Design a program for creation of image map using Javascript 10-03-2022
5 Write a program to implement the Huffman coding lossless 17-03-2022
data compression algorithm
6 Design a program to implement the Shannon-Fano algorithm for data 17-03-2022
compression
7 Design a program to implement the LZW (Lempel–Ziv– 17-03-2022
Welch) compression algorithm
8 Using Python OpenCV library, write a program to do the following - 07-04-2022
(a) Open an image
(b) Retrieve size of image
(c) Resize an image
9 Using Python OpenCV library, write a program to do the following - 07-04-2022
(a) Crop an image
(b) Rotate an image
(c) Create Histogram of an image
(d) Transposing an Image
(e) Splitting an Image
10 Using Python OpenCV library, write a program to do the following - 14-04-2022
(a) Play a video
11 Study and explore the various vector graphics softwares like 21-04-2022
CoralDraw, Sketch, Adobe Illustrator and design a vector drawing in
any one of them
12 Write a program to compress the JPEG images of your choice 21-04-2022
 Experiment - 1

Aim: Study about the various Multimedia Tools like Adobe, Maya etc. for creation of
various kinds of multimedia applications and animation based applications

Maya

About

Maya is professional 3D software for creating realistic characters and blockbuster-worthy effects.

Bring believable characters to life with engaging animation tools.

Shape 3D objects and scenes with intuitive modelling tools.

Create realistic effects – from explosions to cloth simulation

Language(s) (written in)

C, C++ and Python

Size
147–205 MiB (varies by operating system)

Compatible Operating Systems

● Linux
● MacOS
● Windows
● Android
● FreeBSD
● OpenBSD
● NetBSD
● DragonFly BSD
● Haiku

Features offered
● 3D modeling
● UV mapping
● Texturing
● Digital drawing
● Raster graphics editing
● Rigging and skinning
● Fluid and smoke simulation
● Particle simulation
● Soft body simulation
● Sculpting
● Animation
● Match moving
● Rendering
● Motion graphics
● Video editing
● Compositing
User Interface
1. Commands
● Most of the commands are accessible via hotkeys.
● There are also comprehensive graphical menus. Numeric buttons can be "dragged" to
change their value directly without the need to aim at a particular widget, as well as
being set using the keyboard.
● Both sliders and number buttons can be constrained to various step sizes with
modifiers like the Ctrl and Shift keys.
● Python expressions can also be typed directly into number entry fields, allowing
mathematical expressions to specify values.
2. Modes
● It includes many modes for interacting with objects, the two primary ones being
Object Mode and Edit Mode, which are toggled with the Tab key.
● Object mode is used to manipulate individual objects as a unit, while Edit mode is
used to manipulate the actual object data.
● For e.g, Object Mode can be used to move, scale, and rotate entire polygon meshes,
and Edit Mode can be used to manipulate the individual vertices of a single mesh.
● There are also several other modes, like Vertex Paint, Weight Paint, and Sculpt Mode.
3. Workspaces
● The Blender GUI builds its tiled windowing system on top of one or multiple
windows provided by the underlying platform.
● One platform window (often sized to fill the screen) is divided into sections and
subsections that can be of any type of Blender's views or window types.
● The user can define multiple layouts of such Blender windows, called screens, and
switch quickly between them by selecting from a menu or with keyboard shortcuts.
 Each window type's own GUI elements can be controlled with the same tools that
manipulate the 3D view.
● For example, one can zoom in and out of GUI-buttons using similar controls, one
zooms in and out in the 3D viewport. The GUI viewport and screen layout are fully
user-customizable. It is possible to set up the interface for specific tasks such as
video editing or UV mapping or texturing by hiding features not used for the task.

Snowman on Blender
 Experiment - 2

Aim: Write a program to design an interactive web application for the University
Management System

Code

Output
 Experiment - 3

Aim: Design an interactive application using JS for a dynamic weather updates

application

Code

Output
 Experiment - 4

Aim: Design a program for creation of image map using Javascript

Code

<html>
<head>
<title> JavaScript Image Map </title>
<script>
function show(name) {
document.my.res.value = name;
}
</script>
</head>
<body style = "text-align: center;">
<h2> It is an example of JavaScript's Image map </h2>
<form name = "my">
<input type = "text" name = "res" size = "25px" style = "font-size: 25px;
text-align: center; border: 2px solid blue; background-color: pink;"/>
</form>
<br>
<img src = "https://i.guim.co.uk/img/media/e2…5ac0" border = "5" usemap = "#names"
height = "300px"/>
<map name = "names">
<area shape = "rect" coords = "0, 0, 325, 90" href = "forest.jpg" onclick =
"show('forest.jpg')" />
<area shape = "circle" coords = "150, 140, 60" href = "tiger.jpg" onclick
= "show('tiger.jpg')" />
</map>
</body>
</html>

t
 Experiment - 5

Aim: Write a program to implement the Huffman coding lossless data compression
algorithm

Code

class node:
def init (self, freq, symbol, left=None, right=None):
self.freq = freq # frequency of symbol
self.symbol = symbol # symbol name (character)
self.left = left # left node
self.right = right # right node
self.huff = ''

def printNodes(node, val=''):

newVal = val + str(node.huff)

if(node.left):
printNodes(node.left, newVal)
if(node.right):
printNodes(node.right, newVal)

if(not node.left and not node.right):

print(f"{node.symbol}\t{node.freq} \t {newVal}")

chars = ['a', 'b', 'c', 'd', 'e', 'f']

freq = [5, 9, 12, 13, 16, 45]

nodes = []

for x in range(len(chars)):
nodes.append(node(freq[x], chars[x]))

while len(nodes) > 1:

nodes = sorted(nodes, key=lambda x: x.freq)
left = nodes[0]
right = nodes[1]
left.huff = 0
 right.huff = 1

newNode = node(left.freq + right.freq, left.symbol + right.symbol, left,

right)

nodes.remove(left)
nodes.remove(right)
nodes.append(newNode)

print("Symbol Frequency Huffman Code")

printNodes(nodes[0])

Output
 Experiment - 6

Aim: Design a program to implement the Shannon-Fano algorithm for data compression

Code

class node :
def init (self) -> None:
self.sym=''
self.pro=0.0 # store probability
self.arr=[0]*20
self.top=0
p=[node() for _ in range(20)]

def shannon(l, h, p):

pack1 = 0; pack2 = 0; diff1 = 0; diff2 = 0
if ((l + 1) == h or l == h or l > h) :
if (l == h or l > h):
return
p[h].top+=1
p[h].arr[(p[h].top)] = 0
p[l].top+=1
p[l].arr[(p[l].top)] = 1
return

else :
for i in range(l,h):
pack1 = pack1 + p[i].pro
pack2 = pack2 + p[h].pro
diff1 = pack1 - pack2
if (diff1 < 0):
diff1 = diff1 * -1
j = 2
while (j != h - l + 1) :
k = h - j
pack1 = pack2 = 0
for i in range(l, k+1):
pack1 = pack1 + p[i].pro
for i in range(h,k,-1):
pack2 = pack2 + p[i].pro
 diff2 = pack1 - pack2
if (diff2 < 0):
diff2 = diff2 * -1
if (diff2 >= diff1):
break
diff1 = diff2
j+=1

k+=1
for i in range(l,k+1):
p[i].top+=1
p[i].arr[(p[i].top)] = 1

for i in range(k + 1,h+1):

p[i].top+=1
p[i].arr[(p[i].top)] = 0

shannon(l, k, p)
shannon(k + 1, h, p)

# sort symbols based on their probability/frequency

def sortByProbability(n, p):
temp=node()
for j in range(1,n) :
for i in range(n - 1) :
if ((p[i].pro) > (p[i + 1].pro)) :
temp.pro = p[i].pro
temp.sym = p[i].sym

p[i].pro = p[i + 1].pro

p[i].sym = p[i + 1].sym

p[i + 1].pro = temp.pro

p[i + 1].sym = temp.sym

def display(n, p): print('\

nShannon Fano Codes:')
print("Symbol\tProbability\tCode",end='')
for i in range(n - 1,-1,-1):
print("\n", p[i].sym, "\t", p[i].pro,"\t\t",end='')
 for j in range(p[i].top+1):
print(p[i].arr[j],end='')

if name == ' main ':

total = 0

print("Number of symbols : ",end='')

n = 5
print(n)
i=0
for i in range(n):
print("Symbol", i + 1," : ",end="")
ch = chr(65 + i)
print(ch)

p[i].sym += ch

x = [0.22, 0.28, 0.15, 0.30, 0.05]

for i in range(n):
print("Probability of", p[i].sym, ": ",end="")
print(x[i])

p[i].pro = x[i]
total = total + p[i].pro

if (total > 1) :
print("Invalid. Enter new values")
total = total - p[i].pro
i-=1

i+=1
p[i].pro = 1 - total
sortByProbability(n, p)

for i in range(n):
p[i].top = -1

shannon(0, n - 1, p)
display(n, p)
Output
 Experiment - 7

Aim: Design a program to implement the LZW (Lempel–Ziv–Welch) compression

algorithm

Code

#include <bits/stdc++.h>
using namespace std;

vector<int> encoding(string s1)

{
cout << "Encoding\n";
unordered_map<string, int> table;
for (int i = 0; i <= 255; i++)
{
string ch = "";
ch += char(i);
table[ch] = i;
}

string p = "", c = "";

p += s1[0];
int code = 256;
vector<int> output_code;
cout << "String\tOutput_Code\tAddition\n";
for (int i = 0; i < s1.length(); i++)
{
if (i != s1.length() - 1)
c += s1[i + 1];
if (table.find(p + c) != table.end())
p = p + c;
else
{
cout << p << "\t" << table[p] << "\t\t"
<< p + c << "\t" << code << endl;
output_code.push_back(table[p]);
table[p + c] = code;
code++;
p = c;
 }
c = "";
}
cout << p << "\t" << table[p] << endl;
output_code.push_back(table[p]);
return output_code;
}

void decoding(vector<int> op)

{
cout << "\nDecoding\n";
unordered_map<int, string> table;
for (int i = 0; i <= 255; i++)
{
string ch = "";
ch += char(i);
table[i] = ch;
}
int old = op[0], n;
string s = table[old];
string c = "";
c += s[0];
cout << s;
int count = 256;
for (int i = 0; i < op.size() - 1; i++)
{
n = op[i + 1];
if (table.find(n) == table.end())
{
s = table[old];
s = s + c;
}
else
s = table[n];
cout << s;
c = "";
c += s[0];
table[count] = table[old] + c;
count++;
old = n;
 }
}

int main()
{
string s = "WYS*WYGWYS*WYSWYSG";
vector<int> output_code = encoding(s);
cout << "Output Codes are: ";
for (int i = 0; i < output_code.size(); i++)
cout << output_code[i] << " ";
cout << endl;
decoding(output_code);
}

Output
 Experiment - 8

Aim: Using Python OpenCV library, write a program to do the following -

a) Open an image
b) Retrieve size of image
c) Resize an image

Code and Output

# load image
import cv2
flower=cv2.imread("/content/drive/MyDrive/6th sem/mt/flower.jpg",
cv2.IMREAD_COLOR)

# show image
from google.colab.patches import cv2_imshow
cv2_imshow(leaf)

# retrieve size of image

height, width, channels = flower.shape
print("Height of image: ", height)
print("Width of image: ", width)
print("Channels of image: ", channels)
print("Size of image: ", flower.size)

# resize image
resized_flower = cv2.resize(flower, (33, 44),
interpolation=cv2.INTER_LINEAR)
cv2_imshow(resized_flower)
 Experiment - 9

Aim: Using Python OpenCV library, write a program to do the following -

a) Crop an image
b) Rotate an image
c) Create Histogram of an image
d) Transposing an Image
e) Splitting an Image

Code and Output

# load image
import cv2
flower=cv2.imread("/content/drive/MyDrive/6th sem/mt/flower.jpg",
cv2.IMREAD_COLOR)

# crop an image
cropped_flower = flower[0:99, 0:132]
cv2_imshow(cropped_flower)

# rotate an image 90 degrees

rotated_flower = cv2.rotate(flower, cv2.cv2.ROTATE_90_CLOCKWISE)
cv2_imshow(rotated_flower)

# rotate an image 180 degrees

rotated_flower_1 = cv2.rotate(flower, cv2.cv2.ROTATE_180)
cv2_imshow(rotated_flower_1)
# create histogram of an image
from matplotlib import pyplot as plt

tiger=cv2.imread("/content/drive/MyDrive/6th sem/mt/tiger.jpg",
cv2.IMREAD_COLOR)
# find frequency of pixels in range 0-255
histr = cv2.calcHist([tiger],[0],None,[256],[0,256])
plt.plot(histr)
plt.show()

# histogram plot
plt.hist(tiger.ravel(),256,[0,256])
plt.show()
#transposing an image
transposed_image = cv2.transpose(flower)
cv2_imshow(transposed_image)

# splitting an image
# vertical division
half = width//2
left_part = flower[:, :half]
right_part = flower[:, half:]
print("Left Part")
cv2_imshow(left_part)
print("Right Part")
cv2_imshow(right_part)

# this is horizontal division

half2 = height//2
top = flower[:half2, :]
bottom = flower[half2:, :]
print("Top Part")
cv2_imshow(top)
print("Bottom Part")
cv2_imshow(bottom)
 Experiment - 10

Aim: Using Python OpenCV library, write a program to play a video

Code

import numpy as np
import cv2
person = cv2.VideoCapture('/content/drive/MyDrive/6th sem/mt/person.mp4')
while person.isOpened():
ret, frame = person.read()
# if frame is read correctly ret is True
if not ret:
print("Can't receive frame. Exiting ...")
break
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
cv2_imshow(gray)
if cv2.waitKey(1) == ord('q'):
break
person.release()

Output
 Experiment - 11

Aim: Study and explore the various vector graphics softwares like CorelDraw, Sketch,
Adobe Illustrator and design a vector drawing in any one of them

Image Types

Two types of images found online or as a supported image type in graphics software are
● Bitmap/Raster
● Vector

While both are image types and are used for a similar purpose, there are some dissimilarities.
The two formats work differently from each other when you examine them closely. They are
both pictures on a screen, but they have different compositions and focuses.

Vector Images Bitmap/Raster Images

They are software-created and are based on
mathematical calculations
They are smoother and more usable
Bitmap to vector conversion requires a special One format of bitmap can be easily converted
software
They can be scaled freely without sacrificing
quality, hence, they are used for making
scalable work files
They are more specialized files and tend to
appear in less common formats
They are made up of many individual,
scalable objects. They always render at the
highest quality because they are device
independent. Objects in a vector image might
consist of lines, curves, and shapes with
editable attributes such as color, fill, and
outline.
They are unsuitable for producing photo
realistic imagery. They usually consist
of solid areas of color/gradients, and
cannot
They are made of pixels
They are more common in everyday life and
easier to use
into another
They are used for making shareable final
products
All pictures seen on a phone, tablet, or a
computer are bitmap, even if they are created
using vector tools
They are made up of pixels in a grid. They
are resolution dependent, so an increase or
decrease in their size implies a sacrifice in
image quality. When reducing the size of a
bitmap image through a software's resample /
resize option, pixels are discarded.
Vector images can easily be converted
to bitmaps by a process called
rasterizing.
 depict the continuous subtle tones of a
photograph, causing their cartoon-like
appearance.

CorelDRAW

● CorelDRAW is a vector graphics editor developed and marketed by Corel Corporation.

It is also the name of the Corel graphics suite, which includes the bitmap-image editor
Corel Photo-Paint as well as other graphics-related programs. The latest version is
marketed as CorelDraw Graphics Suite (version 24), and was released for Windows and
macOS on March 8, 2022. It is designed to edit two-dimensional images such as logos
and posters. Reduced-feature Standard and Essentials versions are also offered.
● CorelDraw provides users with different tools to create original images or drastically
edit them. Some of the things users are able to do with the program are QR code
generation, page layout and adding various special effects.
● As a vector graphics editor, CorelDraw is used primarily for marketing and advertising
businesses, particularly those that specialize in print advertising development. Outside of
logos, CorelDraw is a program used in the professional space to create brochures,
newsletters, business cards etc. Some of the common uses of CorelDraw are: Magazine
Designing, News Paper Designing, Books Designing, Illustration Making, Logo Making
etc.

Sketch

● Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch
B.V. (formerly named Bohemian Coding). It was first released on 7 September 2010
and won an Apple Design Award in 2012. It also has a web application that allows users
to use the platform on any computer.
● It is primarily used for user interface and user experience design of websites and mobile
apps and does not include print design features. Sketch has more recently added features
for prototyping and collaboration. Being only available for macOS, third party software
and handoff tools may be used to view Sketch designs on other platforms.
● Sketch is used primarily for designing the UI and UX of mobile apps and web. The files
designed in Sketch are saved in its own .sketch file format, though .sketch files can be
opened in Adobe Illustrator, Adobe Photoshop, and other programs. The designs can
also be saved in the popular PNG, JPG, SVG, PDF, TIFF, WebP, etc., formats. The
designs created in Sketch are utilized by app engineers to design mobile apps and by
website developers to convert designs into websites.

Adobe Illustrator

● Adobe Illustrator is a vector graphics editor and design program developed and marketed
by Adobe Inc. Originally designed for the AppleMacintosh, development of Adobe
Illustrator began in 1985. Along with Creative Cloud (Adobe's shift to monthly or
annual subscription service delivered over the Internet), Illustrator CC was released. The
latest
 version, Illustrator 2022, was released on October 26, 2021, and is the 25th generation in
the product line.
● A sidebar that appears at the left of the screen with a variety of tools to select, create,
and manipulate objects or artworks in Illustrator. These tools can be selected as follows:
drawing, typing, painting, reshaping, slicing and cutting, symbolism, moving and
zooming, and graphs.
● Some tools have a small triangle at the bottom right of the toolbox icon. A small triangle
has the option to view or expand some hidden tools by holding down the mouse button on
the triangle.
● Some examples of basic tools in Illustrator are selection tools, paintbrush tools, pen tools,
pencil tools e.g. Selection tools are used to layout, adjust, and organize the artwork by
selecting, positioning, and stacking objects accurately. Moreover, selection tools can
group, lock or hide, and measure objects.
● Paintbrush tools can be used to modify the appearance of the artwork. There are
different types of brushes: calligraphic, scatter, art, pattern, and bristle. Pen tools create
straight and curved lines for the artwork and they can add anchor points to paths and
delete from paths. Pencil tools allow the user to draw and edit freehand lines.

Image Editing on Adobe Illustrator

 Experiment - 12

Aim: Write a program to compress the JPEG images of your choice

Code

import os
import sys
from PIL import Image

def compressMe(file, verbose = False):

filepath = os.path.join(os.getcwd(),file)
picture = Image.open("/content/igdtuw.jpg")
picture.save("Compressed_"+file, "JPEG", optimize = True, quality = 10)
return

def main():
verbose = False
if (len(sys.argv)>1):
if (sys.argv[1].lower()=="-v"):
verbose = True

cwd = os.getcwd()
formats = ('.jpg', '.jpeg')
for file in os.listdir(cwd):
if os.path.splitext(file)[1].lower() in formats:
print('compressing', file)
compressMe(file, verbose)

print("Done")

if name == " main ":

main()

Output