Programmers Point: Code for canvas name move

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="620" height="300"></canvas>
<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';

var oOffset = 16;

//----
balls.push(new Ball(80, 20, 0, 0, blue));

balls.push(new Ball(100, 20, 0, 0, blue));
balls.push(new Ball(120, 20, 0, 0, blue));
balls.push(new Ball(140, 20, 0, 0, blue));
balls.push(new Ball(160, 20, 0, 0, blue));
balls.push(new Ball(180, 20, 0, 0, blue));
balls.push(new Ball(200, 20, 0, 0, blue));
balls.push(new Ball(220, 20, 0, 0, blue));
balls.push(new Ball(240, 20, 0, 0, blue));
balls.push(new Ball(260, 20, 0, 0, blue));
balls.push(new Ball(280, 20, 0, 0, blue));

balls.push(new Ball(300, 20, 0, 0, blue));
balls.push(new Ball(320, 20, 0, 0, blue));
balls.push(new Ball(340, 20, 0, 0, blue));
balls.push(new Ball(360, 20, 0, 0, blue));
balls.push(new Ball(380, 20, 0, 0, blue));
balls.push(new Ball(400, 20, 0, 0, blue));
balls.push(new Ball(420, 20, 0, 0, blue));

balls.push(new Ball(440, 20, 0, 0, blue));
balls.push(new Ball(460, 20, 0, 0, blue));
balls.push(new Ball(480, 20, 0, 0, blue));
balls.push(new Ball(500, 20, 0, 0, blue));
balls.push(new Ball(520, 20, 0, 0, blue));
balls.push(new Ball(540, 20, 0, 0, blue));
balls.push(new Ball(560, 20, 0, 0, blue));
balls.push(new Ball(580, 20, 0, 0, blue));
balls.push(new Ball(600, 20, 0, 0, blue));

//|
//|
//|

balls.push(new Ball(600, 40, 0, 0, red));

balls.push(new Ball(600, 60, 0, 0, red));
balls.push(new Ball(600, 80, 0, 0, red));
balls.push(new Ball(600, 100, 0, 0, red));

balls.push(new Ball(600, 120, 0, 0, red));
balls.push(new Ball(600, 140, 0, 0, red));
balls.push(new Ball(600, 160, 0, 0, red));

balls.push(new Ball(600, 180, 0, 0, red));
balls.push(new Ball(600, 200, 0, 0, red));
balls.push(new Ball(600, 220, 0, 0, red));
balls.push(new Ball(600, 240, 0, 0, blue));

//----

balls.push(new Ball(580, 240, 0, 0, blue));
balls.push(new Ball(560, 240, 0, 0, blue));
balls.push(new Ball(540, 240, 0, 0, blue));
balls.push(new Ball(520, 240, 0, 0, blue));
balls.push(new Ball(500, 240, 0, 0, blue));
balls.push(new Ball(480, 240, 0, 0, blue));
balls.push(new Ball(460, 240, 0, 0, blue));
balls.push(new Ball(440, 240, 0, 0, blue));
balls.push(new Ball(420, 240, 0, 0, blue));
balls.push(new Ball(400, 240, 0, 0, blue));
balls.push(new Ball(380, 240, 0, 0, blue));
balls.push(new Ball(360, 240, 0, 0, blue));
balls.push(new Ball(340, 240, 0, 0, blue));
balls.push(new Ball(320, 240, 0, 0, blue));
balls.push(new Ball(300, 240, 0, 0, blue));
balls.push(new Ball(280, 240, 0, 0, blue));
balls.push(new Ball(260, 240, 0, 0, blue));
balls.push(new Ball(240, 240, 0, 0, blue));

balls.push(new Ball(220, 240, 0, 0, blue));
balls.push(new Ball(200, 240, 0, 0, blue));
balls.push(new Ball(180, 240, 0, 0, blue));
balls.push(new Ball(160, 240, 0, 0, blue));
balls.push(new Ball(140, 240, 0, 0, blue));
balls.push(new Ball(120, 240, 0, 0, blue));
balls.push(new Ball(100, 240, 0, 0, blue));

//|
//|
//|
balls.push(new Ball(80, 240, 0, 0, blue));
balls.push(new Ball(80, 220, 0, 0, red));
balls.push(new Ball(80, 200, 0, 0, red));
balls.push(new Ball(80, 180, 0, 0, red));
balls.push(new Ball(80, 160, 0, 0, red));
balls.push(new Ball(80, 140, 0, 0, red));
balls.push(new Ball(80, 120, 0, 0, red));
balls.push(new Ball(80, 100, 0, 0, red));
balls.push(new Ball(80, 80, 0, 0, red));
balls.push(new Ball(80, 60, 0, 0, red));
balls.push(new Ball(80, 40, 0, 0, red));

//A
balls.push(new Ball(173, 63, 0, 0, blue));
balls.push(new Ball(170, 72, 0, 0, blue));

balls.push(new Ball(oOffset + 170, 63, 0, 0, blue));
balls.push(new Ball(oOffset + 175, 72, 0, 0, blue));
balls.push(new Ball(oOffset + 180, 80, 0, 0, blue));
balls.push(new Ball(oOffset + 185, 90, 0, 0, blue));
balls.push(new Ball(oOffset + 190, 100, 0, 0, blue));
balls.push(new Ball(oOffset + 195, 110, 0, 0, blue));
balls.push(new Ball(oOffset + 200, 120, 0, 0, blue));
balls.push(new Ball(oOffset + 205, 130, 0, 0, blue));

balls.push(new Ball(163, 80, 0, 0, blue));
balls.push(new Ball(156, 90, 0, 0, blue));
balls.push(new Ball(149, 100, 0, 0, blue));

balls.push(new Ball(142, 110, 0, 0, blue));

balls.push(new Ball(135, 120, 0, 0, blue));
balls.push(new Ball(160, 110, 0, 0, blue));
balls.push(new Ball(170, 110, 0, 0, blue));
balls.push(new Ball(180, 110, 0, 0, blue));
balls.push(new Ball(190, 110, 0, 0, blue));

balls.push(new Ball(128, 130, 0, 0, blue));
//J
balls.push(new Ball(250, 63, 0, 0, green));
balls.push(new Ball(257, 63, 0, 0, green));
balls.push(new Ball(265, 63, 0, 0, green));
balls.push(new Ball(272, 63, 0, 0, green));
balls.push(new Ball(278, 63, 0, 0, green));
balls.push(new Ball(285, 63, 0, 0, green));
balls.push(new Ball(292, 63, 0, 0, green));
balls.push(new Ball(300, 63, 0, 0, green));

balls.push(new Ball(275, 80, 0, 0,green));
balls.push(new Ball(275, 90, 0, 0, green));
balls.push(new Ball(275, 100, 0, 0, green));
balls.push(new Ball(275, 110, 0, 0, green));
balls.push(new Ball(275, 120, 0, 0, green));
balls.push(new Ball(275, 130, 0, 0, green));
balls.push(new Ball(275, 140, 0, 0, green));
balls.push(new Ball(275, 150, 0, 0, green));

balls.push(new Ball(275, 160, 0, 0, green));
balls.push(new Ball(oOffset + 245, 160, 0, 0, green));
balls.push(new Ball(oOffset + 230, 160, 0, 0, green));
balls.push(new Ball(oOffset + 230, 140, 0, 0, green));
balls.push(new Ball(oOffset + 230, 143, 0, 0, green));
//a

balls.push(new Ball(350, 63, 0, 0, blue));
balls.push(new Ball(343, 72, 0, 0, blue));

balls.push(new Ball(336, 80, 0, 0, blue));
balls.push(new Ball(329, 90, 0, 0, blue));
balls.push(new Ball(322, 100, 0, 0, blue));

balls.push(new Ball(315, 110, 0, 0, blue));

balls.push(new Ball(309, 120, 0, 0, blue));
balls.push(new Ball(302, 130, 0, 0, blue));

balls.push(new Ball(oOffset + 350, 63, 0, 0, blue));
balls.push(new Ball(oOffset + 355, 63, 0, 0, blue));
balls.push(new Ball(oOffset + 360, 72, 0, 0, blue));
balls.push(new Ball(oOffset + 365, 80, 0, 0, blue));
balls.push(new Ball(oOffset + 370, 90, 0, 0, blue));
balls.push(new Ball(oOffset + 375, 100, 0, 0, blue));
balls.push(new Ball(oOffset + 380, 110, 0, 0, blue));
balls.push(new Ball(oOffset + 385, 120, 0, 0, blue));
balls.push(new Ball(oOffset + 390, 130, 0, 0, blue));

balls.push(new Ball(330, 110, 0, 0, blue));
balls.push(new Ball(340, 110, 0, 0, blue));
balls.push(new Ball(350, 110, 0, 0, blue));
balls.push(new Ball(360, 110, 0, 0, blue));
balls.push(new Ball(370, 110, 0, 0, blue));
balls.push(new Ball(380, 110, 0, 0, blue));
//y
balls.push(new Ball(420, 63, 0, 0, yellow));
balls.push(new Ball(430, 72, 0, 0, yellow));

balls.push(new Ball(440, 80, 0, 0, yellow));
balls.push(new Ball(450, 90, 0, 0, yellow));
balls.push(new Ball(460, 100, 0, 0, yellow));

balls.push(new Ball(470, 110, 0, 0, yellow));

balls.push(new Ball(480, 120, 0, 0, yellow));
balls.push(new Ball(490, 130, 0, 0, yellow));

balls.push(new Ball(550, 63, 0, 0, yellow));
balls.push(new Ball(545, 75, 0, 0, yellow));
balls.push(new Ball(540, 87, 0, 0, yellow));
balls.push(new Ball(535, 99, 0, 0, yellow));
balls.push(new Ball(525, 111, 0, 0, yellow));
balls.push(new Ball(515, 123, 0, 0, yellow));

balls.push(new Ball(505, 135, 0, 0, yellow));
balls.push(new Ball(495, 147, 0, 0, yellow));
balls.push(new Ball(485, 159, 0, 0, yellow));

balls.push(new Ball(475, 171, 0, 0, yellow));
balls.push(new Ball(465, 183, 0, 0, yellow));
balls.push(new Ball(455, 195, 0, 0, yellow));

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);
});
}
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>
<table>
<center><b>Name Area</b></center>
<tr>
<td><td>Name:Ajay Rathod<br/>Degree:M.Sc.It<br/>Work:Fresher<br/>Mo:7600728572</td><td>move ur mouse on my name the wait a few minute the name automatically rearrange this done by Canvace Animation Html5<br/>Do with ur name by Have Good Day<br/>Note:Mouse pointer not presant in name area</td>
</tr>
</table>
</body>
</html>

Programmers Point

Wednesday, 6 August 2014

Code for canvas name move

No comments:

Post a Comment