বাউনসিং বাবল টেক্সট এনিমেশন তৈরি করুন এইচ টি এম এল ৫ দিয়ে

এইচটি এম এল-৫ এর রয়েছে অসাধারণ গ্রাফিক্স ডিজাইন এর পাশাপাশি অসাধারণ এনিমেশন তৈরির সক্ষমতা। এইচটি এম এল-৫ এ তৈরি গ্রাফিক্স এবং এনিমেশন আমাদের সকলের পরিচিত জনপ্রিয় ফটোশপ এবং ফ্লাসে তৈরি গ্রাফিক্স এবং এনিমেশনকেও অনেক সময় হার মানায়। এছাড়াও আরো কিছু বাড়তি সুবিধা রয়েছে এইচটি এম এল-৫ এর গ্রাফিক্স এবং এনিমেশনে। এর মধ্যে সবচেয়ে  উল্লেখযোগ্য বিষয় হচ্ছে, ফাইলের সাইজ।

ফটোশপ এবং ফ্লাসে তৈরি যে কোন ভালমানের গ্রাফিক্স এবং এনিমেশন এর সাইজ অনেক বেশি হয়ে থাকে। যা কোন ওয়েব পেজে ব্যবহার করলে একদিকে যেমন ব্যান্ডওয়াইডথ খরচ বেশি হয়; অন্যদিকে পেজ লোড হতেও সময় বেশি লাগে। কিন্তু এইচটি এম এল-৫ এ কোডিং এর মাধ্যমেই গ্রাফিক্স এবং এনিমেশনকে জীবন্ত করে তোলা হয় তাই এক্ষেত্রে গ্রাফিক্স এবং এনিমেশন এর সাইজ অনেক কম হয়। আজ এইচটি এম এল-৫ দিয়ে তৈরি একটা মজার প্রজেক্ট সকলের সাথে শেয়ার করছি। প্রজেক্টটি হচ্ছে বাউনসিং বাবল টেক্সট।

আর কথা না বাড়িয়ে এক নজরে দেখে নেয়া যাক “বাউনসিং বাবল টেক্সট” প্রজেক্টটি।


প্রজেক্ট সম্পর্কিত কিছু কথা

প্রজেক্টটিতে “TUTO HOST” লেখাটিকে বিভিন্ন কালারের বাবল দিয়ে লেখা হয়েছে। যখন মাউস পয়েন্টার টেক্সটির উপর নিয়ে যাওয়া হয় তখন বাবল গুলো এলোমেল এবং মিশ্রিত হয়ে ছুটাছুটি করতে থাকে। মাউস পয়েন্টার সরিয়ে নিলে বাবল গুলো আস্তে আস্তে আবার পূর্বের অবস্থানে চলে আসে।

অনুশীলণ প্রজেক্ট

[sourcecode language=”js”]
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background:#099;
}

#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();

