<html>
<head>
<title>Bouncing balls with gravity</title>
</head>
<body>
<canvas id="canvas" width="640" height="480">
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var maxspeed = 5;
var particlecount = 20;
var gravity = -1;
var density = 0.5;
function particle(x, y, radius, color)
{
this.tx = x;
this.ty = y;
this.vx = 0;
this.vy = 0;
this.color = color;
this.radius = radius
this.mass = radius * density;
};
particle.prototype.draw = function()
{
context.beginPath();
context.arc(this.tx, this.ty, this.radius, 0, 2 * Math.PI, false);
context.fillStyle = this.color;
context.fill();
};
particle.prototype.move = function()
{
this.tx += this.vx;
this.ty += this.vy;
};
particle.prototype.limit = function(maxspeed)
{
if (this.vx > +maxspeed)
this.vx = +maxspeed;
if (this.vx < -maxspeed)
this.vx = -maxspeed;
if (this.vy > +maxspeed)
this.vy = +maxspeed;
if (this.vy < -maxspeed)
this.vy = -maxspeed;
};
particle.prototype.clip = function(left, top, right, bottom)
{
if (this.tx < left + this.radius)
{
this.tx = left + this.radius;
this.vx = 0 - this.vx;
}
if (this.ty < top + this.radius)
{
this.ty = top + this.radius;
this.vy = 0 - this.vy;
}
if (this.tx > right - this.radius)
{
this.tx = right - this.radius;
this.vx = 0 - this.vx;
}
if (this.ty > bottom - this.radius)
{
this.ty = bottom - this.radius;
this.vy = 0 - this.vy;
}
};
particle.prototype.gravitate = function(target)
{
var dx = target.tx - this.tx;
var dy = target.ty - this.ty;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance > (this.radius + target.radius))
{
var force = (gravity * target.mass * this.mass) / (distance * distance);
this.vx += (dx / distance * force) / this.mass;
this.vy += (dy / distance * force) / this.mass;
target.vx -= (dx / distance * force) / target.mass;
target.vy -= (dy / distance * force) / target.mass;
}
};
particle.prototype.interact = function(target)
{
var dx = target.tx - this.tx;
var dy = target.ty - this.ty;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance < (this.radius + target.radius))
{
var intersect = ((this.radius + target.radius) - distance);
this.vx += (-dx / distance * intersect * density) / this.mass;
this.vy += (-dy / distance * intersect * density) / this.mass;
target.vx += (dx / distance * intersect * density) / target.mass;
target.vy += (dy / distance * intersect * density) / target.mass;
}
}
var particles = [];
function init()
{
for (var i = 0; i < particlecount; i++)
{
var radius = Math.random() * 50 + 5;
var color = Math.random() * 5;
if (color < 1)
color = "yellow";
else
if (color < 2)
color = "cyan";
else
if (color < 3)
color = "red";
else
if (color < 4)
color = "magenta";
else
if (color < 5)
color = "green";
else
color = "blue";
particles[i] = new particle(Math.random() * width, Math.random() * height,radius,color);
}
};
function drawframe()
{
requestAnimationFrame(drawframe);
context.fillStyle = "black";
context.fillRect(0, 0, width, height);
for (i = 0;i < particlecount;i++)
{
for (j = i+1;j < particlecount;j++)
{
particles[i].gravitate(particles[j]);
particles[i].interact(particles[j]);
}
}
for (i = 0;i < particlecount;i++)
{
particles[i].clip(0,0,width,height);
particles[i].limit(maxspeed);
particles[i].move();
particles[i].draw();
}
};
init();
drawframe();
</script>
</body>
</html>
Sunday, June 12, 2016
Simple JavaScript Canvas Animation with source code
A quick and simple canvas example. I am going to do some canvas animation later, I am going to use this to set up the basics.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment