Scribd
Upload
51 views14 pages

Multimedia & Animation Part-B Lab Manual

Uploaded by

Ebi Roselin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views14 pages

Multimedia & Animation Part-B Lab Manual

Uploaded by

Ebi Roselin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

GFGC BOY’S COLLEGE, KOLAR M&A - Lab

COMPUTER MULTIMEDIA & ANIMATION

LAB MANUAL : PART-B

4TH SEM – BCA

Part -B:

1) Write a HTML/5 program to draw rectangle, line, polygon, polyline using SVG.
2) Write a HTML/5 program to draw linear and radial gradient ellipse using SVG.
3) Write a HTML/5 program to draw a star using SVG.
4) Write a HTML/5 program to draw line, circle, rectangle, gradient, text using canvas.
5) Write a HTML/5 program to demonstrate translation, rotation, scaling, and transform using canvas.
6) Write a HTML/5 program to demonstrate Bezier Curves and Quadratic Curves.
7) Write a HTML/5 program to create canvas and add a red square onto the game area with
up/down/left/right controller buttons.
8) Write a HTML/5 canvas program to add random size obstacles with red square controller button.

4TH SEM - BCA Page 1


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

1) Write a HTML/5 program to draw rectangle, line, polygon, polyline using SVG.

<!DOCTYPE html>
<html>
<center>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg width="400" height = "200">
<rect x="50" y="20" width = "300" height = "100" fill = "red" />
</svg>

<h2>HTML5 SVG Line</h2>


<svg width="200" height = "200">
<line x1 = "0" y1 = "0" x2 = "200" y2 = "200" stroke="blue" stroke-width="5" />
</svg>

<h2>HTML5 SVG Polygon</h2>


<svg width="300" height = "210">
<polygon points="200,10 250,190 160,210" fill = "yellow" stroke="purple" stroke-width="2" />
</svg>

<h2>HTML5 SVG Polyline</h2>


<svg width="200" height = "200">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill = "white" stroke="green" stroke-
width="5" />
</svg>
</body>
</center>
</html>

4TH SEM - BCA Page 2


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

2) Write a HTML/5 program to draw linear and radial gradient ellipse using SVG.

<!DOCTYPE html>
<html>
<body>
<center>
<h2>HTML5 SVG LinearGradient Ellipse</h2>
<svg height = "200" width="200" >
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
<stop offset="100%" style="stop-color:red;stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill="url(#gradient1)" />
</svg>

<h2>HTML5 SVG RadialGradient Ellipse</h2>


<svg height = "200" width="200">
<defs>
<radialGradient id="gradient2" cx = "50%" cy = "50%" r = "50%" fx = "50%" fy = "50%">
<stop offset = "0%" style = "stop-color:white; stop-opacity:0"/>
<stop offset = "100%" style = "stop-color:blue; stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx = "100" cy = "50" rx = "100" ry = "50" fill="url(#gradient2)" />
</svg>
</center>
</body>
</html>

3) Write a HTML/5 program to draw a star using SVG.


<!DOCTYPE html>

<html>
<body>
<center>
<h2>HTML5 SVG Star</h2>
<svg width="200" height = "200" >
<polygon points = "100,10 40,180 190,60 10,60 160,180" fill = "yellow"/>
</svg>
</center>
</body>
</html>

4TH SEM - BCA Page 3


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

4) Write a HTML/5 program to draw line, circle, rectangle, gradient, text using canvas.

<!DOCTYPE html>

<html>

<body>

<center>

<h1> Canvas Line </h1>


<canvas id="Canvasline" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<h1> Canvas Circle </h1>
<canvas id="Canvascircle" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<h1> Canvas Rectangle </h1>
<canvas id="CanvasRectangle" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<h1> Canvas Text </h1>
<canvas id="Canvastext" width="300" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<h1> Canvas Gradient </h1>
<canvas id="Canvasgradient" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
// Canvas Line

var c = document.getElementById("Canvasline");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

// Canvas Circle

var c = document.getElementById("Canvascircle");
4TH SEM - BCA Page 4
GFGC BOY’S COLLEGE, KOLAR M&A - Lab

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

// Canvas Rectangle

var c5 = document.getElementById("CanvasRectangle");

var ctx = c5.getContext("2d");

ctx.strokeRect(25, 10, 150, 80);

// Canvas Text

var c = document.getElementById("Canvastext");

var ctx = c.getContext("2d");

ctx.font = "30px Arial";

ctx.fillStyle="#00F";

ctx.fillText("GFGC Boy's College",10,50);

// Canvas Gradient

var c = document.getElementById("Canvasgradient");

var ctx = c.getContext("2d");

// Create gradient

var grd = ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"yellow");