function initBalls(){
balls = [];

var blue = "#3A5BCD";
var red = "#EF2B36";
var yellow = "#FFC636";
var green = "#02A817";

//t
balls.push(new Ball(30, 30, 0, 0, red));
balls.push(new Ball(50, 30, 0, 0, red));
balls.push(new Ball(70, 30, 0, 0, red));
balls.push(new Ball(90, 30, 0, 0, red));
balls.push(new Ball(110, 30, 0, 0, red));
balls.push(new Ball(70, 50, 0, 0, red));
balls.push(new Ball(70, 70, 0, 0, red));
balls.push(new Ball(70, 90, 0, 0, red));
balls.push(new Ball(70, 110, 0, 0, red));
balls.push(new Ball(70, 130, 0, 0, red));

//u
balls.push(new Ball(150, 30, 0, 0, blue));
balls.push(new Ball(150, 50, 0, 0, blue));
balls.push(new Ball(150, 70, 0, 0, blue));
balls.push(new Ball(153, 90, 0, 0, blue));
balls.push(new Ball(160, 110, 0, 0, blue));
balls.push(new Ball(180, 120, 0, 0, blue));
balls.push(new Ball(200, 110, 0, 0, blue));
balls.push(new Ball(210, 90, 0, 0, blue));
balls.push(new Ball(210, 70, 0, 0, blue));
balls.push(new Ball(210, 50, 0, 0, blue));
balls.push(new Ball(210, 30, 0, 0, blue));

//t
balls.push(new Ball(250, 30, 0, 0, red));
balls.push(new Ball(270, 30, 0, 0, red));
balls.push(new Ball(290, 30, 0, 0, red));
balls.push(new Ball(310, 30, 0, 0, red));
balls.push(new Ball(330, 30, 0, 0, red));
balls.push(new Ball(290, 50, 0, 0, red));
balls.push(new Ball(290, 70, 0, 0, red));
balls.push(new Ball(290, 90, 0, 0, red));
balls.push(new Ball(290, 110, 0, 0, red));
balls.push(new Ball(290, 130, 0, 0, red));

// O

balls.push(new Ball(390, 30, 0, 0, yellow));
balls.push(new Ball(370, 40, 0, 0, yellow));
balls.push(new Ball(410, 40, 0, 0, yellow));
balls.push(new Ball(363, 60, 0, 0, yellow));
balls.push(new Ball(417, 60, 0, 0, yellow));
balls.push(new Ball(363, 82, 0, 0, yellow));
balls.push(new Ball(417, 82, 0, 0, yellow));
balls.push(new Ball(363, 102, 0, 0, yellow));
balls.push(new Ball(417, 102, 0, 0, yellow));
balls.push(new Ball(370, 122, 0, 0, yellow));
balls.push(new Ball(410, 122, 0, 0, yellow));
balls.push(new Ball(390, 132, 0, 0, yellow));

//H
balls.push(new Ball(30, 180, 0, 0, green));
balls.push(new Ball(30, 200, 0, 0, green));
balls.push(new Ball(30, 220, 0, 0, green));
balls.push(new Ball(30, 240, 0, 0, green));
balls.push(new Ball(30, 260, 0, 0, green));
balls.push(new Ball(30, 280, 0, 0, green));

balls.push(new Ball(110, 180, 0, 0, green));
balls.push(new Ball(110, 200, 0, 0, green));
balls.push(new Ball(110, 220, 0, 0, green));
balls.push(new Ball(110, 240, 0, 0, green));
balls.push(new Ball(110, 260, 0, 0, green));
balls.push(new Ball(110, 280, 0, 0, green));

balls.push(new Ball(50, 230, 0, 0, green));
balls.push(new Ball(70, 230, 0, 0, green));
balls.push(new Ball(90, 230, 0, 0, green));

// O

balls.push(new Ball(180, 180, 0, 0, yellow));
balls.push(new Ball(160, 190, 0, 0, yellow));
balls.push(new Ball(200, 190, 0, 0, yellow));
balls.push(new Ball(153, 210, 0, 0, yellow));
balls.push(new Ball(207, 210, 0, 0, yellow));
balls.push(new Ball(153, 230, 0, 0, yellow));
balls.push(new Ball(207, 230, 0, 0, yellow));
balls.push(new Ball(153, 250, 0, 0, yellow));
balls.push(new Ball(207, 250, 0, 0, yellow));
balls.push(new Ball(200, 270, 0, 0, yellow));
balls.push(new Ball(160, 270, 0, 0, yellow));
balls.push(new Ball(180, 280, 0, 0, yellow));

//S
balls.push(new Ball(310, 190, 0, 0, blue));
balls.push(new Ball(290, 180, 0, 0, blue));
balls.push(new Ball(270, 190, 0, 0, blue));
balls.push(new Ball(265, 210, 0, 0, blue));
balls.push(new Ball(280, 225, 0, 0, blue));
balls.push(new Ball(295, 240, 0, 0, blue));
balls.push(new Ball(303, 260, 0, 0, blue));
balls.push(new Ball(290, 280, 0, 0, blue));
balls.push(new Ball(270, 270, 0, 0, blue));

//t
balls.push(new Ball(425, 180, 0, 0, red));
balls.push(new Ball(405, 180, 0, 0, red));
balls.push(new Ball(385, 180, 0, 0, red));
balls.push(new Ball(365, 180, 0, 0, red));
balls.push(new Ball(345, 180, 0, 0, red));
balls.push(new Ball(385, 200, 0, 0, red));
balls.push(new Ball(385, 220, 0, 0, red));
balls.push(new Ball(385, 240, 0, 0, red));
balls.push(new Ball(385, 260, 0, 0, red));
balls.push(new Ball(385, 280, 0, 0, red));

return balls;
}

function getMousePos(canvas, evt){
// get canvas position
var obj = canvas;
var top = 0;
var left = 0;
while (obj.tagName != ‘BODY’) {
top += obj.offsetTop;
left += obj.offsetLeft;
obj = obj.offsetParent;
}

// return relative mouse position
var mouseX = evt.clientX – left + window.pageXOffset;
var mouseY = evt.clientY – top + window.pageYOffset;
return {
x: mouseX,
y: mouseY
};
}