grd.addColorStop(1,"red");

// Fill with gradient

ctx.fillStyle = grd;

ctx.fillRect(25,10,150,80);

</script>
</center>
</body>
</html>

4TH SEM - BCA Page 5


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

5) Write a HTML/5 program to demonstrate translation, rotation, scaling, and transform using canvas.
<!DOCTYPE html>
<html>
<body>
<h2>HTML5 CANVAS</h2>
<canvas id="myCanvas" width="700" height="600" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

//Canvas Rotate
ctx.strokeText("Canvas Rotate", 50, 10);
ctx.rotate(20 * Math.PI / 180);
ctx.fillStyle = "pink";
ctx.fillRect(50, 20, 200, 80);
ctx.setTransform(1, 0, 0, 1, 0, 0);

//Canvas Scale
ctx.translate(300, 10);
ctx.strokeText("Canvas Scale", 100, 0);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.setTransform(1, 0, 0, 1, 0, 0);

//Canvas Translate
ctx.strokeText("Canvas Translate", 400, 260);
ctx.fillStyle = "orange";
ctx.fillRect(400, 300, 200, 70);

4TH SEM - BCA Page 6


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

ctx.fillStyle = "green";
ctx.translate(90, 90);
ctx.fillRect(400, 300, 200, 70);
ctx.setTransform(1, 0, 0, 1, 0, 0);

//Canvas Transform
ctx.strokeText("Canvas Transform", 50, 260);
ctx.translate(0, 220);
ctx.fillStyle = "yellow";
ctx.fillRect(10, 70, 200, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "red";
ctx.fillRect(10, 60, 200, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "blue";
ctx.fillRect(10, 50, 200, 100);
</script>
</body>
</html>

4TH SEM - BCA Page 7


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

6) Write a HTML/5 program to demonstrate Bezier Curves and Quadratic Curves.


<!DOCTYPE html>
<html>
<body>
<h2>HTML5 CANVAS</h2>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Adding Text to the Canvas


ctx.strokeText("Bezier Curve", 10, 20);
ctx.strokeText("Quadratic Curve", 10, 250);

// Canvas Bezier Curve


ctx.beginPath();
ctx.moveTo(100, 50);
ctx.bezierCurveTo(100, 200, 400, 200, 400, 50);
ctx.strokeStyle = "Orange";
ctx.lineWidth = 8;
ctx.stroke();

//Canvas Quadratic Curve


ctx.beginPath();
ctx.moveTo(100, 350);
ctx.quadraticCurveTo(100, 550, 400, 350);
ctx.strokeStyle = "green";
ctx.lineWidth = 8;
ctx.stroke();
</script>
</body>
</html>

4TH SEM - BCA Page 8


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

7) Write a HTML/5 program to create canvas and add a red square onto the game area with
up/down/left/right controller buttons.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
}
var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

4TH SEM - BCA Page 9


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

function component(width, height, color, x, y) {


this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
function moveup() {
myGamePiece.speedY -= 1;
}
function movedown() {
myGamePiece.speedY += 1;
}
function moveleft() {
myGamePiece.speedX -= 1;
}
function moveright() {
myGamePiece.speedX += 1;
}

4TH SEM - BCA Page 10


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

</script>
<div style="text-align:center;width:480px;">
<button onclick="moveup()">UP</button><br><br>
<button onclick="moveleft()">LEFT</button>
<button onclick="moveright()">RIGHT</button><br><br>
<button onclick="movedown()">DOWN</button>
</div>
</body>
</html>

8) Write a HTML/5 canvas program to add random size obstacles with red square controller button.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];

function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");

4TH SEM - BCA Page 11


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}

function component(width, height, color, x, y) {


this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}

4TH SEM - BCA Page 12


GFGC BOY’S COLLEGE, KOLAR M&A - Lab

function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myGamePiece.newPos();
myGamePiece.update();
}

function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}
function moveup() {
myGamePiece.speedY = -1;
}
function movedown() {
myGamePiece.speedY = 1;
}
function moveleft() {
myGamePiece.speedX = -1;
}
function moveright() {
myGamePiece.speedX = 1;
}
4TH SEM - BCA Page 13
GFGC BOY’S COLLEGE, KOLAR M&A - Lab

function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="moveup()" onmouseup="clearmove()"
ontouchstart="moveup()">UP</button><br><br>
<button onmousedown="moveleft()" onmouseup="clearmove()"
ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()"
ontouchstart="moveright()">RIGHT</button><br><br>
<button onmousedown="movedown()" onmouseup="clearmove()"
ontouchstart="movedown()">DOWN</button>
</div>
</body>
</html>

4TH SEM - BCA Page 14

You might also like