function updateBalls(canvas, balls, timeDiff, mousePos){
var context = canvas.getContext("2d");
var collisionDamper = 0.3;
var floorFriction = 0.0005 * timeDiff;
var mouseForceMultiplier = 1 * timeDiff;
var restoreForce = 0.002 * timeDiff;

for (var n = 0; n < balls.length; n++) {
var ball = balls[n];
// set ball position based on velocity
ball.y += ball.vy;
ball.x += ball.vx;

// restore forces
if (ball.x > ball.origX) {
ball.vx -= restoreForce;
}
else {
ball.vx += restoreForce;
}
if (ball.y > ball.origY) {
ball.vy -= restoreForce;
}
else {
ball.vy += restoreForce;
}

// mouse forces
var mouseX = mousePos.x;
var mouseY = mousePos.y;

var distX = ball.x – mouseX;
var distY = ball.y – mouseY;

var radius = Math.sqrt(Math.pow(distX, 2) +
Math.pow(distY, 2));

var totalDist = Math.abs(distX) + Math.abs(distY);

var forceX = (Math.abs(distX) / totalDist) *
(1 / radius) *
mouseForceMultiplier;
var forceY = (Math.abs(distY) / totalDist) *
(1 / radius) *
mouseForceMultiplier;

if (distX > 0) { // mouse is left of ball
ball.vx += forceX;
}
else {
ball.vx -= forceX;
}
if (distY > 0) { // mouse is on top of ball
ball.vy += forceY;
}
else {
ball.vy -= forceY;
}

// floor friction
if (ball.vx > 0) {
ball.vx -= floorFriction;
}
else if (ball.vx < 0) {
ball.vx += floorFriction;
}
if (ball.vy > 0) {
ball.vy -= floorFriction;
}
else if (ball.vy < 0) {
ball.vy += floorFriction;
}

// floor condition
if (ball.y > (canvas.height – ball.radius)) {
ball.y = canvas.height – ball.radius – 2;
ball.vy *= -1;
ball.vy *= (1 – collisionDamper);
}

// ceiling condition
if (ball.y < (ball.radius)) {
ball.y = ball.radius + 2;
ball.vy *= -1;
ball.vy *= (1 – collisionDamper);
}

// right wall condition
if (ball.x > (canvas.width – ball.radius)) {
ball.x = canvas.width – ball.radius – 2;
ball.vx *= -1;
ball.vx *= (1 – collisionDamper);
}

// left wall condition
if (ball.x < (ball.radius)) {
ball.x = ball.radius + 2;
ball.vx *= -1;
ball.vx *= (1 – collisionDamper);
}
}
}

function Ball(x, y, vx, vy, color){
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
this.color = color;
this.origX = x;
this.origY = y;
this.radius = 10;
}

function animate(canvas, balls, lastTime, mousePos){
var context = canvas.getContext("2d");

// update
var date = new Date();
var time = date.getTime();
var timeDiff = time – lastTime;
updateBalls(canvas, balls, timeDiff, mousePos);
lastTime = time;

// clear
context.clearRect(0, 0, canvas.width, canvas.height);

// render
for (var n = 0; n < balls.length; n++) {
var ball = balls[n];
context.beginPath();
context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
context.fillStyle = ball.color;
context.fill();
}

// request new frame
requestAnimFrame(function(){
animate(canvas, balls, lastTime, mousePos);
});
}

window.onload = function(){
var canvas = document.getElementById("myCanvas");
var balls = initBalls();
var date = new Date();
var time = date.getTime();
/*
* set mouse position really far away
* so the mouse forces are nearly obsolete
*/
var mousePos = {
x: 9999,
y: 9999
};

canvas.addEventListener("mousemove", function(evt){
var pos = getMousePos(canvas, evt);
mousePos.x = pos.x;
mousePos.y = pos.y;
});

canvas.addEventListener("mouseout", function(evt){
mousePos.x = 9999;
mousePos.y = 9999;
});

animate(canvas, balls, time, mousePos);
};
</script>
</head>
<body onmousedown="return false;">
<center>
<canvas id="myCanvas" width="450" height="400" style="background:#000;">
</canvas>
<h2 style=" color:#fff;">Bouncing Bubble Text By HTML 5.</h2>
</center>
</body>
</html>

[/sourcecode]

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।


প্রজেক্ট বিশ্লেষণ

[sourcecode language=”js”]
<canvas id="myCanvas" width="450" height="400" style="background:#000;">
</canvas>
[/sourcecode]

উপরের কোডটুকুর মাধ্যমে ক্যানভাসের আকার আকৃতি ও ব্যকগ্রাউন্ড কালার নির্ধারণ করা হয়েছে।

[sourcecode language=”js”]
var blue = "#3A5BCD";
var red = "#EF2B36";
var yellow = "#FFC636";
var green = "#02A817";
[/sourcecode]

এই কোডটুকুর  মাধ্যমে বাবল গুলোর কালার তৈরির জন্য ভেরিয়েবল ঘোষনা করা হয়েছে। এখানকার কালার কোড সমূহ; যেমন #EF2B36 পরিবর্তন করে বাবলের কালার পরিবর্তন করা যাবে।

[sourcecode language=”js”]
//t
balls.push(new Ball(30, 30, 0, 0, red));
balls.push(new Ball(50, 30, 0, 0, red));
balls.push(new Ball(70, 30, 0, 0, red));
balls.push(new Ball(90, 30, 0, 0, red));
balls.push(new Ball(110, 30, 0, 0, red));
balls.push(new Ball(70, 50, 0, 0, red));
balls.push(new Ball(70, 70, 0, 0, red));
balls.push(new Ball(70, 90, 0, 0, red));
balls.push(new Ball(70, 110, 0, 0, red));
balls.push(new Ball(70, 130, 0, 0, red));
[/sourcecode]

উপরের কোড গুলোর মাধ্যমে T লেটার টি প্রদর্শন করা হয়েছে। এখানে balls.push(new Ball(30, 30, 0, 0, red)); এর প্রথম 30 দ্বারা T লেটারের প্রথম বাবলটির দ্বিমাত্রিক স্থানাংক ব্যবস্থায় X অক্ষের দূরত্ব নির্দেশ করা হয়েছে দ্বিতীয় 30 দ্বারা দ্বিমাত্রিক স্থানাংক ব্যবস্থায় Y অক্ষের দূরত্ব নির্দেশ করা হয়েছে। শেষের red দ্বারা কালার এর মান নেয়ার জন্য ভেরিয়েবলকে কল করা হয়েছে।

অন্যান্য বাবলগুলো অনূরূপভাবে বসিয়ে সবগুলো লেটার গঠন করা হয়েছে।

………………………………………………………………………………..

জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।

9 thoughts on “বাউনসিং বাবল টেক্সট এনিমেশন তৈরি করুন এইচ টি এম এল ৫ দিয়ে”

    1. আপনি লেখাটার প্রজেক্ট বিশ্লেষণ অংশটা ভালোভাবে পড়ুন । আলোচনা করা হয়েছে। লেখায় যে বাবলগুলো ব্যবহার করা হয়েছে তা দ্বিমাত্রিক স্থানাংক ব্যবস্থায় X,Y স্থানাংক নির্দেশ করার মাধ্যমে প্রদর্শন করা হয়েছে। এ ভাবেই নতুন করে লেটার গুলো তৈরি করতে হবে।

      আর ভাইজান, একটু কষ্ট করে বাংলায় মন্তব্য লেখলে ভাল হয়। আমরা আসলে বাংলা ভাষায় বিজ্ঞান ও প্রযুক্তি এবং শিক্ষা বিস্তারে জন্য কাজ করছি। আর আমাদের প্রচেষ্টাকে সফল করার জন্য আপনাদের সংযুক্তি এবং সহযোগিতা একান্তভাবে কাম্য। ধন্যবাদ । আপনার জন্য শুভকামনা রইল।

  1. টিউটোরিয়াল টি অসাধারণ হয়েছে । আমি সিএসএস এইচটিএমএল এগুলি জানি কিন্তু জাভাস্ক্রিপ্ট বা জে-কোয়েরী তে খুব দুর্বল । পরবর্তী টিউটোরিয়াল এর অপেক্ষায় রইলাম

    1. দেবাশীষ দা ধন্যবাদ , আমাদের জাভাস্ক্রিপ্ট ও জে-কোয়েরী উভয় বিভাগেই ধারাবাহিক টিউটোরিয়াল লেখা হচ্ছে, আমাদের সাথে থাকুন আশাকরি আপনার প্রত্যাশা পূরণ হয়ে যাবে। আর আমাদের প্রচেষ্টাকে সফল করার জন্য আপনাদের সংযুক্তি এবং সহযোগিতা একান্তভাবে কামনা করি। আপনার জন্য শুভকামনা রইল।

    1. আপনি লেখাটার প্রজেক্ট বিশ্লেষণ অংশটা ভালোভাবে পড়ুন । আলোচনা করা হয়েছে। লেখায় যে বাবলগুলো ব্যবহার করা হয়েছে তা দ্বিমাত্রিক স্থানাংক ব্যবস্থায় X,Y স্থানাংক নির্দেশ করার মাধ্যমে প্রদর্শন করা হয়েছে। এ ভাবেই নতুন করে লেটার গুলো তৈরি করতে হবে।

      আর ভাইজান, একটু কষ্ট করে বাংলায় মন্তব্য লেখলে ভাল হয়। আমরা আসলে বাংলা ভাষায় বিজ্ঞান ও প্রযুক্তি এবং শিক্ষা বিস্তারে জন্য কাজ করছি। আর আমাদের প্রচেষ্টাকে সফল করার জন্য আপনাদের সংযুক্তি এবং সহযোগিতা একান্তভাবে কাম্য। ধন্যবাদ । আপনার জন্য শুভকামনা রইল।

Leave a Comment